Usage

ImportsCopy Anchor Link

Everything comes from the package root.

import { Button, Checkbox, Dialog, Select } from '@aksornproject/aksara-ui'

Compound componentsCopy Anchor Link

Components such as Dialog and Select have several parts. Put them inside their Root and choose the parts your screen needs. Root manages shared state, Trigger opens the popup, and the remaining parts define its content.

<Dialog.Root>
  <Dialog.Trigger render={<Button>Open</Button>} />
  <Dialog.Popup size="md">
    <Dialog.Header title="Title" />
    <Dialog.Body>Body</Dialog.Body>
  </Dialog.Popup>
</Dialog.Root>

Composition with renderCopy Anchor Link

Parts that accept render let you choose the rendered element while keeping their behaviour and styles. For example, render a Button as a link for navigation rather than attaching a click handler.

<Button nativeButton={false} render={<a href="/reports" />}>
  Reports
</Button>

Styling with classNameCopy Anchor Link

Pass className to adjust layout or override styling. Conflicting token utilities you pass take precedence over the component's defaults. Check the component page for which element receives the classes.

<Button className="w-full">Full width</Button>

Use token utilities, such as p-spacing-16 or bg-color-accent, rather than raw values. The design tokens pages list them.

State and eventsCopy Anchor Link

Use defaultValue or defaultChecked for a starting value the component manages itself. To manage the value in your app, pass value or checked together with the corresponding change handler. Each component page shows its supported props and event signatures.

AccessibilityCopy Anchor Link

Use visible labels for form controls. Give icon-only buttons an aria-label, and name dialogs with their title. Components handle keyboard interaction, but your app still needs meaningful labels, clear error messages and a logical focus order. Read each component's accessibility guidance before adding it to a screen.