Design System

Verge Kit uses bejamas/ui, an Astro-native design system for components and themes. Installed components become local source in src/components/ui.

The components do not add a browser framework. Interactive components use @data-slot packages for behavior and accessibility.

Bejamas/ui components and Tailwind utilities read the same semantic CSS variables. The theme controls shared colors, fonts, radius, and other visual choices.

Components

See the bejamas/ui component catalog for previews, examples, and component APIs.

These components are included by default:

• Button
• Field
• Input
• Label
• Separator

Installation

Run the bejamas CLI from the project root:

npx bejamas add dialog

After installation, import the component from @/components/ui/<name>.

The CLI reads components.json to determine where component location, style, icon library, CSS path, and import aliases.

See the bejamas CLI documentation for all commands and options.

Class name utility

Bejamas/ui always installs src/lib/utils.ts. Its cn() function combines conditional classes and resolves conflicting Tailwind classes.

Themes and styling

Theme values live in src/styles/global.css. Bejamas components and Tailwind utilities use these shared CSS variables.

See these resources for theme creation and detailed instructions:

Most shadcn theme generators (such as Shadcn Themer, tweakcn, and clonecn) work with the Bejamas color variables only.

Create a theme

The fastest method is to create a preset with Bejamas Create. Commit changes, then apply only its theme values:

npx bejamas apply <preset> --only theme

A generator’s CSS values may also be copied directly into src/styles/global.css. Define light values in :root and dark values in .dark:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.15 0 0);
  --primary: oklch(0.55 0.2 260);
  --primary-foreground: oklch(0.98 0 0);
}

.dark {
  --background: oklch(0.15 0 0);
  --foreground: oklch(0.98 0 0);
  --primary: oklch(0.7 0.17 260);
  --primary-foreground: oklch(0.15 0 0);
}

Keep the existing variable names and @theme inline mappings. See the bejamas/ui theming guide for the complete variable reference.