Substrate UI

A neobrutalist design system. 60 components that look right out of the box — no global CSS tricks, no surprises.

Primitives (10)

Small, composable building blocks.

Avatar

User photo with fallback initials.

Radix Avatar

Badge

Small status label with color variants and retro styling.

Button

Clickable action with size and variant options.

Card

Container with header, body, and footer slots.

IconButton

Icon-only button with retro shadow, sized to fit SVG icons.

Link

Styled anchor with variant support and asChild for Next.js Link.

Loader

Bouncing dots loader with configurable count and speed.

Text

Typography primitives for headings, body, small text, and code.

Menu

Dropdown menu for contextual actions.

Radix

Tabs

Tabbed interface with overflow dropdown.

Radix Tabs

Form (8)

Inputs, selects, and controls for collecting data.

Alert

Contextual feedback with semantic status colors and composable title/description.

Input

Text input supporting all standard HTML input types.

Textarea

Multi-line text input for longer content.

Checkbox

Toggle a single option on or off.

Radix Checkbox

RadioGroup

Select one option from a set.

Radix Radio Group

Select

Dropdown picker for choosing from a list.

Radix Select

Switch

Binary toggle for on/off settings.

Radix Switch

Slider

Range input for selecting numeric values.

Radix Slider

Layout (9)

Page structure and responsive containers.

CardGrid

Responsive grid for cards with configurable columns.

Dialog

Modal dialog with header, body, footer, and overlay.

Radix Dialog

Divider

Horizontal or vertical separator with optional label.

Drawer

Slide-in panel from the left or right edge.

FormLayout

Form shell with sections, field wrappers, inline rows, and action bar.

NavBar

Responsive navigation with auth states and mobile drawer.

SectionNav

Sticky horizontal anchor navigation between page sections.

SimplePage

Page shell with header, title, actions slot, and content area.

TwoColumnLayout

Side-by-side panels on desktop, drawer on mobile.

Landing (12)

Sections and blocks for marketing and landing pages.

AnnouncementBanner

Dismissible top-of-page banner for announcements and promotions.

CTABanner

Call-to-action section with headline and action buttons.

FAQ

Accordion-style frequently asked questions section.

FeatureSection

Grid of feature cards with icons and descriptions.

Footer

Site footer with link groups, branding, and newsletter.

Hero

Main hero section with headline, subtitle, and CTA buttons.

LogoCloud

Trusted-by logo strip for social proof.

NewsletterSignup

Email signup form with input and submit button.

PricingTable

Pricing plan cards with feature lists and tier highlights.

Section

Generic wrapper for landing page sections with consistent spacing.

StatsBar

Metrics row displaying key numbers and stats.

Testimonial

Customer quote cards with author details.

Demos (21)

Full-page compositions showing components working together.

Authentication

Unified Sign In

Tabbed sign-in with password and magic link methods in one page.

Sign In

Authentication page with form validation, social login, and loading states.

Sign Up

Registration flow with multi-field validation and success feedback.

Magic Link

Passwordless sign-in via email link with sent confirmation.

Verification

Check Email

Waiting state after sign-up with resend action and guidance.

Verify Email

Outcome page for email verification: success, expired, or invalid.

Link Expired

Dead-end page for expired or invalid links with recovery path.

Password

Forgot Password

Single-field form to request a password reset link.

Reset Password

Set a new password with confirmation and validation.

Change Password

Three-field password change from account settings.

Two-Factor

2FA Setup

QR code scan, manual key entry, and recovery codes for two-factor auth.

2FA Challenge

TOTP code entry at login with method switching links.

2FA SMS

SMS verification with masked phone, resend cooldown timer.

2FA Recovery

Recovery code entry as a fallback when authenticator is lost.

Security

Rate Limited

Too-many-attempts screen with live countdown timer.

Account Locked

Security alert for locked accounts with reset and support options.

Lifecycle

Onboarding

Profile setup with avatar, bio, role select, and notification prefs.

Welcome

Success/celebration screen after completing account setup.

Sessions

Active device list with revoke confirmation dialogs.

Delete Account

Destructive flow with type-to-confirm and final dialog.

Landing Page

Full SaaS landing page with hero, features, pricing, testimonials, FAQ, and more.