0+
Components in the registry
Frontfriend — by Donux
The AI-friendly
design system
60+ isolated components, a token cloud and a CLI that keeps Figma and code in lockstep — built for multi-brand, multi-stack products and agentic development workflows
- React
- Vue
- Figma sync
- MCP-ready
:quality(82)/apps/donux-website/src/pages/frontfriend/index/8qlFsc6nvMtjBYHMNNj3RHUzDLI.webp)
The design system you wish existed, in numbers
0 stacks
React and Vue, same tokens
0+
Design tokens across tiers
See it in motion
One system.
Every surface you ship
Tokens, components, layouts and brands — all wired together. Watch the system flow from Figma to production, across multiple brands
The registry
No npm dependency.
You own the code
Frontfriend is a component registry, not a package. Pick what you need, copy it into your repo, extend it with the same primitives. No black box, no breaking upgrades
~/your-app
$ npx frontfriend download button command table -f react ✓ Pulled 3 components into src/components/ui/ ✓ Linked tokens from your active brand ✓ Ready to edit — code lives in your repo
Isolated components
Each component is self-contained. Copy it in, adapt it to your needs, deploy it when you want — no cascading updates from a transitive dependency
No npm lock-in
Frontfriend is not a package. It is a registry of primitives, components and patterns. The code lives in your repo, next to everything else you own
Extend with primitives
Custom components built on the same base: typography, spacing, radius, motion — all share the same tokens. Your extensions stay in the system
Token cloud
One source of truth.
Figma, cloud and code — in sync
Tokens change often. Stacks fragment. Frontfriend keeps every brand, every platform and every pipeline pointing at the same versioned truth
Design in Figma
Tokens live in your Figma library — typography, color, spacing, radius, motion. Frontfriend watches the library and stages every change
Version in the Cloud
Review diffs, compose brands, publish versions. The Frontfriend cloud is the single source of truth for every token in every surface
Sync with the CLI
Local dev and CI pull the right token version with one command. No manual export, no drift — Figma, cloud and code stay aligned
CI pipeline .github/workflows/design.yml
- name: Sync Frontfriend tokens run: npx frontfriend init --tag latest --force
Components & Layouts
60+ components.
Layouts that scale with you
Everything a B2B product needs — from the smallest Button to full application shells. Composed on the same primitives and tokens, so the system never fights you
60+ components, shipped
AccordionActionBarAlertAlertDialogAvatarAvatarGroupBadgeButtonCalendarCardChartCheckboxCheckboxFieldCollapsibleCommandDateInputDatepickerDateSliderDialogDrawerDropdownMenuFileUploadFormIconInputInputNumberInputOTPLabelListMultiSelectNavbarPagePdfViewerPhoneInputPopoverProgressRadioGroupRadioGroupFieldResizableSegmentedSelectSeparatorSheetSidebarSkeletonSpinnerStepperSwitchTabBarTableTabsTextareaThemePickerThemeProviderTimePickerToastToggleTooltip and more
Layouts, batteries included
-
AppShell
Topbar + sidebar + content, responsive by default
-
Dashboard
Grid, cards, filters — wired to your data primitives
-
Table
Sortable, filterable data tables with pagination and bulk actions
-
Settings
Multi-level navigation, forms, confirmations
For your agents
MCP, skills and commands
for agentic development
Most design systems were built for humans reading docs. Frontfriend was built so AI coding agents read, reason and ship with the same fidelity as your seniors
Model Context Protocol
Your coding agent queries Frontfriend directly — components, tokens, layouts, brand config — all as first-class context
Curated skills
Opinionated patterns the agent can invoke — add a form, scaffold a table, compose a dashboard, apply a brand — with the system already wired
Slash commands
Shortcuts your team can drop into any agent prompt. Consistent outputs across engineers and projects, same tokens, same primitives
Pricing
One seat-based plan.
Optional hands-on support
Start with per-seat access to the full registry. Add a support pack when you want Donux designers and engineers shipping with you
Frontfriend
Developer seat
$49 / seat / month
Everything you need to ship a multi-brand, multi-stack product. Add or remove seats anytime — billed monthly, cancel whenever
- Full registry — 60+ components, all primitives, all layouts
- Unlimited brands and token sets in the Cloud
- CLI for local dev and CI pipelines
- Figma sync, versioning and diffs
- MCP server, skills and commands for your AI agents
- Community support
Support packs
Add senior hands-on support on top of your seats. Dedicated Slack channel, on-request component work, evolution of the system with your team
Standard
$400 / month
4 hours / month
- Dedicated Slack channel
- Component creation on request
- Component evolution and fixes
- Response within 2 business days
Medium
$1,250 / month
16 hours / month
- Everything in Standard
- Response within 1 business day
- Priority on new component requests
- Quarterly design system review
Premium
$2,000 / month
24 hours / month
- Everything in Medium
- Same-day response
- Dedicated designer + engineer pair
- Multi-brand rollouts with the team
F.A.Q.
How is Frontfriend different from shadcn/ui or Radix?
Frontfriend is a registry like shadcn, but goes much further: multi-stack (React and Vue), a cloud for token versioning and Figma sync, 60+ components including full Layouts, and an MCP server plus skills for AI coding agents. It is designed for teams shipping multi-brand B2B products, not single-app open-source projects
Do I get React and Vue from the same plan?
Yes. Every seat unlocks the full registry across supported stacks. The token cloud and CLI keep both frameworks aligned, so a brand change in Figma propagates to React and Vue consumers in the same sync
What does "you own the code" really mean?
When you pull a component via the CLI, the code is copied into your repo as plain source files — no runtime component package to import from. The only dependency is `@frontfriend/tailwind`, which ships the CLI and the Tailwind plugin that wires tokens into your build. You control every component file, you can edit it, you can fork it — updates are opt-in, pulled by the CLI on your schedule
How does the token cloud work?
Tokens live in the Frontfriend cloud with full versioning — draft, staged, published. Figma sync writes changes upstream, and the CLI pulls them downstream into your repo and CI. You review diffs before anything ships
How is multi-brand handled?
Every brand is a token set composed on top of the shared primitives. Components do not branch per brand — they consume the active brand at build time. Switching brand in Figma or in the CLI is a single command
What AI-agent integrations are included?
An MCP server so your agent can query components, tokens and layouts; a library of skills for common flows (forms, tables, dashboards, brand application); and slash commands your team can drop into any agent prompt for consistent output
How does pricing scale with the team?
Flat $49 per developer seat per month. Add or remove seats anytime. If you need Donux designers and engineers working alongside your team, add a support pack — Standard, Medium or Premium — billed monthly, no long commitment
What exactly is in a support pack?
A private Slack channel with Donux, plus monthly hours you can spend on component creation, component evolution, bug fixes, or system consulting. 4 hours at $400, 16 hours at $1,250, 24 hours at $2,000. Unused hours do not roll over