crafterui

Less is more. Open Source motion and interaction components you can customize, extend, and build on. React + Tailwind, on the shadcn registry.

· ·

Features

  • Motion & interaction components — scroll reveals, kinetic type, tooltips, toggles, AI composers; each built to do one thing well
  • Open, then install — browse at ; open any for the live demo and its source
  • shadcn registry — install with the shadcn CLI; you own the code, no runtime package
  • Fully Tailwind — no CSS files to import; components carry their own scoped <style> only where a third-party widget needs it
  • Motion-first — animations with /react; interruptible, layout-aware, reduced-motion aware

Install a component

bash
npx shadcn@latest add "https://crafterui.com/r/letter-reveal.json"npx shadcn@latest add "https://crafterui.com/r/all.json"   # everything at once

pnpm, yarn and bun run the same CLI: pnpm dlx, yarn dlx, bunx --bun.

Short names

Register the namespace once in your components.json:

json
{  "registries": { "@crafterui": "https://crafterui.com/r/{name}.json" }}

Then the URL is implied, and search lists the whole registry:

bash
npx shadcn@latest add @crafterui/letter-revealnpx shadcn@latest search @crafterui

Either way the component is copied into your project, with its registry dependencies resolved.

Requirements

  • React 19
  • Tailwind CSS v4
  • shadcn/ui initialized (npx shadcn@latest init)
  • Node.js 18+

Turbo Monorepo

  • Managed with Turborepo and pnpm workspaces
  • Run tasks via turbo run <script> (e.g. pnpm --filter web dev for the showcase)
  • Node.js 20+ is required for the monorepo tooling
apps/web                       Showcase site (Next.js App Router + React 19 + Tailwind v4)  app/                         Routes: / (landing), /components, /components/[slug]  registry/crafterui/ui/*        Installable component sources (one file each)  registry/crafterui/examples/*  The demo beside each component - shipped AND rendered  registry.json                Registry source of truth (metadata + files)  src/catalog.ts               Browse-page grouping + the full-bleed flag  src/components/CrafterShowcase  slug → demo map for the component pages

Tech Stack

  • + pnpm Workspaces
  • 15
  • 19
  • v4
  • registry format
  • (site typography)

Getting Started

Install dependencies:

bash
pnpm install

Run the development server:

bash
pnpm dev

Open in your browser (web app port).

Useful scripts:

bash
pnpm build          # build everythingpnpm check          # one-stylesheet + registry invariantspnpm typecheck      # TypeScript across the monorepo

Usage

Browse components at , open any for the live demo, then install it into your app:

bash
npx shadcn@latest add "https://crafterui.com/r/letter-reveal.json" "https://crafterui.com/r/arrow-tooltip.json"

Component pages are statically generated from registry.json. Registry payloads at /r/*.json are built on every deploy — the same file the site shows (highlighted) and the CLI installs.

Add a component

  1. Drop the source at apps/web/registry/crafterui/ui/<name>.tsx
  2. Drop its demo at apps/web/registry/crafterui/examples/<name>-demo.tsx
  3. Add the item to apps/web/registry.json
  4. Add the slug to apps/web/src/catalog.ts under a category
  5. Add the dynamic() line to apps/web/src/components/CrafterShowcase.tsx

pnpm check fails on any of those being missed.

Contributing

Contributions are welcome! Please read our and before submitting pull requests.

License

© CrafterUI. Site scaffold adapted from (MIT).