Overview
Build React apps with atomic, customisable components and shared design tokens.
Aksara UI provides atomic React components for forms, navigation, overlays and feedback. Compose and customise these building blocks to fit your product, with shared tokens for colours, typography and spacing.
Read Philosophy for the approach behind the components. The goal is flexibility, rather than a fixed interface you must adopt.
Get started
Follow Installation to add the package, load its theme and set up fonts. Then import the components you need.
import { Button } from '@aksornproject/aksara-ui'
export function SubmitButton() {
return <Button type="submit">Save changes</Button>
}See Usage for composing components, replacing rendered elements and applying your own classes.
Find what you need
Components
Choose a component, try the examples and look up its props.
Design tokens
Use shared colours, typography, spacing and radius in your layouts.
Theming
Set light, dark and high-contrast themes for your app.
Browser support
Check browser requirements before configuring your app build.
Using the examples
Each component page has interactive examples and a props reference. Copy a snippet for the component markup, or choose Expand code to see its imports, state and event handlers.
Use the theme toggle to preview examples in light and dark mode. For keyboard access and labelling requirements, read the accessibility section on each component page.