ajo

Ecosystem

Unstyled UI components

Accessible component families with markup you can style.

Start with a family

ajo-ui supplies semantic markup, ARIA relationships and keyboard behavior. Components expose stable data-slot and state attributes for your CSS.

Terminal
pnpm add ajo-ui@0.1.2

Compose a component

Tabs use a root, list, triggers and panels. Label the list and give each trigger and its panel the same value.

ProjectTabs.tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from 'ajo-ui/tabs'

export default () => (
  <Tabs defaultValue="overview">
    <TabsList aria-label="Project">
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="activity">Activity</TabsTrigger>
    </TabsList>
    <TabsContent value="overview">Project overview.</TabsContent>
    <TabsContent value="activity">Recent activity.</TabsContent>
  </Tabs>
)

Keep your visual language

Style component slots through classes, state attributes or family class maps. Controlled and uncontrolled props pair value/defaultValue/onValueChange, open/defaultOpen/onOpenChange or checked/defaultChecked/onCheckedChange.

The catalog includes dialogs, menus, inputs, calendars, tables and virtual lists. Family declarations document the available arguments.

Keep exploringFull reference on GitHub All guides