@aeon-ui/ui

Styled compound components — @aeon-ui/react + Panda aeon* recipes.

Fastest path for apps that want the Aeon look and state-driven styling.

Install

pnpm add @aeon-ui/ui @aeon-ui/react

Import CSS once (see INTEGRATION.md):

import '@aeon-ui/panda/styles.css'
import '@aeon-ui/panda/theme-runtime.css'

Usage

import { Dialog, Button, Async, Field } from '@aeon-ui/ui'

<Async.Root>
  <Async.Track />
  <Async.Readout>Ready</Async.Readout>
  <Async.Actions>
    <Button.Root size="sm">Fetch</Button.Root>
  </Async.Actions>
</Async.Root>

Exports

Button, Switch, Checkbox, Dialog, Tabs, Accordion, Badge, Scroll, Select, Combobox, Menu, Popover, Tooltip, Toast, useToast, Async, Field, cn.

Implementation pattern

Each file in src/<component>.tsx:

1. Import headless from @aeon-ui/react
2. Import aeon* recipe from @aeon-ui/panda/styled-system/recipes
3. className={cn(recipe({ variant, size }), className)}
4. Forward status, variant, size to headless

Example: src/button.tsx.

Customize

• Tokens/themes: packages/panda/src/theme/themes.config.ts + codegen
• Recipes: edit panda recipes, codegen, rebuild ui
• Replace styles entirely: use @aeon-ui/react + your CSS on data-aeon-*

Agents

Do not add non-Panda styling inside this package.
Workflow: docs/COMPONENT_CHECKLIST.md.

Related

• COMPONENTS.md
• STATES.md