astralkit

Design tokens, CSS variables, and utilities for AstralKit UI components.

This package provides the foundation that all AstralKit components depend on:

• Theme CSS — ak-* design tokens (colors, spacing, typography, radius, shadows)
• Utilities CSS — Tailwind CSS utility class extensions
• cn() helper — Class merging utility (clsx + tailwind-merge)

Installation

npm install astralkit

Or use the CLI which installs this automatically:

npx @astralkit/cli init

Usage

In your CSS — Tailwind v3 (default):

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "astralkit/theme";
@import "astralkit/utilities";

Also add require('astralkit/tailwind.cjs') to the plugins array in your tailwind.config.js. astralkit init does this for you.

In your CSS — Tailwind v4:

@import "tailwindcss";
@import "astralkit/theme-v4";
@import "astralkit/utilities";

In your components:

import { cn } from 'astralkit/utils'

export function Button({ className, ...props }) {
  return <button className={cn('px-4 py-2 bg-ak-primary text-ak-on-primary', className)} {...props} />
}

What's included

| Export | Description | |---|---| | astralkit/theme | Design tokens as CSS custom properties (Tailwind v3 — default) | | astralkit/theme-v4 | Design tokens via the Tailwind v4 @theme directive | | astralkit/utilities | Tailwind CSS utility extensions (works with v3 and v4) | | astralkit/tailwind.cjs | Tailwind v3 plugin — registers ak-* tokens with the v3 config | | astralkit/utils | cn() class merging function |

Documentation

• Getting Started
• Design Tokens
• CSS Variables Reference
• Theming & Customization

License

Proprietary — AstralKit License