Frontfriend v4 connects your brand, design rules and native components to the context agents need to work on your product. Build different design systems from the same components, across React and Vue.
Your brand
Start with Brand Import and refine your foundations in Theme Studio. Semantic tokens connect color, typography and component styling across your applications.
Your rules
Design rules explain how your brand looks, behaves and speaks. Organize them by chapter, add scope and rationale, and share relevant requirements and guidance with agents through MCP.
Your stack
The catalogue covers 85 components across Base UI, Radix UI, React Aria and Vue with Reka UI. Select an explicit primitive target and keep component source in your repository.
Your agents
MCP supplies design rules and component knowledge. Design Skills guide setup, design, import and audit workflows. Design contracts carry product intent into the next iteration.
Your team
A Workspace owns access, a Design System owns shared decisions, and an Application chooses its target and installed components. Read Plans and access and Versions & releases to understand these responsibilities.
Existing applications
Follow Adopt Frontfriend for a shadcn project or Migrate from v3 for an existing Frontfriend application. Archived documentation remains available for previous versions.