Just Build It.
Parts that already agree with each other.
Every one reads the same tokens for colour, corners, size and motion. A form, a chart and a chat thread built with them look like one product, because they are.
- Layout primitivesSurface, Container, Stack, …9
- PrimitivesButton, Icon button, Link, …13
- ActionsButton group, Split button, Toggle button, …5
- Form controlsCheckbox, Radio, Switch, …16
- Date & timeCalendar, Date picker, Time picker, …5
- Form structureField, Fieldset, Form, …6
- FeedbackAlert, Banner, Toast, …6
- NavigationBreadcrumb, Tabs, Pagination, …15
- OverlaysPopover, Hover card, Dropdown menu, …8
- Data displayCard, Carousel, Table, …5
- ChartsChart, Area chart, Bar chart, …16
- AI & chatChat bubble, Streaming response, Citations, …11
The everyday pieces, finished.
Each tile is the component itself, recorded as you would use it. Menus, dialogs, fields and charts, with keyboard support and motion that respects your settings.
- Command palette
Filters actions as you type, with one highlight that follows the keys and the pointer.
- Bar chart
Choose a month with a click, a tap or the keyboard. The rest step back, and the choice is spoken.
- Dropdown menu
A short list of actions that opens from its trigger and closes on a choice.
- Dialog
A focused surface for a decision that needs attention before you go on.
- Tabs
Switch between views of one thing. The indicator travels to the new tab.
- Toast
Short results that stack at the edge, fan out under the pointer and time out.
- Select
Pick one option from a list that opens over the field and remembers the choice.
- Switch
Settings that apply right away, beside a segmented control for the cadence.
Measured, not promised.
Contrast, touch targets and motion each have an automated check that fails a change which breaks them. The readings here are taken live from this page, in the paint it actually has.
How motion worksEach text colour on each background the components put it on, measured on this page. Every pair clears 4.5:1, the minimum for body text, and the contrast audit fails the build if one ever drops below.
Every part you need, already built.
127 components, 1,953 examples you can copy, and 12 complete screens that show the parts working together. Start from a screen, or start from a single button.
Browse templates127components
From layout primitives and form controls to charts and the parts an assistant needs. One install line each.
1,953examples
Every variant, size, state and direction, rendered live on its component's page. Copy the one you need.
12templates
Whole screens assembled from the same parts: chat, plans, tool calls, usage. Start from one and change it.
Decided once, so you do not decide again.
One set of tokens
Colour, corners, size and motion live in CSS variables. Change one and every component follows, in light and in dark, without a rebuild.
Every state, designed
Hover, focus, pressed, disabled, loading, empty and error ship with each component. Nothing is left for you to invent at the last minute.
Written for your agent too
Every page has a Markdown twin and the site publishes an llms.txt index, so an assistant writes the same code you would.
One command, or one link.
From your terminal
Add the registry to components.json once, then install the base styles with your first component.
npx shadcn@latest add @tessina/From your agent
Point an assistant at the index. It lists every page as Markdown, examples included.
https:/Make it yours in a minute.
Pick a brand colour, a typeface and the corners, and a real app follows every change. Each pair is checked for contrast as you go, and all 127 components take the theme with them.
The theme creator, recorded as you would use it.