Skip to content

Introduction

Standard UI is the shared visual language for product surfaces — tokens, components, and motion on Base UI.

Color and type follow Apps SDK UI. Behavior comes from Base UI; styling uses Standard UI tokens. Prefer package components in app chrome so the system stays dogfooded.

Install

Until packages are on npm, install from this repo with file: dependencies (or workspace links).

bash

npm install file:../standard-ui/packages/tokens file:../standard-ui/packages/react

css

@import "tailwindcss";
@import "@standard-ui/tokens/css/tokens.css";
@source "./node_modules/@standard-ui/react/src";

@custom-variant dark (&:where(.dark, .dark *));

Principles

  • Sentence case for UI copy; never force uppercase
  • Soft focus rings — ring-[3px] ring-ring/20 with a 1px offset
  • Nested radii stay concentric (outer − padding)
  • Buttons and links use cursor-pointer

Explore

Start with foundations, then browse components A–Z.

UI

Brand

Wordmark and foundational brand elements.

Signifier

Söhne heading

Body text-sm · text-md

Typography

Apps SDK scale from 2xl to 2xs, with serif and sans headings.

Colors

Gray, alpha, and hue scales. Primary actions use grayscale.

+ ButtonTabTabAlerts2Label

Components

Form controls, overlays, data display, and layout primitives.

Structure

Spacing, widths, grids, and breakpoints.

Materials

Radius and elevation shadows from Apps SDK UI.

Icons

Central Icons, round outlined, default 20px.

Motion

Shared transitions for overlays, indicators, and color.

Illustrations

Empty, error, success, and search artwork for product states.