Visitors+12.4%
12,840vs previous period
69 components · open source
Interfaces that move
with intent.
SagUI is a React design system with spring motion, accessible defaults and one token layer. Install it from npm, or point your AI tool at the docs and let it build.
Every example is live
Switch the period, change the status, delete the files. Nothing here is a recording.
Analytics
sagui.dev · last 30 days
Revenue+9.2%
$74.9kvs previous period
Conversion+0.6 pts
4.8%vs previous period
In progress
Checkout stalls on Safari 17
Tapping Pay leaves the spinner running after the card is approved.
Status
Team plan
$96 / mo
seats
Owners, status and the latest milestone.
- At least 12 characters, not met
- Upper and lowercase letters, not met
- At least one number, not met
- At least one symbol, not met
Foundations first, then components
Type, corners and elevation are tokens with roles. Change a token and every component follows, in both themes.
Motion with manners
Change what a component says and it morphs in place instead of jumping.
- Labels crossfade while widths spring to fit, so nothing around them shifts.
- Springs are tuned not to overshoot the state a control reports.
- With reduced motion, every spring becomes a short fade.
sagui-docs
main · ae8d0ea
Click through the steps: the badge and the button keep their place while their content morphs.
Docs for people, and for their AI
Every component has when to use it, when not to, the full API, keyboard and accessibility notes. Connect your assistant to the MCP server and it reads them before it writes code.
claude mcp add --transport http sagui https://sagui-docs.vercel.app/api/mcp$ npm install @sagui/uiGood questions
Read the docsInstall @sagui/ui, import its styles in your Tailwind v4 entry, and import components by name. The installation guide covers the Tailwind setup in three lines.
Yes. Connect it to the SagUI MCP server and it can search for the right component, read its full docs and check the tokens before it writes code. Every page is also plain Markdown, and /llms.txt indexes them all.
Components only read semantic tokens. Override the color, radius, type and shadow tokens once and every component follows, in light and dark.
Yes. Every animation checks prefers-reduced-motion: springs become short fades and nothing moves across the screen.
Components are built on native elements and Radix primitives, with visible focus rings, full keyboard support and labels on every control. Storybook runs axe checks on every story.
Start with one component
Try it on its page, then install it with one command.