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 using Base UI primitives, 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 proven primitives that handle ARIA attributes, focus management, and keyboard navigation correctly. You get accessible UI without the extra work.

Consistent design language. A unified token system keeps the look consistent 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 60 components organized by function:

CategoryComponents
LayoutFlex, Grid, Container, Separator
NavigationNavbar, Sidebar, Breadcrumb, Tabs, Link
Data DisplayDataView, Table, List, Avatar, Badge, Chip, Indicator
FormsButton, Input, TextArea, Select, Combobox, Checkbox, Radio, Switch, Slider, ColorPicker, Calendar
FeedbackDialog, Drawer, 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 Theme to enable light/dark modes, accent colors, and style variants.

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

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

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:

Next steps