# Installation

> Add the package to your app and load its theme.

Source: /docs/installation

## Requirements

- React 19
- Tailwind CSS 4. The theme is a Tailwind entry: it declares the tokens with `@theme` and scans the component sources with `@source`.
- A bundler that resolves package `exports` and `imports` from TypeScript source, such as Vite or Next.js.

### Configure the registry

The package and its icon dependency `@aksornproject/aksara-icons` live on GitHub Packages. Point the `@aksornproject` scope at that registry in your project.

```ini title=".npmrc"
@aksornproject:registry=https://npm.pkg.github.com
```

Put the token line in your user-level `.npmrc`, not the project file. pnpm 11 and later don't read environment variables in a project `.npmrc`, so a token line there fails with a 401.

```ini title="~/.npmrc"
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
```

Export a GitHub personal access token (classic) with the `read:packages` scope. npm, pnpm and bun all read both files. Without the token every install fails with a 401.

```bash
export GITHUB_TOKEN=your_read_packages_token
```

### Install the package

**npm**

```bash
npm install @aksornproject/aksara-ui
```

**pnpm**

```bash
pnpm add @aksornproject/aksara-ui
```

**bun**

```bash
bun add @aksornproject/aksara-ui
```

### Import the theme

Import Tailwind first, then the library theme.

```css title="app.css"
@import 'tailwindcss';
@import '@aksornproject/aksara-ui/theme.css';
```

The theme also loads the Aksara font in weights 400 to 700. Your bundler copies the font files into your build, so you don't add any `@font-face` rules. The `aksornfirst-sarabun`, `arena` and `arena-2` font profiles use other fonts. See [Fonts](/docs/theming#fonts).

### Use a component

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

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