Docs

How uiception is built, and how to install a block.

Introduction

TLDR; uiception is a shadcn compatible registry for Next.js.

Browse sections on the site, install any block with the CLI, and customize from there. Start from complete sections instead of empty components. Alongside blocks, uiception also ships full templates: complete Next.js starters you scaffold a new project from instead of dropping into an existing one.

Installation

Run the site locally, or install a single block into your own project.

Local development

Requires Node.js 20+ and pnpm.

pnpm install
pnpm dev

Open http://localhost:3000.

Installing a block

Every block ships as a shadcn registry item. Install one directly into your own project with the shadcn CLI:

npx shadcn@latest add "https://uiception.com/r/<block-name>.json"

Block structure

How every block is organized under registry/new-york/blocks.

Every block follows the same shadcn-style layout:

registry/new-york/blocks/{block-name}/
  {block-name}.tsx   # Entry — wrapper + imports only
  page.tsx           # Preview page
  components/        # Visual sub-components
  hooks/             # Client animation logic
  lib/               # Data, types, constants
  styles/
    {block-name}.css # Keyframes, layout vars

Simple static blocks with no animation or sub-components stay as a single entry file — sub-folders are added once real complexity exists.

Template structure

How templates differ from blocks and how a new one is registered.

Templates are full standalone Next.js apps, not a single component. They live under registry/new-york/templates instead of registry/new-york/blocks, and there's no fixed folder shape beyond what the app itself needs:

registry/new-york/templates/{template-name}/
  app/         # Routes — layout, pages, nested folders
  components/  # UI, including components/ui
  content/     # MDX or other app content
  lib/         # Actions, data, schemas
  styles/      # Extra CSS beyond globals
  .env.example # Env vars the template expects

A new template touches four places, same pattern as blocks:

  1. registry/new-york/templates/{template-name}/ — the template itself
  2. lib/templates.ts — adds the version under its category (id, title, registryPath, description)
  3. registry.json — a registry:block entry with categories: ["template", ...], listing every file, dependencies, and any envVars
  4. components/template-previews/{id}.tsx plus components/template-preview-by-version.tsx — preview definition and id map