UIBlocks.

GET STARTED

From a good starting point
to your own interface.

Browse a real preview, choose a coherent page recipe, and bring the source into your project. You own the code and the finishing touches.

01. Install a block

Start with a React project using Tailwind CSS 4. Merge the following registry entry into your existing components.json. Keep your aliases, style, and other registries.

{
  "registries": {
    "@uiblocks": "https://uiblocks.org/r/{name}.json"
  }
}

This configuration uses the current site address, so you can also install from a local or preview build. Your terminal must be able to reach that address. Use https://uiblocks.org after the production domain is live.

Install your first block

npx shadcn@latest add @uiblocks/hero-01

Or install directly without adding a named registry:

npx shadcn@latest add https://uiblocks.org/r/hero-01.json

The registry installs source into your configured components directory under uiblocks/<block-id>. Bundled dependencies and original license notices travel with the block. Existing application routes remain under your control.

02. Build from a recipe

Begin with a complete page that fits your task. Each recipe includes an ordered block list, a working demo, content boundaries, and instructions you can hand to your coding assistant.

  1. 01Open the complete page preview on desktop and mobile.
  2. 02Install its blocks in the listed order and keep the shared style.
  3. 03Replace the fictional demo copy with your actual product content.
  4. 04Connect the provided callbacks to your real application and verify each state.
Explore the page recipes

03. Use with your AI assistant

After configuring the registry, connect the official shadcn MCP server in your supported editor. Use the setup command and follow the editor-specific instructions in the official shadcn guide.

npx shadcn@latest mcp init

Give your assistant a task with real content and a recipe, for example:

Use the UIBlocks tool-landing recipe for my product website. Read /llms.txt and the recipe JSON from this registry host. Inspect the full page preview, then install the listed blocks. Keep the clean-saas spacing and typography. Use my actual copy, preserve source notices, and check desktop, mobile, and long Chinese headings.

Machine-readable resources

llms.txtcatalog.jsonregistry.jsonAI usage rules

Metadata helps an assistant choose a block. It still needs to inspect the preview and apply the content guidelines; a registry connection alone does not enforce visual quality.

04. Compatibility & sources

  • The 12 curated UIBlocks originals use React, Tailwind CSS 4, and lucide-react. They expose props for your copy and application callbacks.
  • The inherited Blocks.so collection includes its Base UI primitives and is adapted to portable React. Connect navigation callbacks and product services in your host application.
  • The Frame workspace is a browser-only demonstration. Files stay local; it does not convert video, create real subscriptions, or process payments.
  • UIBlocks preserves Blocks.so’s MIT copyright notice. Each registry item includes author, source revision, license information, and bundled notices.
  • Preview images are generated from the corresponding components. Rebuild previews when the design changes.
Explore the upstream project