Components
1,540
Buttons and forms, charts, and full app screens, web and native. Each with its types, sizes, states, and swappable icons.
Designed in Figma.Already in code.
A 1,540-component Figma library and the React code that matches it, name for name. Plus a local MCP server, so your AI tools build with the real thing.
One-time payment. Perpetual license. The Figma library alone is $79.
Used by designers and engineers at
CourseraGoogleMetaAccentureStanfordHarvard
MicrosoftR/GAMICAIBMShopifyAtlassian
Every team builds the same button twice.
Once in Figma. Once in code. Then a third time, when the two drift apart.
Starting from zero, again.
Buttons, inputs, tables. Every project rebuilds the parts nobody wanted to build the first time.
A product that drifts.
Without one source of truth, spacing and color wander until one product feels like five.
A handoff that never ends.
Engineers rebuild designs by eye. Something always misses, and the review loop starts over.
The Card in Figma is the Card in React.
Same name, same variants, same tokens. Designers and engineers finally point at the same thing, so there's nothing left to hand off.
In FigmaMetric Header
In codeblock-store-orders.tsx
import { MetricHeader } from "@/components/pegasus/metric-header" {kpis.map((metric, i) => ( <MetricHeader key={metric.label} type="chart" // same property as Figma size="sm" label={metric.label} value={metric.value} delta={metric.delta} trend={metric.trend} data={metric.data} icon={metricIcons[i]} />))}Both read the same tokens36 semantic tokens, on Tailwind's scale
--background--foreground--primary--primary-foreground--muted-foreground--card--border--ring--radius--chart-1--success--brand--destructive--sidebarEvery block, running live.
50 screens from real kinds of products, from storefronts to agent dashboards. Pick one, flip the theme, then click in. It's the same React you get, running from the Storybook.
- 50
- product blocks
- 475
- Storybook stories
- 2
- themes, every one
- 0
- accessibility violations
Metrics, revenue trend and top channels.
Your AI can't hallucinate a component it already has.
AI tools are quick to make UI and slow to reuse yours. Pegasus ships a local MCP server that hands Claude Code, Cursor, or any MCP client your real library.
It finds what exists.
The server runs on your machine and exposes the whole catalog: every component, prop, variant, token and product block. Your AI looks things up instead of guessing.
It composes instead of inventing.
Ask for a billing page and it starts from the Billing block, built from the Table, Progress and Credit Card you already ship. No fourth, slightly different Button.
It stays on brand.
Tokens travel with the components, so generated pages land in your color, spacing, and radii with nothing to repaint.
pegasus-mcp — local
you Build the billing settings page.
⏺ pegasus.search_components("billing")
← CreditCard, Progress, Table, Badge, Button, Facepile…
⏺ pegasus.get_block("billing")
← app shell with plan, usage meters and invoices
⏺ pegasus.get_component("credit-card")
← props, variants, usage, and the tokens it uses
✓ Page built from 7 existing Pegasus components. 0 invented.
Everything you'd build first, already built.
A UX-tested library in Figma, typed React code that matches it, and hand-off docs for every element. In one box.
Design tokens
535
Color, type, space, radius, and shadow, as Figma variables and in code. Light and dark modes.
Hand-drawn icons, line and fill
1,200
Plus 30 text and effect styles: type, shadows, and blurs, ready to theme.
Templates
84
Landing pages, dashboards, native app screens, sign-up and login.
See the product blocks, liveModes
Light and dark, on every component.
Live from the Storybook, not a screenshot.
In every component:Auto LayoutLight and dark modesWCAG 2.1 AA contrastTyped React propsStorybook stories
Every component, hands on.
These aren't pictures. Each tile is a story from the Storybook: press “Try it live” and use it, or open it to see every prop, variant and state.
Browse the StorybookWatch them test themselves.
Every story is checked for render errors and accessibility in both themes. These four also run an interaction test, live, as they come into view.
Password Security
Types a password, watches the meter
Increment Stepper
Steps up, steps down, hits the limit
Ratings
Hovers, picks, clears
Chip
Selects, deselects, removes
Four things you'd otherwise spend a quarter on.
Components
From the button to the data table.
1,540 components, each one responsive and documented, ready for a Figma frame or a React route.
Theming
Change one token. Everything follows.
Color, type, spacing, radius, and effects live in one token set that Figma and code both read.
Accessibility
Accessible before anyone asks.
Built to WCAG 2.1 AA. Keyboard paths, focus states, and contrast are documented per component, not patched in the week before launch.
Responsive
Web and native mobile. Same parts.
Components adapt across breakpoints with Auto Layout, so the desktop dashboard and the mobile flow come from one system.
Take the tour.
The components, tokens, and templates, walked through in Figma.
Your brand in an afternoon.
Design tokens set every color, radius, space, and type decision: 535 Figma variables, and the code's theme built from the same source. Change them once and both surfaces update.
Try it here on a real product block, running live from the Storybook, not a screenshot. Pick a color, change the corners, switch the mode, then copy the CSS it takes.
When you're done, Pegasus doesn't look like Pegasus. It looks like you.
Built on the stack you'd pick anyway.
Pegasus doesn't invent a component model. It takes the open-source stack your engineers already know and finishes it: consistent APIs, tokens, stories, and docs across the whole set.
Read every line. Extend it, fork it, or walk away with it.
shadcn/ui and Base UI
Accessible primitives your engineers already trust.
recharts
Every chart component, themed by your tokens.
Tailwind CSS
Utility styling, with no proprietary CSS layer.
TypeScript
Typed props on all 1,540 components.
Build it: months. Buy it: one license.
A design engineer runs about $15,000 a month. Here's what you'd be paying them to rebuild.
| Figma library: 1,540 components, 535 tokens, 1,200 icons | 8–12 weeks of design |
| React components on shadcn, Base UI, and recharts, in TypeScript | 8–12 weeks of engineering |
| Storybook with stories and tests for the full set | 2–3 weeks nobody budgets |
| A local MCP server wired to the component catalog | Not hirable off the shelf |
| One token source that themes Figma and code together | The part teams get wrong |
| The full system, one time | $149 |
The 14-Day Rebrand Guarantee. If you can't retheme Pegasus to your brand within two weeks of buying, write us and get a full refund.
An MVP in two weeks. Twelve client projects on one license.
What changes when the foundation is already built, from the 100,000+ people using Pegasus in more than 100 countries.
“We went from a blank Figma file to a fully designed MVP in 2 weeks. Pegasus gave us the entire component foundation — we just customized the tokens to match our brand.”
Sarah Chen
Lead Product Designer, fintech startup
“The naming matches between Figma and code, so handoff stopped being a meeting. I map every design to a component without a single back-and-forth with the design team.”
Marcus Rivera
Frontend Engineer
“We use Pegasus across all client projects now. One license has carried 12+ client deliverables this year — hundreds of hours we didn't bill to rebuilding basics.”
Priya Sharma
Design Agency Owner
“Dark mode, accessibility, responsive variants — all baked in. We stopped reinventing the wheel and shipped three features last quarter instead of a button library.”
James Okafor
Creative Director, SaaS company
“As a solo designer, Pegasus is the design team I don't have. The 440+ icons alone saved me weeks across my last three projects.”
Nina Kowalski
Freelance UI/UX Designer
“We onboarded 3 new designers last quarter. With Pegasus as the system of record they were productive on day one — no ramp-up, no inconsistencies.”
Daniel Park
VP of Product, e-commerce platform
Pay once. Own it.
No subscription and no seat count. Two editions, one guarantee: retheme Pegasus to your brand within two weeks, or get a full refund.
Figma Library
$79one-time
The design surface on its own, for designers and design teams.
1,540 Figma components
535 design token variables
1,200 icons and 84 templates
Light and dark variants
Auto Layout throughout
Free updates
Unlimited projects, commercial use
Get the Figma library for $79
Perpetual license · 14-day money-back guarantee
Full System
Most teams pick this$149one-time
Figma plus the matching React code, Storybook, and the local MCP server.
Everything in Figma Library
React components on shadcn, Base UI, recharts, TypeScript
Storybook with stories, interaction tests and accessibility checks
Local MCP server for AI tools
One token source for Figma and code
Unlimited team seats
Free updates
Unlimited projects, commercial use
Get the full system for $149
Perpetual license · 14-day money-back guarantee
Asked before buying.
What people check before they pick an edition. Something missing? Email us.
Skip the foundation. Start on the product.
The Figma library, the matching React code, Storybook, and the MCP server, rethemed to your brand. Backed by the 14-Day Rebrand Guarantee.