| name | ui-reference |
| description | UI component library reference guide. Use when building UI without a design, choosing a component library, or looking for animation/effect inspiration. Covers headless, styled, animation, and chart libraries with llms.txt links for AI-readable documentation. |
UI Reference
When you need to build UI without a Figma design, or need inspiration for components, animations, or effects — reference these libraries. Each entry includes an AI-readable documentation link (llms.txt) when available.
When to Use This Reference
- Feature has no Figma design and you need UI component patterns
- Need animation or visual effect ideas for an existing component
- Choosing between component libraries for a new project
- Looking for a specific component type (chart, drag-and-drop, date picker, etc.)
- Need to understand a library's API before implementing
Quick Selection Guide
| Need | Recommended | Why |
|---|
| Headless + full custom styling | Base UI, Ark UI | Zero style opinions, bring your own CSS |
| shadcn/ui ecosystem extension | ReUI, coss ui, Bklit UI | Built for shadcn, same patterns |
| Tailwind + ready-to-use | HeroUI, DaisyUI | Pre-styled with Tailwind |
| Enterprise/admin dashboard | Ant Design, Mantine | Rich component set, tables, forms |
| Animation effects | Animata, ReactBits | Copy-paste animated components |
| AI-assisted component generation | 21st.dev | AI generates custom components |
| Charts / data visualization | Bklit UI | shadcn-compatible chart components |
Headless (Unstyled) Libraries
Base UI
- Type: Headless component library (40+ components)
- Styling: Bring your own — works with Tailwind, styled-components, CSS Modules, anything
- Best for: Custom design systems where you need full control. Ideal with shadcn/ui for building custom component libraries
- llms.txt: https://base-ui.com/llms.txt
- Pros: Zero style opinions, excellent accessibility, composable API
- Cons: Must write all styles yourself, React only
Ark UI
- Type: Headless component library (50+ components)
- Styling: Framework-agnostic, bring your own
- Best for: Multi-framework projects (React, Vue, Svelte, Solid)
- llms.txt: https://ark-ui.com/llms.txt
- Pros: Same API across 4 frameworks, MCP server support, extensive primitives
- Cons: Smaller community than Radix
Styled (Tailwind-based) Libraries
HeroUI
- Type: Styled component library (210+ components)
- Styling: Tailwind CSS + tailwind-variants, build-time CSS
- Best for: Next.js projects that want beautiful defaults with Tailwind customization
- Docs: https://www.heroui.com/docs/guide/introduction
- Pros: Large component count, Framer Motion animations built-in, dark mode, successor to NextUI
- Cons: React only, heavy dependency on Tailwind + React Aria
DaisyUI
- Type: CSS component classes for Tailwind (50+ components)
- Styling: Tailwind class-based, semantic color system
- Best for: Quick prototyping, framework-agnostic (works with any HTML)
- llms.txt: https://daisyui.com/llms.txt
- Pros: Framework-agnostic (HTML classes), built-in themes, zero JS dependency
- Cons: Less interactive behavior (CSS-only), limited complex components
shadcn/ui Ecosystem
ReUI
- Type: Enterprise-grade shadcn registry (18+ advanced components)
- Styling: shadcn + CSS variable design tokens
- Best for: Data tables, forms, drag-and-drop, date pickers in shadcn projects
- llms.txt: https://reui.io/llms.txt
- Pros: Dual primitive support (Base UI + Radix), MCP server, enterprise quality
- Cons: Smaller component set, shadcn dependency
coss ui
- Type: Hybrid — Base UI + Tailwind styled (50+ components)
- Styling: Tailwind CSS on Base UI headless foundation
- Best for: Migration from shadcn/Radix, wanting headless flexibility with pre-styled defaults
- llms.txt: https://coss.com/ui/llms.txt
- Pros: Migration guides from shadcn/Radix, own-your-code model, accessibility-first
- Cons: Relatively new, smaller ecosystem
Bklit UI
- Type: Chart/data visualization components for shadcn (11+ chart types)
- Styling: CSS custom properties, shadcn theming
- Best for: Adding charts (line, bar, pie, candlestick, sankey, etc.) to shadcn projects
- Docs: https://ui.bklit.com/docs/installation
- Pros: Auto-registry config, animated transitions, real-time data support
- Cons: Charts only, not a general component library
Full-featured Libraries
Chakra UI
- Type: Styled component library (v3)
- Styling: CSS-in-JS with theming system
- Best for: Rapid development with good defaults and strong accessibility
- llms.txt: https://chakra-ui.com/llms.txt
- Pros: Excellent DX, comprehensive theming, active community
- Cons: CSS-in-JS runtime cost, less Tailwind-friendly
Ant Design
- Type: Enterprise styled library (60+ components)
- Styling: CSS-in-JS with token system, dark mode
- Best for: Admin dashboards, enterprise backend systems, data-heavy UIs
- llms.txt: https://ant.design/llms.txt
- Pros: Most comprehensive component set, battle-tested at scale, i18n
- Cons: Opinionated design, large bundle, enterprise aesthetic
Mantine
- Type: Full-featured React library (100+ components + hooks + extensions)
- Styling: CSS Modules, Emotion, Sass, vanilla-extract supported
- Best for: Projects needing components + hooks + charts + rich text editor in one ecosystem
- llms.txt: https://mantine.dev/llms.txt
- Pros: Hooks ecosystem, date/chart/notification/carousel extensions, CSS variable theming
- Cons: Large dependency surface, React only
Animation & Effects
Animata
- Type: Copy-paste animated React components (150+ elements)
- Styling: Tailwind CSS + Framer Motion
- Best for: Adding micro-interactions, animated cards, hero sections, text effects
- Docs: https://animata.design/docs/setup
- Pros: No npm install needed (copy-paste), 20+ categories, Tailwind native
- Cons: Must copy each component manually, quality varies
ReactBits
- Type: Visual effects library (100+ components in 4 variants)
- Styling: JS+CSS, JS+Tailwind, TS+CSS, TS+Tailwind variants
- Best for: Advanced visual effects — particle systems, 3D interactions, WebGL backgrounds, text animations
- llms.txt: https://reactbits.dev/llms.txt
- Pros: GSAP + Three.js + Framer Motion powered, 4 variant options, CLI installable
- Cons: Heavy effects may impact performance, advanced usage requires WebGL knowledge
AI-Assisted
21st.dev
- Type: AI component generation platform
- Styling: React + Tailwind output
- Best for: Generating custom components when no design exists, browsing community component library
- llms.txt: https://21st.dev/llms.txt
- Pros: IDE integration (Cursor/Windsurf), component marketplace, craft-focused output
- Cons: Credit-based pricing, generated code needs review
Usage with NCC Agents
When an agent needs UI reference:
- Check if the project already uses a component library (spec/PROJECT.md
## Libraries)
- If yes — use that library's llms.txt for component API reference
- If no design exists — use this guide to pick appropriate components
- For animations/effects — check Animata and ReactBits before writing custom animations
- Pass the llms.txt URL to WebFetch for detailed API documentation
