Real code. Real screens. Honest gaps.

React + TypeScript components wired to your tokens, proven in realistic screens. Anything the system can't do yet is marked — not faked.

Create a system Read the docs

// Button.tsx — generated
export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
}

<Button variant="primary">
  Create workspace
</Button>

Create your workspace Riverside Ops

BackCreate workspace

Appearance, behaviour and API — in one place.

Every component page connects what it looks like, how it behaves, which tokens it depends on and the props engineers use.

Variants

PrimarySecondaryGhost

States

DefaultHoverFocusDisabled

Token dependencies

button.primary.bgaction.primary

button.primary.fgaction.on-primary

button.radiusradius.control

button.focusfocus.ring

Accessibility

Keyboard and focus order

Visible focus ring, 3:1

Labels for icon-only buttons

Reduced-motion variants

Built only from your components. Gaps shown, not hidden.

Onboarding, settings and dashboard screens prove the system works together. When a screen needs something the system doesn't have, you see a labelled gap — and it goes on the delivery report.

Step 1 of 3 Create your workspace Riverside Ops Gap · Date picker not in systemAdd component Continue

Editable source you own

Plain React + TypeScript in your repo. No runtime lock-in, no black box.

Typed, documented API

Props, variants and states with usage notes engineers can trust.

Installs in minutes

Unzip, import the theme once at the app root, and build.

Next · 04Brand bookA brand book that never drifts from the code.