Documentation

Drop a block. Ship the page.

A quick tour of how the catalog works today, while we get the shadcn registry endpoint ready.

Introduction

blockus is a curated catalog of production-ready React sections built with shadcn/ui and Tailwind CSS. Every block ships as a single self-contained file you can install through the shadcn CLI or copy directly into your project.

All blocks are free at launch — pick what you need, swap the copy and ship.

Requirements

Your project should already be running React 19, Tailwind CSS v4 and shadcn/ui. If a block needs a primitive you do not have yet, the CLI installs it for you when it pulls the block in.

pnpm dlx shadcn@latest init

Register the blockus namespace

Add the blockus registry to your project's `components.json` so the shadcn CLI knows where to fetch the blocks from.

{
  "registries": {
    "@blockus": "https://blockus.lndevui.com/r/{name}.json"
  }
}

Install a block

Once the registry is registered, install any block by its id. The CLI fetches the source, installs missing shadcn primitives and writes the file under `components/blocks/`.

1Pick a block in /blocks and copy its id (e.g. `hero-02`).
2Run `pnpm dlx shadcn@latest add @blockus/<id>` from the project root.
3Import the default export from `components/blocks/<id>.tsx` and render it.
4Replace the placeholder copy, links and brand colors.

pnpm dlx shadcn@latest add @blockus/hero-02

Copy-paste fallback

Prefer to skip the CLI? Open any block, switch to the Code tab and copy the file by hand. The Copy-prompt button next to it ships an LLM-ready brief — paste it into Claude Code, Cursor or Copilot and your agent will integrate the block for you.

Customization

Blocks ship in plain JSX with utility classes only. Change copy, swap icons from lucide-react, restyle with your own Tailwind tokens or refactor the markup — there is no abstraction in the way.

If you replace lucide-react with another icon library, search and replace the imports. The semantics are kept generic so other libraries plug in easily.

Dark mode

Every block reads the standard shadcn CSS variables (`--background`, `--foreground`, `--muted`, …). As long as your project toggles the `.dark` class on the `<html>` element, the blocks adapt automatically.

We default the site to dark mode — that is a project-level choice, not something baked into the blocks.

Updates

When a block gets a fix or a refresh, the registry endpoint serves the new source at the same URL. Run the install command again to pull the latest, or watch the changelog for high-level summaries.

Support

Stuck on something? Email leonelngoya@gmail.com — Pro accounts get priority replies, free users still get an answer when time allows.

Still stuck?

Drop Leonel an email at leonelngoya@gmail.com. Pro accounts get priority replies.