@aphrody/m3-primitives

Material Design 3 React primitives (buttons, fields, menus, dialogs, cards, toasts) on Base UI, rebuilt from SpaceUI's @spacedrive/primitives.

bun add @aphrody/m3-primitives @aphrody/m3-theme @aphrody/m3-tokens react react-dom tailwindcss

import {
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Input,
} from "@aphrody/m3-primitives";

export function Welcome() {
  return (
    <Card variant="elevated">
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Your name" icon="person" />
        <Button variant="filled">Get started</Button>
      </CardContent>
    </Card>
  );
}

License: Apache-2.0 AND MIT (LICENSE, LICENSE.spaceui). Install guide: docs/material/m3/INSTALL.md.

The SpaceUI set (MIT, (c) Spacedrive) is rebuilt on the M3 system: colour roles and state layers, the 10-step shape scale, the typescale, the focus ring, elevation, Material Symbols and the easings of @aphrody/m3-motion. Base UI (@base-ui/react) is the headless layer: it owns behaviour, keyboard interaction, focus management and accessibility, and drives the M3 enter / exit motion through its data-starting-style / data-ending-style attributes. Every upstream export and prop still works; the Radix-era props (asChild, checked="indeterminate", delayDuration, forceMount, onSelect, array slider values) are mapped onto Base UI, and Base UI props are accepted as well.

Fusion rules, token mapping and the Material Web equivalents of each component: SPACEUI-M3-FUSION.md. Peers: react and react-dom 18 or 19, tailwindcss 4.1+.

Styles

The components are styled with M3 Tailwind utilities (bg-surface-container, text-on-surface-variant, rounded-full, text-label-large, hover:bg-on-surface/8), so the app compiles them with Tailwind v4:

@import "tailwindcss";
@import "@aphrody/m3-tokens/m3-tokens.css"; /* shape, typescale, elevation, motion, state */
@import "@aphrody/m3-theme/spaceui.css"; /* SpaceUI themes as M3 schemes — or tokens.css */
@import "@aphrody/m3-theme/tailwind.css"; /* M3 utilities */
@source "../node_modules/@aphrody/m3-primitives/dist";

Icons use the Material Symbols font: import @aphrody/m3-fonts/fonts-symbols.css, or, with @aphrody/material-web installed, register it once:

import { ensureMaterialSymbols } from "@aphrody/material-web/icon/material-symbols.js";
ensureMaterialSymbols();

Usage

import {
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Icon,
  Input,
} from "@aphrody/m3-primitives";

export function Welcome() {
  return (
    <Card variant="elevated">
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <Input placeholder="Your name" icon="person" />
        <Button variant="filled">
          <Icon name="arrow_forward" size={18} /> Get started
        </Button>
      </CardContent>
    </Card>
  );
}

Components

Sizes: the default (md/unset) is the M3 baseline height; smaller sizes are M3 density steps.

Coming from @spacedrive/primitives

Rename the import. Phosphor icon props still compile (they accept an IconSource: a Material Symbols name, an element or a component). Visible differences: M3 heights (inputs default to 56, icon buttons to 40), pill-shaped buttons, secondary-container selection, Material Symbols glyphs, Select opens below its field, Collapsible draws an expand_more indicator (indicator={false} to opt out).

Development

bun run typecheck
bun test          # happy-dom preloaded by bunfig.toml
bun run build     # Bun.build + declarations