Apsara 🧚‍♀️

Apsara is an open-source React component library for building accessible, data-heavy interfaces. It is built on Base UI primitives and written in TypeScript.

Install

npm install @raystack/apsara
# or
pnpm add @raystack/apsara

Requires React 19.

Usage

// Import the styles once, at the root of your app.
import "@raystack/apsara/style.css";

import { Button, Flex } from "@raystack/apsara";

export default function App() {
  return (
    <Flex>
      <Button variant="solid">Hello from Apsara 🧚‍♀️</Button>
    </Flex>
  );
}

Icons and hooks ship as separate entry points:

import { ChevronDownIcon } from "@raystack/apsara/icons";
import { useCopyToClipboard } from "@raystack/apsara/hooks";

What's inside

Over 70 components, styled with plain CSS and data-* attributes so you can theme them with CSS variables. A few highlights:

• Layout — Box, Flex, Grid, Container, Sidebar, ScrollArea
• Navigation — Tabs, Breadcrumb, Command, Menu, Navbar, Toolbar
• Data — Table, DataTable, DataView, Avatar, Badge, Chip, Meter
• Forms — Input, Select, Combobox, Checkbox, Radio, Switch, Slider, Calendar, ColorPicker
• Feedback — Toast, Tooltip, Callout, Spinner, Indicator
• Overlay — Dialog, Popover, Drawer, ContextMenu

See the documentation site for the full list, live examples, and API references.

Contributing

Contributions are welcome. See CONTRIBUTING.md for the workflow and DEVELOPMENT.md for local setup.

pnpm install   # install dependencies
pnpm start     # run the library and docs site
pnpm test      # run tests

License

Apsara is Apache 2.0 licensed.