Introduction

A design system for building accessible and composable user interfaces in React.

Apsara is an open-source React component library that provides enterprise-grade, accessible components for building complex data interfaces. Built on Radix UI primitives and Base UI, it combines unstyled accessibility foundations with a carefully designed visual layer powered by CSS custom properties.

Why Apsara?

Accessibility first — Every component is built on battle-tested primitives that handle ARIA attributes, focus management, and keyboard navigation correctly. You get accessible UI without the effort.

Consistent design language — A unified token system ensures visual consistency across your application. Colors, spacing, typography, and effects all follow predictable patterns that adapt automatically to light and dark modes.

Production ready — Components are designed for real-world applications: data tables with sorting and filtering, command palettes, multi-select comboboxes, and complex form controls that handle edge cases gracefully.

Minimal footprint — No runtime CSS-in-JS. Styles are vanilla CSS with semantic tokens, keeping your bundle lean and your performance predictable.

Components

Apsara provides over 50 components organized by function:

CategoryComponents
LayoutBox, Flex, Grid, Container, Separator
NavigationNavbar, Sidebar, Breadcrumb, Tabs, Link
Data DisplayDataTable, Table, List, Avatar, Badge, Chip, Indicator
FormsButton, InputField, TextArea, Select, Combobox, Checkbox, Radio, Switch, Slider, ColorPicker, Calendar
FeedbackDialog, Sheet, Popover, Tooltip, Toast, Callout, EmptyState, Skeleton, Spinner
UtilitiesCommand, Search, CopyButton, CodeBlock, ScrollArea

Theming

The theming system uses CSS custom properties (tokens) that automatically adapt to the active theme. Wrap your app with ThemeProvider to enable light/dark modes, accent colors, and style variants.

1import { ThemeProvider } from "@raystack/apsara";
2

3<ThemeProvider defaultTheme="system" accentColor="indigo">
4  <App />
5</ThemeProvider>

Tokens follow a consistent naming convention:

1.custom-element {
2  color: var(--rs-color-foreground-base-primary);
3  background: var(--rs-color-background-base-secondary);
4  padding: var(--rs-space-4);
5  border-radius: var(--rs-radius-3);
6}

See the Theme Overview for complete documentation.

Technology

Apsara is built with:

  • Radix UI — Unstyled, accessible component primitives
  • Base UI — Headless UI components from MUI
  • TanStack Table — Powerful data table utilities
  • class-variance-authority — Type-safe component variants
  • TypeScript — Full type definitions for all components and props

Next Steps