Apsara v0.48.0 · Design system by Raystack

A design system for data-heavy interfaces.

Apsara is an open-source component library built on Base UI: accessible by default, styled with plain CSS tokens, and made for the tables, forms and consoles real products are built from.

pnpm add @raystack/apsara

Built on: Base UI primitives
Runtime: React 19 · TypeScript
Styling: Plain CSS, semantic tokens, no CSS-in-JS
Theming: Light and dark, 3 accents, 3 grays, 2 radii
License: Apache 2.0

console.example.com/customers

AK

JD

MP

+1

Active MRR

$15,520+4.2%

Customers

51 on trial

Seats in use

4482 near limit

Customer	Plan	Status	Usage	MRR
HLHalcyon Labs	Enterprise	active	x 82%	$12,400
MEMeridian	Team	trial	x 46%	$0
NFNorthwind Freight	Team	active	x 61%	$3,120
OSOstrava Studio	Starter	paused	x 12%	$99
PCPilgrim & Co	Enterprise	churned	x 0%	$0

Components80+

PrimitivesBase UI

Runtime CSS0kb

LicenseApache 2.0

Specimens · 01–15

Every part, live on the sheet.

Nothing on this page is an image. Each cell is the real component, rendered with its defaults and wired up, so what you see is what you ship. Hover a cell for its documentation.

01Button

02Badge · Chip

AccentSuccessWarningDangerNeutral

React 19Base UITypeScript

04Tabs

Three variants: segmented, standalone and plain. The indicator slides between tabs on its own.

05Slider

Opacity40%

Range20 – 70

06Progress · Meter

Uploading

x

Storage

x

07Select · Field

Email

Used for sign-in only.

08Calendar

September 2026

09Menu · Popover · Tooltip

10Toggle · Kbd

Command palette⌘KSave⌘S

11Avatar · Indicator

HL

ME

NF

OS

+2

RSRS

3

ON

12Callout

Tokens follow the theme. Swap the accent below and watch this one.

Every control passes keyboard and screen-reader checks.

This one can be dismissed.

13Toast

14Skeleton

15Text

Large, medium weight

Regular, the reading size for product surfaces.

Small, secondary. Tracking follows Inter's dynamic metric.

Mini, tertiary, uppercase

accentsuccessattentiondanger

15 of 80+ shown · DataTable, Command, Sidebar, Chat and more in the docs

Theme lab

Change your mind. The sheet re-inks itself.

Three accents, three grays, two radius styles and both modes, all from one provider. These controls are live: they retheme this page, hero drawing included.

Accentindigo

Graygray

Radiusmodern

Modelight

Set once on ThemeProvider. Components read the tokens; nothing is hard-coded, so the choice carries to every surface in your app.

HL

Halcyon Labs

Enterprise · 240 seats

Active

Workspace name

SSO enforcement

Require SAML for every member.

Seats in use

x

Usage

Four lines from an empty file.

Apsara ships as one package with three entry points: components, icons and hooks. There is no build step and no configuration file.

01Install. pnpm add @raystack/apsara. Requires React 19.
02Import the stylesheet once. One CSS file carries every token and every component style. No runtime, no CSS-in-JS.
03Wrap in ThemeProvider. Pick an accent, a gray and a radius style. Light and dark are handled for you.
04Compose. Every component is a set of parts you assemble, the way the drawing above was assembled.

app.tsx
1import '@raystack/apsara/style.css';
2import { Button, Field, Flex, Input, ThemeProvider } from '@raystack/apsara';
3
4export default function App() {
5  return (
6    <ThemeProvider accentColor="indigo" grayColor="slate" style="modern">
7      <Flex direction="column" gap={5}>
8        <Field label="Workspace name">
9          <Input placeholder="Halcyon Labs" />
10        </Field>
11        <Button>Save changes</Button>
12      </Flex>
13    </ThemeProvider>
14  );
15}