Skip to content

Apsara is an open-source re-usable UI components built using Radix UI and CSS modules to power Raystack projects.

Notifications You must be signed in to change notification settings

raystack/apsara

Folders and files

NameName
Last commit message
Last commit date

Latest commit

cc5b5e9 · Mar 24, 2025
Feb 4, 2025
Jun 30, 2023
Mar 24, 2025
Mar 24, 2025
Jun 30, 2023
Jun 30, 2023
Nov 27, 2024
Jun 10, 2024
Mar 10, 2025
Mar 5, 2025
Mar 21, 2025
Jun 30, 2023
Jul 26, 2024
Jul 26, 2024

Repository files navigation

Apsara

License

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.

Key Features

  • Accessible Components: Built on Radix UI primitives ensuring ARIA compliance and keyboard navigation
  • Flexible Styling: Uses vanilla CSS with HTML data-attributes for powerful theming and style customization
  • Enterprise Ready: Designed for complex data-driven applications with components like:
    • Data Tables
    • Navigation Systems
    • Form Controls
    • Feedback Components
  • Type Safe: Written in TypeScript with comprehensive type definitions
  • Modern Stack: Support for React 18+ and modern development practices

Installation

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

Usage

// Add Style import in the root of the project.
import "@raystack/apsara/style.css";

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

function App() {
  return (
    <Flex>
      <Button type="primary">I am using 🧚‍♀️ Apsara!</Button>
    </Flex>
  );
}

Component Categories

Layout

  • Box - Basic layout container
  • Flex - Flexbox container
  • Container - Responsive wrapper
  • Sidebar - Collapsible navigation panel

Navigation

  • Breadcrumb - Navigation breadcrumbs
  • Tabs - Tabbed interface
  • Command - Command palette interface

Data Display

  • Table - Data table component
  • Avatar - User avatar display
  • Badge - Status indicators
  • EmptyState - Empty state messaging

Forms

  • Select - Dropdown selection
  • Radio - Radio button groups
  • IconButton - Icon-only buttons

Feedback

  • Tooltip - Contextual tooltips
  • Callout - Informational callouts
  • Indicator - Status indicators

Overlay

  • Popover - Contextual overlays
  • Sheet - Slide-out panels
  • Dialog - Modal dialogs

Documentation

Visit our documentation site for:

  • Interactive examples
  • API references
  • Theme customization
  • Accessibility guidelines
  • Migration guides

Contributing

We welcome contributions! Here's how you can help:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'feat: add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development Setup

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Build library
pnpm build

License

Apsara is Apache 2.0 licensed.