Build beautiful interfaces.
Ship consistently.
OpenUI is a flexible, accessible component system for teams who care about great products and great code. Built with thoughtful defaults, reusable components, and accessibility in mind.
React + TypeScript
Keyboard accessible
Responsive by default
Active
Beta v1.48 Components
Semantics & keyboard tested
React + TypeScript
Modular styling
UserProfile.tsx
TypeScript
import { Button, Input, Badge, Card } from "@openui/react"
export function UserProfile() {
return (
<Card variant="subtle" className="p-6 space-y-4">
<Badge tone="brand">Active v1.2</Badge>
<Input label="Workspace" defaultValue="production-us-east" />
<Button variant="primary">Save changes</Button>
</Card>
);
}ARCHITECTURAL PRINCIPLES
Everything you need to build consistently.A toolkit engineered from first principles so product teams ship zero-regret user interfaces.
Accessible by default
Thoughtful patterns designed to work seamlessly for every user and input modality.
Built for React
Composable components designed cleanly for modern React and next-gen metaframeworks.
Responsive everywhere
Interfaces that adapt gracefully across viewport boundaries and dense form-factors.
Designed to scale
Reusable component primitives that preserve design continuity across cross-functional squads.
PRIMITIVE CATALOG
Simple building blocks. Beautiful results.
A preview of core primitives designed with mathematical precision and uncompromising accessibility.
BUTTONS
Interactive
INPUT FIELD
Controlled
STATUS BADGES
Semantics
Accessible contrast validated against WCAG standards.
DESIGN TOKENS
Theme
Token Architecture
Radius, Spacing, Color
Standardized tokens for layout, radius, and color palettes.
SEGMENTED TABS
Navigation
Arrow navigation and dynamic tab-index roving built in.
INLINE ALERT
Feedback
Release Candidate ready
Ready for deployment in sandbox
Polite live region dispatching for screen reader alerts.
Designed for everyone.
Accessibility isn't an afterthought. OpenUI considers semantic structure, keyboard interaction, focus management, contrast ratios, and assistive technology ergonomics from the very first token.
Keyboard navigation
Semantic HTML
Colour contrast (WCAG AAA)
Visible focus states
Screen-reader friendly
Reduced motion support
CONTRAST MATRIX
7.42 : 1 Ratio
Primary #3525CD
Light background safe
Text High-Contrast
14.1 : 1 Foreground
DEVELOPER ERGONOMICS
Beautiful UI. Clean code.
Composable components designed to be intuitively easy to understand and effortless to customize.
Welcome.tsx
import { Button } from "@openui/react"
export function Welcome() {
return (
<Button variant="primary"
<size="lg"
onClick={() => console.log("Ready!")}
>
Get started
</Button>
);
}LIVE PREVIEW CANVAS
Interactive
Tab Index 0Zero configuration needed. Supports deep polymorphic slotting with React primitives and arbitrary layout engines.
Start crafting with OpenUI today
Install into any React or Next.js app in under sixty seconds.