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 85-component v4 scope. Select your project’s target explicitly to see the matching 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 component reference switches installation commands, examples, API notes and live preview when you choose a target.

Registry addresses

The canonical addresses include both framework and primitive:

/r/v4/react/base/button.json
/r/v4/react/radix/button.json
/r/v4/react/aria/button.json
/r/v4/vue/reka/button.json

Use Installation to configure the CLI. Do not copy a framework-only historical URL into a new v4 project or silently mix components from different targets.

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.