# Overview

> Build React apps with atomic, customisable components and shared design tokens.

Source: /docs

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](/docs/philosophy) for the approach behind the components. The goal is flexibility, rather than a fixed interface you must adopt.

## Get started

Follow [Installation](/docs/installation) to add the package, load its theme and set up fonts. Then import the components you need.

```tsx
import { Button } from '@aksornproject/aksara-ui'

export function SubmitButton() {
  return <Button type="submit">Save changes</Button>
}
```

See [Usage](/docs/usage) for composing components, replacing rendered elements and applying your own classes.

## Find what you need

- [Components](/docs/components.md): Choose a component, try the examples and look up its props.
- [Design tokens](/docs/foundations/colors.md): Use shared colours, typography, spacing and radius in your layouts.
- [Theming](/docs/theming.md): Set light, dark and high-contrast themes for your app.
- [Browser support](/docs/browser-support.md): 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.