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.

MCP server

The blockus MCP server connects your AI coding agent directly to the block catalog. Instead of copy-pasting install commands, your agent can search blocks, read source code, and install blocks without leaving your editor.

Add the server URL to your editor's MCP config once — then ask your agent in plain language: 'add a blockus hero block' or 'build me a SaaS landing page with blockus'.

Full setup instructions for every supported editor are available at blockus.lndevui.com/mcp

json

{
  "mcpServers": {
    "blockus": {
      "url": "https://blockus.lndevui.com/mcp"
    }
  }
}

1Copy the config above into your editor's MCP config file (see /mcp for editor-specific paths).
2Restart your editor or reload MCP servers.
3Ask your agent: "List available blockus blocks" to verify the connection.
4Install blocks with natural language — your agent handles the rest.

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.