Docs · Guide

Get started

From npm install to a themed, accessible component in about a minute.

Install

Add the package to your Astro project. It ships typed.astro components, a token stylesheet, and a base stylesheet — nothing else.

npm install astro-ui
pnpm add astro-ui
yarn add astro-ui
bun add astro-ui

Import tokens once

In your root layout, import the design tokens and base reset. Every component reads these custom properties — this import is the whole theming setup.

---
// src/layouts/Layout.astro
---
<slot />

Dark mode follows data-theme="dark" on<html>; flip the attribute (persisted however you like) and every component follows.

Render your first component

Import from the root package or a subpath. Everything renders server-side — this page has no client runtime.

---
import { Button, Badge } from "astro-ui";
---
<Button variant="primary">Save changes</Button>
<Badge variant="success">Deployed</Badge>

Live result:

Deployed

Next steps