Components

Motif ships a built-in set of primitives — the same components every motif app reaches for first. They render on web and native through one import site, share the same style props, and read the same tokens.

How the families split

Components are grouped by what they do, not where they sit in a layout.

• Layout — Box, Stack, Container, Grid, and the rest of the spatial primitives. Box is the atom every other primitive composes from.
• Typography — Text, Heading, Paragraph, plus inline atoms like Code and Kbd. Sentence-level typography lives here.
• Forms — input controls, the Field wrapper that pairs them with a label and help text, and Fieldset for grouped inputs.
• Media — Avatar, Icon, Image, Svg, Link. Anything that puts a visual object on the page.
• Interactive — Pressable, Button, IconButton. The keyboard- and pointer-driven affordances.
• Scroll — ScrollView, Sticky, VirtualList. Scrolling regions and position-tracking elements.
• A11y — FocusScope, LiveRegion, VisuallyHidden. The accessibility-only primitives that have no visual surface of their own.
• Control flow — Show and Hide. Declarative branching at the JSX layer.
• Utilities — Overlay and Portal. The render-elsewhere primitives.

The same component on web and native

Every primitive on this list works on both platforms. The render path differs — Box becomes a div on web and a View on native — and a handful of components reach across the divide with different implementations (SafeArea, ScrollView, VirtualList). Their props match anyway, so cross-platform code stays portable.

On web …; on native …: pages flag the divergence where it matters in a Cross-platform notes section.

Beyond the primitives

The primitives stop at the spatial and visual layer. Behavioural components — Dialog, Menu, Combobox, the rest — live in @usemotif/headless. Headless ships in its own package because most apps want to compose their own surfaces against a behaviour contract, not inherit a styled one.