GitHub - raystack/apsara: Apsara is an open-source re-usable UI components built using Base UI and CSS modules to power Raystack projects.

Apsara 🧚‍♀️ is an open-source React UI component library built on Base UI primitives. It provides enterprise-grade, accessible components designed for building complex data interfaces.

Key Features

• Accessible Components: Built on Base 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";

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
• Drawer - Slide-out panels with swipe-to-dismiss
• 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.