# Compose UI

> A React component library built on Base UI primitives with Tailwind CSS styling. Install via npm for type-safe, accessible components with modern theming.

Compose UI provides pre-styled, accessible React components built on Base UI. It uses Tailwind CSS for styling and class-variance-authority (CVA) for type-safe variants.

Key features:
- Built on @base-ui/react primitives (accessibility handled automatically)
- Styled with Tailwind CSS using design tokens
- Type-safe variants with CVA
- CSS variable-based theming (compatible with Tailwind v4)
- Tree-shakable ESM exports

## Getting Started

- [Quick Start](https://compose-ui.dev/overview/quick-start): Installation and basic usage

## Components

- [Tabs](https://compose-ui.dev/components/tabs.md): A component for toggling between related panels on the same page with an animated indicator.
- [Scroll Area](https://compose-ui.dev/components/scroll-area.md): A native scroll container with custom scrollbars for consistent styling across browsers.
- [Progress](https://compose-ui.dev/components/progress.md): The progressbar range widget indicates that a request has been received and the application is making progress toward completing the requested action.
- [Meter](https://compose-ui.dev/components/meter.md): A graphical display of a numeric value within a defined range.
- [Drawer](https://compose-ui.dev/components/drawer.md): A panel that slides in from the edge of the screen, commonly used for navigation, filters, or supplementary content.
- [Dialog](https://compose-ui.dev/components/dialog.md): A popup that opens on top of the entire page with a backdrop, commonly used for confirmations, forms, and important messages.
- [Button](https://compose-ui.dev/components/button.md): A versatile button component with multiple variants, sizes, and states including loading indicators.
- [Avatar](https://compose-ui.dev/components/avatar.md): An easily stylable avatar component for displaying user profile pictures, initials, or fallback content.
- [Alert Dialog](https://compose-ui.dev/components/alert-dialog.md): A dialog that requires a user response to proceed.
- [Accordion](https://compose-ui.dev/components/accordion.md): A set of collapsible panels with headings.

## Optional

- [Base UI Documentation](https://base-ui.com/react/components): Underlying component APIs
- [GitHub Repository](https://github.com/LGLabGreg/compose-ui): Source code