# WunderUI (small)

> 222 React components on Base UI and Tailwind CSS v4, a Figma library, blocks,
> templates and motion — with the rules an AI agent follows. Short context for small windows;
> the full one is https://wunderui.com/llms-full.txt.

## Rules
- Never hardcode colours.
- Theme by overriding tokens, not by restyling components.
- Dark mode is a `.dark` class on `<html>`.
- The package is client code.
- Import from the package root, never from `dist/` or `src/` paths.
- `cn` is not re-exported — import it from the `cn` package directly.
- Prefer a composite over rebuilding one.
- Charts take a `loading` prop; do not build your own skeleton.
- A KPI chart ends on the trend line.
- Motion comes from tokens too.
- Agent UI has its own components.

## Motion
- Duration and easing are class names, not numbers.
- Only `transform` and `opacity`.
- Entrances decelerate, exits accelerate.
- Never fade in the LCP element.
- Restrain the travel.
- One overshoot per screen.
- Reduced motion is opt-in, not a kill switch.
- Never `transition-all`.
- Loading keeps its height.
- A looping ambient animation is the one place `ease-in-out` belongs.
- Animate by frequency.
- Anchored surfaces grow from their trigger.
- Toggles stay interruptible.
- Hover only where hover exists.
- Reduced motion keeps the fade.

## Copy
- Buttons say what happens.
- Sentence case everywhere in the product.
- Errors say what happened and what to do.
- Empty states explain and offer one action.
- Labels are nouns, hints are sentences.
- Numbers carry their unit.
- No filler.
- Confirmations name the object.

## Components
- Primitives: Accordion, Avatar, Avatar Group, Badge, Breadcrumb, Button, Icon Button, Button Group, Card, Checkbox, Switch, Radio Group, Input, Textarea, Progress, Slider, Pagination, Separator, Divider with Label, Skeleton, Tooltip, Dialog, Alert Dialog, Collapsible, Toggle, Meter, Kbd, Spinner, Toolbar, Dropdown Menu, Hover Card, Table, Tabs, Agenda, Action Bar, Carousel, Empty State, File Tree, Floating TOC, Holo Card, Kanban, Item Card, List View, Timeline, Widget, Timeline Event, Avatar Stack, Agenda Event
- Overlays: Popover, Emoji Picker, Sheet
- Charts: Line Chart, Bar Chart, Area Chart, Composed Chart, Stacked Chart, Pie Chart, Radial Chart, Gauge Chart, Radar Chart, Funnel Chart, Progress Chart, Bullet Chart, Sparkline, Candlestick Chart, Bubble Chart, Heatmap, Distribution Chart, Waterfall Chart, Range Bar Chart, Status Tracker, Sankey Chart, Network Chart, Treemap, Sunburst, River Chart, Slope Chart, Timeline Chart, Chart Card
- Data Display: Data Grid, Filter Menu, Data Table, List Item, List Group, List Panel
- KPI: KPI, KPI Group, Metric Card, Metric Group
- Navigation: App Layout, Sidebar, Navbar, Segment, Stepper, Command, Context Menu
- Forms: Native Select, Inline Select, Checkbox Button Group, Radio Button Group, Number Stepper, Drop Zone, Rich Text Editor, Color Picker, Cell Color Picker, Cell Slider, Cell Select, Cell Switch, Selector Item, Label, Field, Fieldset, Form, Input Group, Number Field, OTP Field, Combobox, Autocomplete, Calendar, Date Picker, Textarea Field, Checkbox Field, Form Actions
- AI: Chat Message, Chat Message Actions, Chat Loader, Chat Attachment, Chat Source, Chat Tool, Chain of Thought, Code Block, Markdown, Prompt Input, Prompt Suggestion, Text Shimmer, Chat List View
- Agents: Agent Status, Approval Card, Run Timeline, Cost Meter, Run Error, Agent Grid, Plan Step, Agent Plan, Plan Summary, Activity Item, Log Stream, Agent Lane, Duration Bar, Diff View, Terminal Output, Search Result Card, Tool Permission Row, Expiry Timer, Scope List, Usage Meter, Context Meter, Slash Command Menu, Mention Picker, Context Pill, Prompt Mode Switch, Model Picker, Model Select, Voice Input, Artifact Panel, Source List, Agent Avatar, Handoff Divider
- Feedback: Alert, Toast, Pull to Refresh, Rating, Number Value, Trend Chip, Pressable Feedback, Emoji Reaction Button
- Layout: Resizable, Scroll Area
- Block Parts: Page Header, Keyboard Hint, Command Item Row, Search Result, Notification Item, Checklist Task, Project Card, File Card, Status Bar, Tab Item, Tab Bar, Price, Text Link Row, Social Sign In Buttons, Option Row, Option Row Group, User Info, Password Requirement, Password Strength, OTP Code Input, Backup Code, Invite Row, Invite Link Row, Settings Row, Inline Note, Auth Heading, Kanban Card Item, Column Header, Event Chip, Conversation Item, Person Cell, Task Row, Record Card, Stars, Product Image, Product Card, Line Item, Product Mini Card, Checkout Steps, Histogram Bar, Review Card, Payment Methods, Text Field, Password Field

## More
- Instructions for CLAUDE.md / AGENTS.md: https://wunderui.com/INSTRUCTIONS.md
- Full design context: https://wunderui.com/DESIGN.md
- Structured index: https://wunderui.com/design.json
- Skills: https://wunderui.com/skills