v1.0 — 30 production-ready components

Build interfaces
that scale

An open-source React component library for B2B SaaS. TypeScript-first, accessible by default, dark mode ready.

Get StartedView Components
30 ComponentsTypeScriptWCAG 2.1 AARadix UIDark Mode
App.tsx
123456789101112
import { Button, Card, Input } from 'apex-design-system'
export default function LoginForm() {
return (
<Card variant="elevated">
<Input type="email" placeholder="Email address" />
<Input type="password" placeholder="Password" />
<Button variant="primary">Sign in</Button>
</Card>
)
}

Engineered for modern
SaaS applications

Every architectural decision is made to help you build faster without compromising on quality, accessibility, or user experience.

Accessible by default

WCAG 2.1 AA compliant. Keyboard navigation, screen reader support, and focus management built into every component.

TypeScript-first

Full type definitions with IntelliSense support. Catch errors at compile time, not runtime.

Dark mode ready

Seamless theme switching with CSS variables. Every component designed for both light and dark contexts.

Radix primitives

Built on Radix UI for unstyled, accessible headless components. Full control over styling.

Responsive design

Mobile-first approach with Tailwind breakpoints. Every component adapts from 375px to 1920px.

Tested & reliable

Unit tested with Vitest and accessibility tested with vitest-axe. Ship with confidence.

30 components,
one consistent system

From inputs to data display, every component follows the same design principles and works together seamlessly.

Button
Input
Email
Password
Must be at least 8 characters
Card
Project Overview
Updated 2 hours ago
Track your team's progress with real-time analytics and customizable dashboards.
Dialog
Delete item?
This action cannot be undone.
Table
ComponentCategoryStatus
ButtonInputStable
DialogOverlayStable
ToastFeedbackBeta
Toast
Changes saved
Your preferences have been updated.
Error occurred
Please try again later.

Simple, composable API

Import what you need. Every component is self-contained with no interdependencies. Consistent props, predictable behavior.

Dashboard.tsx
styles.css
import { Card, Badge, Progress } from 'apex-design-system'
export function MetricCard({ title, value, trend }) {
return (
<Card variant="elevated">
<div className="flex items-center gap-2">
<h3>{title}</h3>
<Badge>{trend}</Badge>
</div>
<p className="text-3xl font-bold">{value}</p>
<Progress value={72} />
</Card>
)
}

Revenue

+12.5%

$48,290

72% of target$67,000

Start building today

Install the package and start using production-ready components in minutes. No complex configuration needed.

Read the docsBrowse componentsView on GitHub