Skip to main content

​
Welcome to Apsara

Apsara is an open-source React UI component library built on Radix UI primitives and vanilla CSS. It provides enterprise-grade, accessible components designed for building complex data interfaces with a focus on flexibility and developer experience.

Installation

Get started by installing Apsara in your React project

Quick start

Build your first app with Apsara components

Components

Explore 55+ accessible React components

​
Key features

Apsara is designed to help you build production-ready applications quickly without compromising on accessibility or customization.

55+ accessible components

Built on Radix UI primitives ensuring ARIA compliance and keyboard navigation out of the box

Flexible styling system

Uses vanilla CSS with HTML data-attributes for powerful theming and style customization

Enterprise-ready data tables

Advanced data tables with sorting, filtering, and virtualization for handling large datasets

Full TypeScript support

Written in TypeScript with comprehensive type definitions for better developer experience

Dark mode built-in

Comprehensive theme provider with dark mode support and customizable accent colors

Icons and hooks library

Includes comprehensive icon set and reusable hooks for common UI patterns

​
Simple and powerful

Apsara components are designed to be intuitive to use while giving you full control over styling and behavior. 
import { Button, Flex } from "@raystack/apsara";
import "@raystack/apsara/style.css";

function App() {
  return (
    <Flex gap="medium" align="center">
      <Button variant="solid" color="accent">
        Primary Action
      </Button>
      <Button variant="outline" color="neutral">
        Secondary Action
      </Button>
    </Flex>
  );
}

​
Component categories

Apsara provides a comprehensive set of components organized into logical categories:
Build your application structure with Box, Flex, Grid, and Container components that provide flexible layout options.
Present data effectively with Table, DataTable, Avatar, Badge, Chip, EmptyState, and more.
Build forms with Button, InputField, Select, Combobox, Checkbox, Radio, Switch, Slider, and Calendar components.
Provide user feedback with Tooltip, Callout, Toast, Indicator, Spinner, and Skeleton components.
Create layered interfaces with Dialog, Drawer, Popover, Menu, and SidePanel components.
All components follow accessibility best practices and are fully keyboard navigable.

​
Built on solid foundations

Apsara leverages industry-standard libraries to provide you with reliable, well-tested components:
  • Radix UI - Unstyled, accessible component primitives
  • Vanilla CSS - Simple, performant styling with no runtime overhead
  • TypeScript - Full type safety and IntelliSense support
  • React 18+ - Modern React features and patterns
Ready to get started? Head over to the installation guide to add Apsara to your project.