# Choose your primitives

Four native targets. One design-system vocabulary.

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:

```text
/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](/docs/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.