Chassis UI
A framework-agnostic design system bridge. Switch between Material, Polaris, Carbon, Apple HIG, and more by toggling the theme â no code changes required.
Try it now â use the theme switcher in the header to see every component transform instantly.
Buttons
Input
Controls
Badges
ð Framework Agnostic
Web Components at the core. First-class React, Astro, and Svelte wrappers.
ðĻ Theme Hot-Swap
Switch between design systems in under 100ms via CSS custom properties.
âŋ Accessible
WCAG 2.1 AA compliant. ARIA roles, keyboard navigation, focus management.
ðŠķ Lightweight
~5KB runtime (Lit). Zero framework dependencies. Tree-shakeable exports.
Supported Design Systems
Chassis UI ships with 12 design system themes. Select any theme from the dropdown above to see every component on this site transform instantly.
Material Design 3
Created by Google. The latest evolution of Material Design, powering Android, Google apps, and Flutter. Emphasizes dynamic color, rounded shapes, and expressive motion.
Fluent
Created by Microsoft. The design language behind Windows 11, Microsoft 365, and Teams. Known for subtle depth cues, clean typography, and layered surfaces.
Apple HIG
Created by Apple. The Human Interface Guidelines define the look and feel of iOS, macOS, and visionOS. Characterized by generous radii, translucency, and precision spacing.
Lightning
Created by Salesforce. The Lightning Design System powers the world's largest CRM platform. Built for data-dense enterprise applications with bold typography and structured layouts.
Material Design 2
Created by Google. The predecessor to Material 3, still widely used across millions of Android apps and the web. Defined by elevation shadows, dense purple palette, and contained shapes.
Carbon
Created by IBM. Carbon is IBM's open-source design system for products and digital experiences. Recognizable by sharp corners, structured grids, and the IBM Plex typeface.
Atlassian Design System
Created by Atlassian. Powers Jira, Confluence, Trello, and Bitbucket. Focused on clarity and efficiency for team collaboration tools with compact, information-rich interfaces.
Spectrum
Created by Adobe. Spectrum is Adobe's design system for creative and enterprise products like Photoshop, Illustrator, and Experience Cloud. Features pill-shaped buttons and precise accessibility.
Polaris
Created by Shopify. Polaris powers the Shopify admin and merchant ecosystem. Designed for commerce interfaces with a focus on clarity, efficiency, and merchant empowerment.
Primer
Created by GitHub. Primer is the design system behind GitHub.com. Built for developer tools with systematic spacing, a green-accented palette, and a focus on content density.
Base
Created by Uber. Base Web powers Uber's rider, driver, and Uber Eats platforms. A bold black-and-white system with generous radii, press-to-shrink interactions, and high contrast.
Default
Chassis UI's own neutral baseline theme. A clean, modern starting point with zinc tones, medium radii, and no strong brand identity â ideal for custom projects.