Documentation

Drop a block. Ship the page.

Introduction

blockus is a curated catalog of production-ready React sections built with shadcn/ui and Tailwind CSS. Every block is served from a public shadcn registry endpoint — register the namespace once and any free block is one CLI command away.

Pro blocks live behind the same endpoint but require a personal API key. Sign in once you've purchased a plan to generate yours — see Pro access below.

Requirements

Your project should already run React 19, Tailwind CSS v4 and shadcn/ui. If shadcn isn't initialized yet, run init from your project root and follow the prompts.

pnpm dlx shadcn@latest init

Register the namespace

Add the blockus registry to your project's components.json so the shadcn CLI knows where to fetch the blocks from. You only do this once per project — no API key needed for free blocks.

json

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

Install a free block

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

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

1Pick a block in /blocks and copy its id (e.g. hero-01).
2Run the install command above with your package manager of choice.
3Import the default export from components/blocks/<id>.tsx and render it.
4Replace the placeholder copy, links and brand colors.

Pro access

Pro blocks require an API key tied to a paid blockus plan. After purchase, sign in, generate a token under Account → Registry token, and add it to your project — the full setup is covered there.

Without a key, Pro install commands return 401 with a clear message — your project keeps working, those specific blocks just won't install.

Copy prompt

Every block exposes a Copy prompt button next to the Preview and Code switcher. It produces an LLM-ready markdown brief — block id, live preview URL, full source, integration steps and constraints.

Paste it into Claude Code, Cursor, Copilot or any agent that takes markdown — it knows enough to add the block to your codebase without guessing.

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.

blockus defaults 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. Re-run the install command to pull the latest version, or watch the changelog for high-level summaries.

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

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.