Choose your primitives

A primitive owns interaction mechanics: focus, keyboard behavior, disclosure state and overlays. Frontfriend connects those mechanics to your visual system. Target selection belongs to an Application, not an individual visual preference.

Supported combinations

Target	Framework	Primitive	CLI flags
`react-base`	React 19	Base UI	`-f react --primitive base`
`react-radix`	React 19	Radix UI	`-f react --primitive radix`
`react-aria`	React 19	React Aria	`-f react --primitive aria`
`vue-reka`	Vue 3	Reka UI	`-f vue --primitive reka`

All four belong to the canonical 88-component scope. New React projects default to Base UI. Saved and explicit targets stay in use. Select a target in the reference to see its installation, composition and API.

Keep native composition

Shared names and design tokens make your system portable. They do not make target APIs interchangeable.

Radix: commonly composes triggers through asChild and uses onClick for button events.
Base UI: uses its native render composition model; do not substitute Radix-only asChild examples.
React Aria: uses onPress, isDisabled, and its native controller structure. Its Dialog reference uses an outer DialogTrigger.
Reka: uses Vue slots, bindings and events. Controlled state generally uses v-model.

The Aria Drawer follows shadcn’s explicit Base UI Drawer exception. It keeps the Base UI swipe and snap API. Other Aria components use their native Aria primitives. For an Aria Sidebar Disclosure, use one SidebarMenuButton slot="trigger" inside Collapsible; do not wrap it in CollapsibleTrigger asChild.

The component reference switches installation commands, examples, API notes and live preview when you choose a target.

Component installation

Components resolve from an authenticated immutable Design System Release. The CLI uses the application’s saved framework and primitive to select the component source.

pnpm exec frontfriend setup --ff-id YOUR_FF_ID
pnpm exec frontfriend download button --dry-run
pnpm exec frontfriend download button --yes

Use Installation to configure the CLI. Keep the application’s target and Release selection together when you install components.

Switching an existing application

Treat a target change as a migration. Review imports, target-specific exports, controlled-state bindings and behavior; update the project config and registry mapping together; then run application tests.