Components your AI already understands.
A production-grade React + Tailwind v4 design system with an MCP server, llms.txt, and copy-for-LLM built into every page. Generate, theme, and ship UI at the speed your agents work.
npx shadcn@latest add "https://ui.saasflare.io/r/button.json"{
"mcpServers": {
"saasflare-ui": {
"url": "https://ui.saasflare.io/api/mcp"
}
}
}Built for the way you build now
Most libraries make your AI guess. Saasflare UI hands it the source of truth — so generated UI is correct, typed, and on-brand from the first prompt.
MCP server built in
Point Cursor, Claude, or any MCP client at /api/mcp and it pulls live component APIs, props, and examples straight into the conversation.
llms.txt, ready to fetch
A complete machine-readable catalog at /llms.txt and /llms-full.txt — drop the whole design system into any model's context in one request.
Paste-ready specs
Ask your assistant for any component and the get_component tool returns its exact props, variants, and examples — plus a machine-readable registry at /registry.json. No scraping, no guesswork.
IntelliSense-grade types
Strict TypeScript with JSDoc on every export. Completions, hover docs, and example imports are correct the first time — for you and your copilot.
One codebase. Infinite brands.
Palette, surface, and radius are runtime tokens — not rebuilds. Click around; the whole page re-themes live. Ship the same components with every customer's brand.
117 components. Every one themeable.
From primitives to data viz to scroll-driven motion — composed, accessible, and animated by default.
Forms, data display & viz
39 inputs and data widgets — comboboxes, date pickers, tables, charts, trackers — all driven by the same intent tokens.
Effects & motion
15 scroll- and pointer-driven effects, animated by default.
Feedback & navigation
Dialogs, drawers, menus, toasts — accessible primitives you don't re-implement.
Layout & composed widgets
Bento grids, pricing cards, stat cards, team cards — production blocks, not just primitives.
Productive in a minute
One import for the styles, one provider, and you're themed. No Tailwind config, no env vars.
// 1. Install the styles once
import "@saasflare/ui/styles"
// 2. Wrap your app in the provider
import { SaasflareShell } from "@saasflare/ui"
// 3. Use any component — themed, typed, animated
import { Button, Card, GradientText } from "@saasflare/ui"
export function App() {
return (
<SaasflareShell>
<Card>
<h1>Build with <GradientText>Saasflare</GradientText></h1>
<Button intent="primary">Ship it</Button>
</Card>
</SaasflareShell>
)
}Ship your next interface this afternoon
Free and open source. The same components power the Saasflare SaaS starter — start here, scale into the full product when you're ready.