Free & open source / 296 components & templates / 18 on the way
Interfaces,
nicely made.
The free library for AI agent interfaces, plus premium React & Tailwind components, blocks and templates. Preview, copy, or install with the shadcn CLI. No account. No paywall.
AI agent UI · 76 components
Every interface an AI agent needs.
Chat and composers, reasoning, tool calls and approvals, browser and research agents, traces, workflows, memory and voice. Live, interactive and free.
Chat App · Message Bubble · Prompt Input · Command Composer · Prompt Suggestions · Streaming Response
BrowseGrid Flicker · Thinking Orbs · Thinking Rings · Dot Wave · Scan Line · Terminal Spinners
BrowseReasoning · Model Selector · Model Compare · Context Usage · Citations · Answer Engine
BrowseTool Result · Tool Approval · Clarifying Question · MCP Tool Picker · Generative UI · Code Interpreter
BrowseRate Limit · Tool Failure · Connection Status · Context Full · Polite Refusal · Spend Cap
BrowseAgent Activity · Todo List · Plan Review · Browser Agent · Deep Research · Agent Terminal
BrowseAgent Builder · Agent Flow · Agent Trace · Knowledge Base · Memory · Checkpoints
BrowseVoice Orb · Voice Conversation · Push to Talk · Audio Note · Image Generation · Network Pulse
BrowseMCP · for AI agents
Connect your agent.
Give Claude Code, Cursor, VS Code or Codex direct access to NiceUI through the shadcn MCP server. Ask for a component in plain English — your agent finds it, installs it and wires it up.
Add the registry
In components.json:
{
"registries": {
"@niceui": "https://niceui.dev/r/{name}.json"
}
}Connect your client
Run in your project
claude mcp add shadcn -- npx shadcn@latest mcp.cursor/mcp.json
{
"mcpServers": {
"shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] }
}
}.vscode/mcp.json
{
"servers": {
"shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] }
}
}~/.codex/config.toml
[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]Library
Now in public beta
Ship faster,
beautifully built.
The platform for teams who care about craft.
- Hero — HorizonBlock
- Pricing — MinimalBlock
- Command PaletteComponent
- Stat CardComponent
Simple, honest pricing.
For side projects.
- 3 projects
- Community support
- Basic analytics
For growing products.
- Unlimited projects
- Priority support
- Advanced analytics
For teams at scale.
- Everything in Pro
- SSO and audit log
- Dedicated manager
The whole library
287 more live components, AI agent interfaces, blocks, landing pages and dashboards — open any of them.
Chat App · Message Bubble · Prompt Input · Command Composer · Prompt Suggestions
BrowseRecord Table · Filter & Sort Bar · CSV Import · Relation Picker · Pipeline Board
BrowseSign In · Sign Up · One-Time Code · Magic Link · Password Reset
BrowseArea Chart · Bar Chart · Donut Chart · KPI Chart Cards · Line Chart
BrowseCart Drawer · Checkout · Product Cards · Product Detail · Reviews
BrowseSegmented Pills · Inline Slider · Toggle Row · Unit Input · Icon Tabs
BrowseCoverflow Carousel · 3D Ring Carousel · Card Stack · Parallax Slider · 3D Tilt Gallery
BrowseAurora Background · Animated Grid · Meteors · Particles · Border Beam
BrowseAction Swap · Adaptive Stepper · Animated Alert · Animated Badge · Animated Breadcrumb
Browse404 / Not Found · Availability Scheduler · Bloom Menu · Card Folder · Dither Diagonal Footer
BrowseHero — Aurora · Hero — Spotlight · Hero — Split Product · Hero — Beams · Hero — Orbit
BrowseAI Video Editor Landing · AI Agent Platform Landing · SaaS Landing Page · Studio Landing Page · Wealth Landing Page
BrowseAnalytics Dashboard · Finance Dashboard · Infrastructure Monitor · Commerce Dashboard · AI Agent Console
BrowseCRM App · Badge Maker · Store · Docs Site · Portfolio
BrowseOn the roadmap
18 more in the works. Shipping weekly.
Questions, answered
What is NiceUI?
NiceUI is a free, open-source library of premium React and Tailwind CSS components, blocks and templates. Every item is copy-paste code that lives in your own project, styled in a minimal black and sky-blue aesthetic.
Is NiceUI really free?
Yes. Every component, block and template is free under the MIT license, including for commercial projects. There is no Pro tier, no credits and no account required.
How do I install a NiceUI component?
Run the shadcn CLI with the component's registry URL, for example: npx shadcn@latest add https://niceui.dev/r/button.json. You can also copy the code from any component page into components/ui in your project.
Does NiceUI work with shadcn/ui and Next.js?
Yes. NiceUI follows the shadcn registry format and works with React 18+, Next.js, Vite and Remix, styled with Tailwind CSS v3 or v4. Components have no runtime dependencies beyond React.
Is NiceUI an alternative to 21st.dev or shadcn/ui?
NiceUI uses the same open copy-paste model as shadcn/ui and community libraries like 21st.dev, with a focus on a small set of carefully designed pieces. Everything is free, MIT licensed and requires no sign-up.
Can AI coding assistants use NiceUI?
Yes. NiceUI publishes llms.txt and llms-full.txt, a Markdown version of every component page, and a Copy prompt button that hands the full source to tools like Claude, Cursor or v0.