Colors

Background

Accent

Text

Semantic

Typography

Headings

Body Text

This is a standard paragraph with strong text and emphasized text. The line height is set to 1.75 for optimal readability. You can also use inline code.

Lists

Blockquote

This is a blockquote with a left border and subtle background.

Links

Default (Accent)

Links use accent color: regular link. No visited state by default.

Navigation Links

Class: .link-nav

Home · Blog · About

Muted Links

Class: .link-muted

View source · Edit on GitHub

Button

import Button from "@components/kit/Button.astro"

Variants

Sizes

States

With Icons

As Link

ToggleGroup

import ToggleGroup from "@components/kit/ToggleGroup.astro"
import { ToggleGroup } from "@components/kit/ToggleGroup" (React)

Pill Variant

For language switchers and compact toggles.

Separated Variant

For filter categories with bordered buttons.

With Icons

Pass icon to items. Icon size adjusts to toggle size (14px for sm, 16px for md).

Select

import Select from "@components/kit/Select.astro"
import { Select } from "@components/kit/Select" (React)

Sizes

With Placeholder

Input

import Input from "@components/kit/Input.astro"
import { Input } from "@components/kit/Input" (React)

Sizes

States

Form Group

Form Row

Textarea

Badge

import Badge from "@components/kit/Badge.astro"

Subtle Variants

Transparent background, colored text. For inline labels.

Solid Variants

Gradient background, white text. For status overlays.

Sizes

With Icon

With Dot

ProgressBar

import ProgressBar from "@components/kit/ProgressBar.astro"

Basic

Accent Variant

Use accent prop for gradient fill.

Without Percent

Custom Values

Pass value and max — percent is calculated automatically.

Modal

CSS: @import "@styles/kit/modal.css"

Demo

Structure

<div class="kit-modal-overlay is-open">
  <div class="kit-modal">
    <div class="kit-modal-header">
      <h2 class="kit-modal-title">Title</h2>
      <button class="kit-modal-close">&times;</button>
    </div>
    <div class="kit-modal-body">
      Content here...
    </div>
    <div class="kit-modal-footer">
      <Button variant="secondary">Cancel</Button>
      <Button variant="primary">Save</Button>
    </div>
  </div>
</div>

Sizes

Add class: .kit-modal--sm, .kit-modal--lg, or .kit-modal--full

Toast

CSS: @import "@styles/kit/toast.css"

Demo

Positions

Default is bottom-center. Add position class to container.

Structure

<div class="kit-toast-container">
  <div class="kit-toast kit-toast--success">
    <span class="kit-toast-icon">✓</span>
    <div class="kit-toast-content">
      <p class="kit-toast-title">Success</p>
      <p class="kit-toast-message">Item saved.</p>
    </div>
    <button class="kit-toast-dismiss">&times;</button>
  </div>
</div>

Type Variants

.kit-toast--success, .kit-toast--error, .kit-toast--warning, .kit-toast--info

Position Variants

.kit-toast-container--top-center, .kit-toast-container--top-right, .kit-toast-container--top-left, .kit-toast-container--bottom-right, .kit-toast-container--bottom-left

Tooltips

Usage

Add data-tooltip attribute to any element.