# Meet Frontfriend

Your brand, design rules and components. Understood by AI.

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](/docs/design-rules/) for your brand, components and voice.
- **A new application:** follow [Installation](/docs/installation/) to connect your tokens and download a component.
- **An existing shadcn project:** read [Adopt Frontfriend](/docs/migrate-from-shadcn/) before changing your components.
- **A brand to bring to life:** explore [Theme Studio](/docs/theme-studio/) and [Brand Import](/docs/brand-import/). Figma is optional.
- **An agent-assisted workflow:** connect [MCP](/docs/mcp/) and install [Design Skills](/docs/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](https://app.frontfriend.dev/studio), choose your primitive, and connect your agent to the same design decisions your team uses. Browse the [component catalogue](/components/) for target-specific references.

For existing v3 projects, see [Migration](/docs/migration-v3-v4/) and [Legacy documentation](/docs/legacy/).