Astro UI library

bejamas/ui- Astro UI components you copy into your project. Zero-JS by default, built on Tailwind CSS v4, following the shadcn/ui approach.

Features

• Astro-native — Pure .astro components, no framework runtime
• Zero-JS by default — Most components ship no client JavaScript
• Tailwind CSS v4 — Modern utility-first styling
• 26+ components — Buttons, cards, dialogs, menus, and more
• shadcn registry compatible — Same schema, familiar patterns
• CLI included — Scaffold projects and add components in seconds

Primitives

Interactive components use @data-slot — headless behavior primitives we built as the "Radix for vanilla JS". Unlike other Astro shadcn ports that bundle interaction code into copied components, @data-slot keeps behavior as a dependency. When we fix an accessibility bug, you get the fix with a version bump instead of re-copying code.

Quick Start

npx bejamas@latest init

Then add components:

npx bejamas@latest add button

Usage

---
import Button from "@/ui/Button.astro";
---

<Button>Click me</Button>

Agent Skill

Use migrate-react-sites to port a React or Next.js site to Astro with bejamas/ui at pixel parity. It covers rebuilding a site as a new project and migrating inside an existing repository.

Install it into your project with the Skills CLI:

npx skills add bejamas/ui --skill migrate-react-sites

The installer lets you choose your coding agent. For a non-interactive installation, add --agent claude-code --yes or --agent codex --yes. Add --global to make the skill available across projects.

The skill's measurement scripts require Node.js 22+ or Bun and an installed Chrome, Chromium, Edge, or Brave browser. Set CHROME_PATH if the browser isn't in a standard location.

Documentation

Visit ui.bejamas.com to view the full documentation.

Contributing

Please read the contributing guide.

License

Licensed under the MIT license.