Ink UI

A warm, approachable React component library built on Base UI primitives and styled with Tailwind CSS v4 — distributed through the shadcn registry system.

Docs: https://ink-ui.com

Introduction

Ink UI provides accessible, customizable components with a warm, human aesthetic. The design centers on warmth and friendliness — a palette of warm grays and oranges, large rounded corners, and smooth, natural motion with subtle micro-interactions. It's built for consumer-facing products that should feel inviting, rather than dense, data-heavy dashboards.

This is not a traditional npm dependency. Like shadcn/ui, Ink UI is a copy-paste component registry: you own the code. Browse the components, copy the source into your project, and customize freely — no hidden abstractions, no version lock-in.

Key characteristics:

• Accessible by default — built on Base UI's unstyled, WAI-ARIA-compliant primitives
• Warm design language — warm grays + orange accents, generous border radii
• Motion built in — smooth transitions and micro-interactions via Motion
• Tailwind CSS v4 — theme defined entirely with CSS variables, light & dark modes included
• Own your code — components are self-contained files you copy into your project

Tech Stack

• TanStack Start — full-stack React framework with file-based routing
• React 19 + TypeScript
• Tailwind CSS v4 — theme via CSS variables (@theme inline, no config file)
• Base UI — unstyled, accessible component primitives
• fumadocs-mdx — MDX-powered documentation
• shadcn CLI — registry builds and component distribution
• Cloudflare Workers — deployment via Wrangler

Getting Started

pnpm install
pnpm dev

The dev server runs at http://localhost:3000.

Commands

Command	Description
pnpm dev	Start the dev server (port 3000)
pnpm build	Production build
pnpm preview	Preview the production build
pnpm deploy	Build and deploy to Cloudflare Workers
pnpm lint	Lint with oxlint
pnpm format	Format with oxfmt (auto-fix)
pnpm format:check	Check formatting without writing
pnpm typecheck	Type-check with tsc --noEmit
pnpm typegen	Regenerate fumadocs-mdx types (runs on postinstall)
pnpm registry:build	Build the registry JSON to public/r/

Project Structure

├── content/docs/          # MDX documentation pages
│   └── components/        # Component docs
├── registry/
│   └── default/
│       ├── ui/            # Registry components
│       ├── examples/      # Component demos
│       ├── lib/           # Shared utilities (cn, etc.)
│       └── styles/        # Theme CSS variables
├── src/
│   ├── routes/            # File-based routes (TanStack Router)
│   ├── components/        # Site-specific components
│   └── styles/            # App styles
├── registry.json          # shadcn registry definition
└── public/r/              # Built registry output (generated)

Adding a New Component

1. Create the component in registry/default/ui/<component-name>.tsx
2. Create a demo in registry/default/examples/<component-name>-demo.tsx
3. Add an entry to registry.json
4. Run pnpm registry:build
5. Write the docs page at content/docs/components/<component-name>.mdx

Generated Files — Do Not Edit

• .source/ — generated by fumadocs-mdx (regenerate with pnpm typegen)
• src/routeTree.gen.ts — generated by TanStack Router
• public/r/ — generated by pnpm registry:build

License

See LICENSE.