Frontfriend brings your brand, design rules and real components into one connected design system. Give your team and AI agents the same foundations: how your product looks, how it behaves, and how it speaks.
The same component library can express entirely different design systems. Change the tokens, typography and component configuration; add the usage rules that explain your decisions. Agents can read both the implementation and the intent behind it.
What connects everything
A Workspace is your team’s home. A Design System contains your visual foundations, component configuration and shared design rules. An Application consumes that system with one explicit framework and primitive target.
A single Design System can serve several Applications — including React and Vue products — without asking them to share a rendering framework.
Pick your starting point
- Design decisions to share: write Design rules for your brand, components and voice.
- A new application: follow Installation to connect your tokens and download a component.
- An existing shadcn project: read Adopt Frontfriend before changing your components.
- A brand to bring to life: explore Theme Studio and Brand Import. Figma is optional.
- An agent-assisted workflow: connect MCP and install Design Skills.
Actual components, on your stack
The canonical v4 catalogue contains 85 components across four targets: React with Base UI, Radix UI or React Aria, and Vue with Reka UI. Classes, variants and icons read from the design-system configuration.
Shared component names do not mean identical composition. A React Aria Dialog, for example, has a different controller structure from a Radix Dialog. Each component reference documents its target’s API.
Start building
Import your brand, choose your primitive, and connect your agent to the same design decisions your team uses. Browse the component catalogue for target-specific references.
For existing v3 projects, see Migration and Legacy documentation.