uiception

Start from complete sections. Just make it yours.

A shadcn-compatible block registry — browse sections on the site, install any block with the CLI, and customize from there.

Tech stack

Layer	Tools
Framework	Next.js 16 (App Router, Turbopack)
UI	React 19, shadcn/ui, Tailwind CSS v4
Motion	GSAP, Motion, Shaders
Fonts & icons	Geist, IBM_Plex_Serif, Instrument_Serif, Phosphor, Tabler
Registry	shadcn CLI (registry.json → /r/*.json)
Language	TypeScript
Tests	Vitest
Deploy	Vercel

Getting started

Prerequisites: Node.js 20+, pnpm

pnpm install
pnpm dev

Open http://localhost:3000.

Scripts

Command	What it does
pnpm dev	Start dev server with Turbopack
pnpm build	Production build (runs registry:build first)
pnpm start	Start production server
pnpm check	registry:validate + test:run + typecheck
pnpm typecheck	TypeScript type check (no emit)
pnpm test	Run Vitest in watch mode
pnpm test:run	Run Vitest once
pnpm lint	ESLint
pnpm format	Prettier (ts, tsx)
pnpm registry:validate	Validate registry.json
pnpm registry:build	Build registry → public/r/*.json

Pre-push workflow

Run in order before pushing to GitHub / deploying to Vercel:

pnpm check   # registry:validate + test:run + typecheck
pnpm build   # prebuild runs registry:build, then next build

Installing blocks

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

Block structure

Every block follows the 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.