Components Overview

Bao UI provides a set of accessible, customizable React components built on Base UI primitives.

Available Components

Component	Description	Status
Button	Multi-variant button with Tailwind styling	✅
Input	Form input with validation states and field integration	✅
Select	Dropdown select with keyboard navigation and grouping	✅
Checkbox	Checkbox with indeterminate state support	✅
Dialog	Modal dialog with Base UI primitives	✅
Tooltip	Content tooltip with XSS protection	✅

Key Features

Accessibility First

All components are built on Base UI primitives, ensuring:

Full keyboard navigation support
Screen reader compatibility
ARIA attributes and roles
Focus management

Themeable & Customizable

Token-based design system
Tailwind CSS integration
Variant-based styling
Custom CSS properties support

Type Safe

Full TypeScript support
Intellisense for all props
Type-safe variant props
Generic component typing

Performance Optimized

Tree-shakeable exports
Minimal bundle impact
React 18+ compatibility
Server-side rendering support

Usage Patterns

Basic Import

import { Button, Input, Select, Checkbox, Dialog, Tooltip } from '@bao-ui/react'

Variant-based Styling

<Button variant="outline" size="lg">
  Large Outline Button
</Button>

Composition

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Open Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Backdrop />
  <Dialog.Popup>
    <Dialog.Title>Dialog Title</Dialog.Title>
    <Dialog.Close />
  </Dialog.Popup>
</Dialog.Root>

Next Steps

Explore individual component documentation to learn about specific props, variants, and usage examples.

Getting Started Button