FoundationsComponents
Components

Nine blocks. Every screen.

Accessible, production-ready React components, each wired exclusively to Nexus tokens. Open any card for its live playground, full variant matrix, props, and usage guidelines.

Tokens keep you on-brand

Alert

Six intents of inline messaging with explicit ARIA semantics — assertive, polite, or contextual by variant.

View alert
APNX

Avatar

Identity in three types — image, initials, icon — five sizes, and live presence status dots.

View avatar
BetaStable9+

Badge

Compact status labels and number counters — five intents, two sizes, tag and pill forms.

View badge

Button

The five intents in solid form, sized from the token scale — padding plus line-height, no magic heights.

View button

Checkbox & Radio Button

Selection controls in five intents and three sizes, with label, helper text, and indeterminate support.

View checkbox & radio

Empty State Card

A structured zero-data moment — icon, heading, supporting copy, and paired actions, all on tokens.

View empty state
LabelPlaceholder

Form Fields

Text, dropdown, and file-upload fields across desktop and mobile — states from rest to error, all tokenized.

View form fields

Toggle / Switch

Binary settings with optional label, helper text, and container — plus iOS and Android mobile variants.

View toggle
Tokens, not hex

Tooltip

Dark contextual bubbles in eight positions, small and large — mobile variants included. Spec-only today.

View tooltip

A token-first design system — color, type, spacing, and accessible components that keep every screen consistent across web, tablet, and mobile.

Social Media Handles
Foundations
  • Colors
  • Typography
  • Grid & Layout
  • Spacing
  • Corner Radius
Components
  • Alert
  • Avatar
  • Badge
  • Button
  • Form Fields
© 2026 Nexus Design System. All rights reserved.Nexus Design System v1.0