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";exportdefaultfunctionApp(){return(<Flex><Buttonvariant="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.