Getting started

Current version: 1.11.0 — see the changelog for what’s new.

Requirements

Astro 7 or newer
Tailwind CSS 4 or newer, set up with @tailwindcss/vite

Install

pnpm add bws-astro-ui

The library’s own dependencies — Lucide icons, tailwind-merge and Floating UI — come with it. Components are published as .astro files and compiled by your project, so there’s nothing to configure in Astro.

Set up the styles

Import the library’s styles right after Tailwind in your global stylesheet and define your brand colors:

@import 'tailwindcss';
@import 'bws-astro-ui/styles.css';

@theme {
  --color-primary: #2b4570;
  --color-secondary: #dc5f26;
}

styles.css lets Tailwind find the classes used inside the components and defines the theme roles and status colors.

Variable	Required	Used for
`--color-primary`	yes	the default color of buttons, fields, chips…
`--color-secondary`	yes	`color="secondary"`
`--color-on-primary`, `--color-on-secondary`	no — white	text on solid fills in those colors

Any CSS color format works. Components derive hover states and tints from these two colors, so shades (--color-primary-50 … 950) aren’t needed — define them only for your own markup.

Use the components

---
import '../styles/global.css';
import { Button, Card } from 'bws-astro-ui';
---

<Card title="Hello" subtitle="BWS Astro UI" text="Your first card.">
  <Button slot="actions">Get started</Button>
</Card>

Hello

BWS Astro UI

Your first card.

Entry points

Import	Contents
`bws-astro-ui`	all components
`bws-astro-ui/icons`	every Lucide icon for `<Icon>`
`bws-astro-ui/rules`	validation rules and `validateForm`
`bws-astro-ui/theme`	`setTheme`, `toggleTheme`, … (themes)
`bws-astro-ui/styles.css`	the styles from the setup above
`bws-astro-ui/components/*`	a single component file, e.g. `components/Button.astro`

Dark mode

Components follow the theme set with data-theme — add <ThemeScript /> to your <head> for a theme switch that remembers the visitor’s choice. See Themes.

Versioning

The library follows semantic versioning: new components and features raise the minor version (1.1.0), fixes the patch version (1.0.1) and breaking changes the major version (2.0.0). A range like ^1.0.0 in your package.json picks up new components and fixes, but never a breaking change.

Created by