# Frontfriend v4

> A connected design system for your brand, design rules and AI agents. 85 components across four primitive targets. Different systems can use the same components with their own tokens, styling and usage rules.

## Guides
- [Meet Frontfriend](https://website.frontfriend.dev/markdown/introduction.txt): Your brand, design rules and components. Understood by AI.
- [Installation](https://website.frontfriend.dev/markdown/installation.txt): Connect a project, choose your target, and install your first component.
- [Choose your primitives](https://website.frontfriend.dev/markdown/primitives.txt): Four native targets. One design-system vocabulary.
- [Adopt Frontfriend](https://website.frontfriend.dev/markdown/migrate-from-shadcn.txt): Bring your existing shadcn project into a shared design system.
- [Design rules](https://website.frontfriend.dev/markdown/design-rules.txt): Teach your AI how your brand looks, behaves and speaks.
- [Design tokens](https://website.frontfriend.dev/markdown/tokens.txt): Name intent once. Carry it through your whole interface.
- [Theming & component config](https://website.frontfriend.dev/markdown/theming.txt): Connect every visual property to your design system.
- [Light & dark mode](https://website.frontfriend.dev/markdown/dark-mode.txt): A shared identity in two appearances.
- [Accessibility & motion](https://website.frontfriend.dev/markdown/accessibility.txt): Build interactions that work beyond the screenshot.
- [Theme Studio](https://website.frontfriend.dev/markdown/theme-studio.txt): Your design system, with the controls exposed.
- [Brand Import](https://website.frontfriend.dev/markdown/brand-import.txt): Turn an existing identity into a considered starting point.
- [Figma sync](https://website.frontfriend.dev/markdown/figma.txt): Keep visual foundations connected to the tools your team uses.
- [Registry & installation](https://website.frontfriend.dev/markdown/registry.txt): Source files in your repository, resolved for the right target.
- [Versions & releases](https://website.frontfriend.dev/markdown/versioning.txt): Let each application adopt changes deliberately.
- [Private components](https://website.frontfriend.dev/markdown/private-components.txt): Your private component registry, hosted and managed in Frontfriend.
- [MCP connection](https://website.frontfriend.dev/markdown/mcp.txt): Let your agent work with the system behind the interface.
- [Design Skills](https://website.frontfriend.dev/markdown/design-skills.txt): Give agents the decisions, not just the pixels.
- [Agent context & generated facts](https://website.frontfriend.dev/markdown/agent-context.txt): Keep component knowledge close to the code that uses it.
- [Design contracts](https://website.frontfriend.dev/markdown/design-contracts.txt): Keep product intent and shared decisions close to the code.
- [CLI reference](https://website.frontfriend.dev/markdown/cli-reference.txt): The commands that connect tokens, source and agent workflows.
- [Project configuration](https://website.frontfriend.dev/markdown/configuration.txt): Make the Design System and target explicit.
- [Troubleshooting](https://website.frontfriend.dev/markdown/troubleshooting.txt): Find the broken connection and get back to building.
- [Plans and access](https://website.frontfriend.dev/markdown/plans.txt): Workspace subscriptions, system ownership and team roles.
- [Frontfriend v4](https://website.frontfriend.dev/markdown/release-status.txt): A connected design system for your brand, your stack and your agents.
- [Migrate from v3](https://website.frontfriend.dev/markdown/migration-v3-v4.txt): Plan the Tailwind and component transition together.
- [Code ownership & eject](https://website.frontfriend.dev/markdown/eject.txt): An explicit exit path, with code your team can keep.
- [Legacy documentation](https://website.frontfriend.dev/markdown/legacy.txt): Guides and release history for earlier Frontfriend versions.

## Component references
- [Button / Base UI](https://website.frontfriend.dev/docs/components/react-base/button/)
- [Button / Radix UI](https://website.frontfriend.dev/docs/components/react-radix/button/)
- [Button / React Aria](https://website.frontfriend.dev/docs/components/react-aria/button/)
- [Button / Reka UI](https://website.frontfriend.dev/docs/components/vue-reka/button/)
- [Accordion / Base UI](https://website.frontfriend.dev/docs/components/react-base/accordion/)
- [Accordion / Radix UI](https://website.frontfriend.dev/docs/components/react-radix/accordion/)
- [Accordion / React Aria](https://website.frontfriend.dev/docs/components/react-aria/accordion/)
- [Accordion / Reka UI](https://website.frontfriend.dev/docs/components/vue-reka/accordion/)
- [Dialog / Base UI](https://website.frontfriend.dev/docs/components/react-base/dialog/)
- [Dialog / Radix UI](https://website.frontfriend.dev/docs/components/react-radix/dialog/)
- [Dialog / React Aria](https://website.frontfriend.dev/docs/components/react-aria/dialog/)
- [Dialog / Reka UI](https://website.frontfriend.dev/docs/components/vue-reka/dialog/)

Use authenticated Frontfriend MCP tools for application-specific design rules, component APIs and context. Never infer API equivalence between primitive targets.