Beautiful, sophisticated UI components designed for modern React and Tailwind CSS applications — with first-class media, timeline, and creative-tooling primitives.
ikui is a copy-paste React component library and documentation site. It is distributed as a shadcn-style registry — you install components straight into your codebase and own the source, rather than pulling in an npm dependency.
Alongside the usual form and display primitives, ikui focuses on the pieces that are hard to find elsewhere: audio waveforms, video timelines, image editing, and scrubbable media controls. Everything is built on Base UI primitives (no Radix) and styled with Tailwind CSS v4.
- Docs & live demos — https://ik-ui.pages.dev/docs
- Registry — https://ik-ui.pages.dev/r/{name}.json
- 🧩 Copy-paste, you own the code — installs the source into your repo via the shadcn CLI; no runtime package to lock into.
- 🎬 Media & timeline first — waveforms, rulers, playheads, thumbnail strips, trimmers, and a full image editor, not just buttons and inputs.
- 🧱 Components and blocks — low-level primitives plus ready-made blocks (audio trimmer, video trimmer, media compressor, image editor…).
- 🪄 Base UI foundation — accessible primitives from
@base-ui/react, re-themed with thebase-novastyle. - 🎨 Tailwind CSS v4 — CSS-first theming, no
tailwind.config. - 🤖 AI-friendly — MCP server,
llms.txt, and per-page "Copy Markdown" so agents can find, install, and compose components. - ⚛️ Modern stack — React 19, Next.js 16 App Router, TypeScript strict.
ikui components are installed through the shadcn CLI. First register the ikui
namespace in your project's components.json:
{
"style": "base-nova",
"registries": {
"@ikui": "https://ik-ui.pages.dev/r/{name}.json"
}
}Then add any component or block:
npx shadcn@latest add @ikui/copy-button
npx shadcn@latest add @ikui/audio-waveform
npx shadcn@latest add @ikui/image-editorPrerequisites: a project on React 19 and Tailwind CSS v4, set up per the shadcn/ui installation guide. See the Get Started guide for the full walkthrough.
ikui is designed to be driven by AI coding tools:
-
MCP — connect the registry as an MCP server so your IDE (Claude Code, Cursor, …) can search and install components for you:
npx shadcn@latest mcp init
Then ask your IDE things like "add an audio-waveform component". See the MCP guide.
-
llms.txt — a structured map of the docs for agents:
/llms.txt. -
Copy Markdown — every docs page can be copied as Markdown to feed straight into your model.
Browse the full catalog with live previews at ik-ui.pages.dev/docs.
| Category | Components |
|---|---|
| Display | Chart · Spark Chart · QR Code · Tree · Heatmap Calendar |
| Form | Cascader · Password Input · Date Range Picker |
| Button | Copy Button |
| Image | Image Compare · Image Crop · Image Grid · Particle Image |
| Audio | Audio Waveform · Waveform Player |
| Video | Video Thumbnail Cache · Thumbnail Strip · Segmented Timeline Strip |
| Timeline | Timeline Ruler · Timeline Element · Timeline Playhead |
| Blocks | Audio Trimmer · Video Trimmer · Media Compressor · Image Cropper · Image Editor · Storyboard Timeline · Video Frame Extractor |
- Next.js 16 (App Router, RSC) + React 19
- Tailwind CSS v4 (CSS-first, no config file)
- Base UI (
@base-ui/react) as the only UI primitive layer - MDX docs with Shiki highlighting
- Biome for lint + format, TypeScript 6 (strict), pnpm 11, Node ≥ 22
Visit https://ik-ui.pages.dev/docs to view the documentation.
You only need to change 4 files to add a new component. See the contributing guide.
Have questions, comments or feedback? Reach out on Telegram.