Docs

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

Introduction

What uiception is and how it's built.

uiception is a shadcn-compatible block registry. Browse sections on the site, install any block with the CLI, and customize from there — start from complete sections instead of empty components.

It's built with Next.js 16 (App Router, Turbopack), React 19, shadcn/ui, and Tailwind CSS v4, with GSAP and Motion for animation. The registry itself follows the shadcn CLI format: registry.json builds out to public/r/*.json.

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 point — section wrapper + imports only, no logic
  page.tsx              # Preview page
  components/           # Visual sub-components (swappable with GSAP / Three.js)
  hooks/                # Client animation logic (useEffect, GSAP timelines)
  lib/                  # Data, types, constants, config
  styles/
    {block-name}.css    # Keyframes, layout vars, dark mode via CSS vars

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