Accessible by default
Every component meets WCAG 2.2 AA standards. Keyboard navigation, screen reader support, and focus management built in.
v0.1.0 - Preview Release
An open design system for building accessible interfaces
Open UI is a community-driven collection of accessible, composable components and design tokens. Use it to ship consistent interfaces faster, without sacrificing flexibility.
2.4k stars 45+ components MIT license
Built for the modern web
Every detail considered so you can focus on what makes your product unique.
Customizable tokens
Design tokens for color, typography, spacing, and breakpoints. Theme any brand without touching component logic.
TypeScript native
Full type safety across all components. Autocomplete, strict generics, and zero ambiguity in your editor.
Composable architecture
Small, focused primitives that compose into complex patterns. Bring your own state, layout, and styling.
Tested and proven
Over 95% test coverage. Used in production across dozens of projects before the public release.
Tree-shakeable
Import only what you use. Zero runtime overhead from unused components. Your bundle stays lean.
Buttons
Four variants and three sizes. Each with press feedback, focus ring, and disabled state.
Variants
Sizes
With icons
Cards
Lightweight containers for grouping related content and actions.
Default Card
The standard card with a subtle border and background. Use for most content groupings.
Elevated Card
Adds a soft shadow for extra depth. Use when the card needs to stand out from the surface.
Bordered Card
A transparent card with a colored accent border. Use for callouts or highlighted content.
Form Elements
Accessible inputs with labels, placeholders, error states, and focus rings.
This field is required
Preferences
Badges
Small labels for status, categories, and metadata.
DefaultPrimarySuccessWarningNeutral
Ready to build with Open UI?
Install the CLI, explore the components on GitHub, or browse the documentation to get started.
Works with React, Vue, and Svelte. Node 18+ required.