Skip to content
Primitiv home
Framework
Consumption mode

One design system.
Three ways to build.

Headless behaviour, an installable styling layer, or a Figma library — pick the surface that fits how you work. The same accessible components sit underneath every mode.

Choose your path

How you consume Primitiv

Headless

Behaviour, props and a11y only. No CSS — you own the styling. Ships as an npm package.

npm i @primitiv-ui/react
Headless docs

Styled (registry)

Headless props plus the style-layer contract and CSS variables. Copied into your app.

npx primitiv add button
Styled docs

Figma

Spec and redline content — the design library for building in Figma, powered by Harmoni.

Design in Figma

On every component page

Installing a component

Button

stable

Reflects the global mode switch — currently Styled:

npx primitiv add button

import path @primitiv-ui/react

Props

PropTypeDefaultRequired
asChildbooleanfalseno
childrenReactNodeno
refRef<HTMLButtonElement>no
type"button" | "submit" | "reset""button"no