Getting started

Extra

LLM context documentation — Kaida Component Library

Kaida is a component library built with Tailwind CSS v4. It provides a set of ready-to-use, customizable UI components for building modern web interfaces.

Components are designed to be:

Themeable — All colors, spacing, radii, and typography are controlled by CSS variables.
Accessible — Semantic HTML with ARIA attributes.
Responsive — Built-in breakpoints for mobile-first design.
Framework-agnostic — Pure HTML + CSS + JS (can be adapted to React, Vue, etc.).

How to use this document For AI assistants (Claude, Cursor, ChatGPT, etc.): - Option 1: Paste the entire content of this page directly into your chat with the AI. - Option 2: Share this link: https://kaida.dev/docs/llm-context and ask the AI to read it. - Option 3: Save this as KAIDA_CONTEXT.md in your project root and reference it in your instructions. This document contains everything an AI needs to generate accurate code using Kaida components.

Website: https://kaida.dev
Themer: https://kaida.dev/themer
Version: 1.0

Theme system

All components use CSS classes that map to theme variables. Never hardcode values — always use the classes defined in the theme.

Theme variables structure

@import "tailwindcss";

@theme {
  --breakpoint-sm: 576px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1600px;
  --breakpoint-2xl: 2000px;
  --container-sm: 576px;
  --container-md: 992px;
  --container-lg: 1200px;
  --container-xl: 1600px;
  --container-2xl: 2000px;

  --font-base: "Inter", system-ui, sans-serif;

  --spacing-2px: 2px;
  --spacing-4px: 4px;
  --spacing-8px: 8px;
  --spacing-12px: 12px;
  --spacing-16px: 16px;
  --spacing-20px: 20px;
  --spacing-24px: 24px;
  --spacing-32px: 32px;
  --spacing-48px: 48px;
  --spacing-64px: 64px;
  --spacing-96px: 96px;
  --spacing-128px: 128px;
  --spacing-192px: 192px;
  --spacing-256px: 256px;
  --spacing-576px: 576px;
  --spacing-992px: 992px;
  --spacing-1200px: 1200px;
  --spacing-1280px: 1280px;
  --spacing-1600px: 1600px;
  --spacing-2000px: 2000px;

  --radius-2px: 2px;
  --radius-4px: 4px;
  --radius-8px: 8px;
  --radius-12px: 12px;
  --radius-16px: 16px;
  --radius-20px: 20px;
  --radius-24px: 24px;
  --radius-32px: 32px;
  --radius-48px: 48px;
  --radius-64px: 64px;
  --radius-96px: 96px;
  --radius-128px: 128px;
  --radius-192px: 192px;
  --radius-256px: 256px;

  --color-white: #FFFFFF;
  --color-black: #0C0C0C;
  --color-gray-50: #F5F5F7;
  --color-gray-100: #EBEBED;
  --color-gray-200: #DDDDDF;
  --color-gray-300: #C6C6C8;
  --color-gray-400: #ACACAD;
  --color-gray-500: #8D8D8D;
  --color-gray-600: #707071;
  --color-gray-700: #5B5B5C;
  --color-gray-800: #3D3D3D;
  --color-gray-900: #282829;
  --color-blue-50: #EEF4FF;
  --color-blue-100: #D9E6FF;
  --color-blue-200: #BCD5FF;
  --color-blue-300: #8EBAFF;
  --color-blue-400: #5996FF;
  --color-blue-500: #2E6DFF;
  --color-blue-600: #1B4DF2;
  --color-blue-700: #1336D1;
  --color-blue-800: #132896;
  --color-blue-900: #101E5C;
  --color-green-50: #EDFAE5;
  --color-green-100: #D9F7C9;
  --color-green-200: #B7F29C;
  --color-green-300: #8CEB65;
  --color-green-400: #69E239;
  --color-green-500: #48C71A;
  --color-green-600: #34A010;
  --color-green-700: #2A7D11;
  --color-green-800: #235714;
  --color-green-900: #173610;
  --color-yellow-50: #FEFDC3;
  --color-yellow-100: #FEF88A;
  --color-yellow-200: #FCEC48;
  --color-yellow-300: #F9DA10;
  --color-yellow-400: #F3C300;
  --color-yellow-500: #E3A200;
  --color-yellow-600: #C47F00;
  --color-yellow-700: #A05F05;
  --color-yellow-800: #79430D;
  --color-yellow-900: #472707;
  --color-red-50: #FFF1F1;
  --color-red-100: #FFDFDF;
  --color-red-200: #FFC5C5;
  --color-red-300: #FF9D9D;
  --color-red-400: #FF6B6B;
  --color-red-500: #FC2E2E;
  --color-red-600: #DE1414;
  --color-red-700: #B80C0C;
  --color-red-800: #851313;
  --color-red-900: #520404;
  --color-accent-50: #F5F5F7;
  --color-accent-100: #EBEBED;
  --color-accent-200: #DDDDDF;
  --color-accent-300: #C6C6C8;
  --color-accent-400: #ACACAD;
  --color-accent-500: #8D8D8D;
  --color-accent-600: #707071;
  --color-accent-700: #5B5B5C;
  --color-accent-800: #3D3D3D;
  --color-accent-900: #282829;
  --color-secondary-50: #f3f3f6;
  --color-secondary-100: #f2f2f5;
  --color-secondary-200: #efeff2;
  --color-secondary-300: #ececef;
  --color-secondary-400: #e9e9ec;
  --color-secondary-500: #e6e6e9;
  --color-secondary-600: #ababae;
  --color-secondary-700: #737376;
  --color-secondary-800: #404042;
  --color-secondary-900: #131314;

  --text-h1: 4.5rem;
  --text-h1--line-height: 1.25;
  --text-h1--font-weight: 700;
  --text-h2: 4rem;
  --text-h2--line-height: 1.25;
  --text-h2--font-weight: 700;
  --text-h3: 3rem;
  --text-h3--line-height: 1.25;
  --text-h3--font-weight: 700;
  --text-h4: 2.5rem;
  --text-h4--line-height: 1.25;
  --text-h4--font-weight: 700;
  --text-h5: 2rem;
  --text-h5--line-height: 1.25;
  --text-h5--font-weight: 700;
  --text-h6: 1.75rem;
  --text-h6--line-height: 1.25;
  --text-h6--font-weight: 700;
  --text-h7: 1.5rem;
  --text-h7--line-height: 1.25;
  --text-h7--font-weight: 700;
  --text-h8: 1.25rem;
  --text-h8--line-height: 1.25;
  --text-h8--font-weight: 700;
  --text-h9: 1rem;
  --text-h9--line-height: 1.6;
  --text-h9--font-weight: 700;
  --text-h10: 0.875rem;
  --text-h10--line-height: 1.6;
  --text-h10--font-weight: 700;
  --text-h11: 0.75rem;
  --text-h11--line-height: 1.6;
  --text-h11--font-weight: 700;
  --text-p1: 1.25rem;
  --text-p1--font-weight: 400;
  --text-p2: 1rem;
  --text-p2--font-weight: 400;
  --text-p3: 0.875rem;
  --text-p3--font-weight: 400;
  --text-p4: 0.75rem;
  --text-p4--font-weight: 400;
  --text-p5: 0.625rem;
  --text-p5--font-weight: 400;
  --text-u1: 1.125rem;
  --text-u1--line-height: 1.85;
  --text-u1--font-weight: 400;
  --text-u2: 0.875rem;
  --text-u2--line-height: 1.85;
  --text-u2--font-weight: 400;
  --text-u3: 0.75rem;
  --text-u3--line-height: 1.85;
  --text-u3--font-weight: 400;
  --text-u4: 0.625rem;
  --text-u4--line-height: 1.85;
  --text-u4--font-weight: 400;
  --text-btn1: 1rem;
  --text-btn1--line-height: 1.6;
  --text-btn1--font-weight: 500;
  --text-btn2: 0.875rem;
  --text-btn2--line-height: 1.6;
  --text-btn2--font-weight: 500;
  --text-btn3: 0.75rem;
  --text-btn3--line-height: 1.6;
  --text-btn3--font-weight: 500;
}

@layer base {
  body {
    font-family: var(--font-base);
  }
}

CSS class mapping

Variable	CSS Class	Example
`--spacing-8px`	`p-8px`, `m-8px`, `gap-8px`	`class="p-16px"`
`--radius-8px`	`rounded-8px`	`class="rounded-12px"`
`--color-accent-500`	`bg-accent-500`, `text-accent-500`	`class="bg-accent-900"`
`--text-btn1`	`text-btn1`	`class="text-btn1"`
`--breakpoint-md`	`md:`	`class="md:flex"`

Theme usage rules

Use the CSS class, not the variable name — e.g., rounded-8px, not var(--radius-8px).
Dark theme via dark: modifier: dark:bg-gray-800, dark:text-white.
Responsive via breakpoints: sm:, md:, lg:, xl:, 2xl:.
Accent is the primary brand color. Secondary is the UI surface color.

Available components

22 components: Accordion, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Datepicker, Dropdown, Field, Input, Menu, Pagination, Popover, Popup, Radio, Slider, Table, Tab, Toast, Toggle, Tooltip.

Component documentation

1. Accordion

Collapsible content sections for organized information.

HTML structure:

<div data-accordion>
  <button data-accordion-trigger>
    <span>Section Title</span>
    <svg data-accordion-icon>...</svg>
  </button>
  <div>Content panel here...</div>
</div>

JavaScript initialization:

class Accordion { ... }
const init_accordions = (options = {}) => { ... };
init_accordions({ always_open: false });

Options:

always_open (boolean): Allow multiple panels open simultaneously.
active_classes: CSS classes for open state.
inactive_classes: CSS classes for closed state.

Key classes:

Container: border, rounded, divide (for multiple items).
Trigger: flex, justify-between, p-, hover:bg-.
Icon: transition-transform, rotate-180 (when open).
Content: hidden, p-*.

2. Avatar

User or entity profile representation.

Variants:

Default (image-based)
With text (initials or name)
Group (stacked)

HTML structure:

<!-- Single Avatar -->
<div class="w-48px h-48px rounded-full bg-accent-100 overflow-hidden">
  <img src="avatar.jpg" alt="User name" class="w-full h-full object-cover">
</div>

<!-- With Initials -->
<div class="w-48px h-48px rounded-full bg-accent-500 text-white flex items-center justify-center text-h7">
  JD
</div>

Key classes:

rounded-full for circular shape.
w-*, h-* for size.
object-cover for image fill.
Background and text color for initials.

3. Badge

Small count indicator or status marker.

Variants:

Default
Outlined
Dark

HTML structure:

<span class="inline-flex items-center px-8px py-4px text-p4 rounded-full bg-accent-100 text-accent-800">
  24
</span>

<!-- Outlined -->
<span class="inline-flex items-center px-8px py-4px text-p4 rounded-full border border-accent-300 text-accent-600">
  New
</span>

Key classes:

rounded-full for pill shape.
px-*, py-* for padding.
text-* for text size.
Background + text color classes.

4. Breadcrumb

Navigation showing hierarchical page position.

HTML structure:

<nav aria-label="Breadcrumb">
  <ol class="flex items-center gap-8px text-p3 text-gray-600">
    <li><a href="/" class="hover:text-accent-600">Home</a></li>
    <li class="text-gray-400">/</li>
    <li><a href="/products" class="hover:text-accent-600">Products</a></li>
    <li class="text-gray-400">/</li>
    <li class="text-gray-900 font-medium">Current Page</li>
  </ol>
</nav>

Key classes:

flex, items-center, gap-* for layout.
text-* for text styling.
Hover states for links.

5. Button

Clickable control that triggers actions.

Variants:

Primary (default) — filled with accent color
Secondary — filled with secondary color
Outline — bordered, transparent background
Ghost — no background or border
Danger — red color for destructive actions
Disabled — opacity + no interaction
Loading — with spinner animation
Only icon — no text
With icon — icon + text

HTML structure (Primary):

<button
  type="button"
  class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400 js_button-theme-element_radius"
>
  Click me
</button>

HTML structure (Secondary):

<button
  type="button"
  class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-accent-900 dark:text-white border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-secondary-500 border-secondary-500 hover:bg-secondary-400 hover:border-secondary-400 focus:bg-secondary-400 focus:border-secondary-400 active:bg-secondary-300 active:border-secondary-300 dark:bg-accent-900 dark:border-accent-900 dark:hover:bg-accent-800 dark:hover:border-accent-800 dark:focus:bg-accent-800 dark:focus:border-accent-800 dark:active:bg-accent-700 dark:active:border-accent-700 js_button-theme-element_radius"
>
  Secondary
</button>

HTML structure (Outline):

<button
  type="button"
  class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-accent-900 dark:text-white border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] border-accent-300 dark:border-accent-700 hover:bg-accent-50 dark:hover:bg-accent-900 hover:border-accent-400 dark:hover:border-accent-600 focus:bg-accent-50 dark:focus:bg-accent-900 focus:border-accent-400 dark:focus:border-accent-600 active:bg-accent-100 dark:active:bg-accent-800 active:border-accent-500 dark:active:border-accent-500 js_button-theme-element_radius"
>
  Outline
</button>

Loading State:

<button type="button" disabled class="... loader-spin opacity-60">
  <svg>...</svg>
  Loading...
</button>

CSS for Loading:

.loader-spin > svg {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Key classes:

Layout: flex, gap-8px, items-center, justify-center, whitespace-nowrap
Sizing: py-8px, px-16px
Icon: [&>svg]:w-20px [&>svg]:h-20px
Radius: rounded-8px (from theme)
Focus: focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A]
Dark focus: dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF]
Disabled: disabled:opacity-30

6. Card

Container for related content and actions.

Variants:

Default (vertical with image, title, content, footer)
Horizontal (image on side)

HTML structure:

<div class="max-w-sm bg-white rounded-12px border border-gray-200 overflow-hidden shadow-sm">
  <img src="image.jpg" alt="Card image" class="w-full h-48px object-cover">
  <div class="p-16px">
    <h3 class="text-h7 text-gray-900 mb-8px">Card Title</h3>
    <p class="text-p3 text-gray-600">Card description goes here...</p>
    <button class="mt-16px ...">Action</button>
  </div>
</div>

Key classes:

Container: rounded-*, bg-*, border, shadow-*, overflow-hidden
Content: p-*, text-*
Image: w-full, h-*, object-cover

7. Checkbox

Toggle control for binary or multiple selections.

HTML structure:

<label class="flex items-center gap-8px cursor-pointer">
  <input type="checkbox" class="w-20px h-20px rounded-4px border-gray-300 text-accent-500 focus:ring-2 focus:ring-accent-500 disabled:opacity-50" checked>
  <span class="text-p3 text-gray-700">Accept terms</span>
</label>

Key classes:

w-*, h-* for size
rounded-4px for checkbox square
text-accent-500 for checked color
focus:ring-* for focus state
disabled:opacity-50

8. Datepicker

Date selection with calendar popup.

HTML structure:

<div class="relative w-full">
  <input
    type="text"
    class="w-full rounded-8px border border-gray-300 p-12px text-p2 focus:border-accent-500 focus:ring-2 focus:ring-accent-500"
    placeholder="Select date"
    id="datepicker"
  >
  <!-- Calendar popup (hidden by default) -->
  <div class="absolute top-full left-0 mt-4px bg-white rounded-12px shadow-lg border border-gray-200 p-16px hidden">
    <!-- Calendar grid -->
  </div>
</div>

Key classes:

Input: rounded-*, p-*, border, focus:ring-*
Calendar: grid, gap-*, text + background classes for days

9. Dropdown

Expandable menu of selectable options.

HTML structure:

<!-- Trigger -->
<button data-dropdown-target="menu1" class="...">Toggle</button>

<!-- Menu -->
<div id="menu1" class="hidden" aria-hidden="true">
  <ul class="...">
    <li><a href="#" class="...">Option 1</a></li>
    <li><a href="#" class="...">Option 2</a></li>
  </ul>
</div>

JavaScript initialization:

class Dropdown { ... }

Options:

placement: "top", "bottom", "left", "right"
trigger_type: "click" (default) or "hover"
offset_skidding: X offset
offset_distance: Y offset
delay: hover delay in ms

Hover trigger:

<button data-dropdown-target="menu1" data-dropdown-trigger="hover">Hover me</button>

Key classes:

Menu: hidden, aria-hidden="true" when closed
Menu items: p-*, hover:bg-*, text-*

10. Field

Form field group with label and optional features.

Variants:

Default with label
Optional (with "(optional)" badge)
Password (with toggle)
With caption
With tooltip
With error

HTML structure:

<div class="space-y-8px">
  <label for="email" class="block text-p2 font-medium text-gray-700">
    Email
    <span class="text-p4 text-gray-400 font-normal">(optional)</span>
  </label>
  <input
    id="email"
    type="email"
    class="w-full rounded-8px border border-gray-300 p-12px text-p2 focus:border-accent-500 focus:ring-2 focus:ring-accent-500"
    placeholder="you@example.com"
  >
  <p class="text-p4 text-gray-500">We'll never share your email.</p>
</div>

Error state:

<input class="... border-red-500 focus:border-red-500 focus:ring-red-500">
<p class="text-p4 text-red-600">Email is required</p>

Key classes:

Input: rounded-*, p-*, border, focus:ring-*
Label: text-*, font-*, block
Caption: text-*, text-*

11. Input

Text input for user entry.

Variants:

Default text
Password

HTML structure:

<input
  type="text"
  class="w-full rounded-8px border border-gray-300 p-12px text-p2 focus:border-accent-500 focus:ring-2 focus:ring-accent-500 dark:bg-gray-800 dark:text-white dark:border-gray-600 disabled:opacity-50"
  placeholder="Enter text"
>

Key classes:

rounded-* for border radius
p-* for padding
border with color classes
focus:border-*, focus:ring-*
dark:* for dark mode
disabled:opacity-50

12. Menu

List of navigational or action options.

Variants:

Default
Dropdown (used inside Dropdown component)
Submenu

HTML structure:

<nav>
  <ul class="flex items-center gap-4px">
    <li><a href="#" class="block px-16px py-8px text-p2 text-gray-600 hover:bg-gray-100 rounded-8px">Home</a></li>
    <li><a href="#" class="block px-16px py-8px text-p2 text-gray-600 hover:bg-gray-100 rounded-8px">Products</a></li>
    <li><a href="#" class="block px-16px py-8px text-p2 text-gray-600 hover:bg-gray-100 rounded-8px">About</a></li>
  </ul>
</nav>

Key classes:

Layout: flex, gap-*, items-center
Items: block, px-*, py-*, text-*, hover:bg-*, rounded-*

13. Pagination

Controls for navigating multi-page content.

Variants:

Default (with numbers)
Short (only prev/next)

HTML structure:

<nav aria-label="Pagination">
  <ul class="flex items-center gap-4px">
    <li>
      <button class="px-12px py-8px rounded-8px border border-gray-200 hover:bg-gray-50 disabled:opacity-30">
        <svg>...</svg>
      </button>
    </li>
    <li><button class="px-12px py-8px rounded-8px bg-accent-500 text-white">1</button></li>
    <li><button class="px-12px py-8px rounded-8px hover:bg-gray-50">2</button></li>
    <li><button class="px-12px py-8px rounded-8px hover:bg-gray-50">3</button></li>
    <li>
      <button class="px-12px py-8px rounded-8px border border-gray-200 hover:bg-gray-50">
        <svg>...</svg>
      </button>
    </li>
  </ul>
</nav>

Key classes:

Layout: flex, items-center, gap-*
Buttons: px-*, py-*, rounded-*, bg-*, text-*
Active: bg-accent-500, text-white

14. Popover

Contextual information or actions on click/hover (lighter than Popup).

HTML structure:

<div class="relative inline-block">
  <button id="popover-trigger">Info</button>
  <div class="absolute top-full left-0 mt-4px bg-white rounded-12px shadow-lg border border-gray-200 p-16px w-64 hidden">
    <p class="text-p3 text-gray-700">Popover content here...</p>
  </div>
</div>

Key classes:

Container: relative, inline-block
Popover: absolute, top-full, mt-*, bg-*, rounded-*, shadow-*, border, p-*, hidden

15. Popup (Modal/Dialog)

Floating content triggered by user interaction (modal/dialog).

HTML structure:

<!-- Trigger -->
<button data-popup-target="popup1">Open</button>

<!-- Popup -->
<div id="popup1" class="hidden fixed inset-0 z-50 flex items-center justify-center">
  <div class="absolute inset-0 bg-gray-900/50 dark:bg-gray-900/80 z-40"></div>
  <div class="relative bg-white dark:bg-gray-800 rounded-16px p-32px max-w-md w-full z-50 shadow-2xl">
    <button data-popup-hide="popup1" class="absolute top-16px right-16px text-gray-400 hover:text-gray-600">
      ×
    </button>
    <h3 class="text-h7 text-gray-900 dark:text-white mb-12px">Modal Title</h3>
    <p class="text-p2 text-gray-600 dark:text-gray-300 mb-24px">Modal content...</p>
    <button data-popup-hide="popup1" class="...">Close</button>
  </div>
</div>

JavaScript initialization:

class Popup { ... }

Options:

placement: "center", "top-left", "top-center", etc.
backdrop: boolean
backdrop_classes: CSS classes for backdrop
animation: boolean
animation_duration: in ms

Key classes:

Popup container: hidden fixed inset-0 z-50 flex items-center justify-center
Backdrop: absolute inset-0 bg-gray-900/50 dark:bg-gray-900/80 z-40
Content: relative bg-white dark:bg-gray-800 rounded-16px p-32px max-w-md w-full z-50 shadow-2xl

16. Radio

Exclusive option selector from a set.

HTML structure:

<label class="flex items-center gap-8px cursor-pointer">
  <input type="radio" name="options" value="1" class="w-20px h-20px rounded-full border-gray-300 text-accent-500 focus:ring-2 focus:ring-accent-500 disabled:opacity-50">
  <span class="text-p3 text-gray-700">Option 1</span>
</label>
<label class="flex items-center gap-8px cursor-pointer">
  <input type="radio" name="options" value="2" class="w-20px h-20px rounded-full border-gray-300 text-accent-500 focus:ring-2 focus:ring-accent-500 disabled:opacity-50">
  <span class="text-p3 text-gray-700">Option 2</span>
</label>

Key classes:

rounded-full for radio circle
w-*, h-* for size
text-accent-500 for checked color
focus:ring-* for focus state
disabled:opacity-50

17. Slider

Visual control for selecting numerical values.

HTML structure:

<div class="relative w-full max-w-md">
  <input type="range" class="w-full" min="0" max="100" value="40">
  <!-- Buffer fill (optional) -->
  <div class="absolute h-2px bg-gray-200 rounded-full" style="width: 100%">
    <div class="h-full bg-blue-500 rounded-full" style="width: 30%" data-buffer="30"></div>
  </div>
</div>

JavaScript initialization:

class RangeSlider { ... }

Options:

polyfill: boolean
disabled_class: "opacity-40"
min, max, step, value
buffer: secondary value
vertical: boolean

Key classes:

Track: w-full, h-*, bg-*, rounded-full
Fill: h-full, bg-accent-500, rounded-full

18. Table

Rows and columns for structured data display.

HTML structure:

<div class="overflow-x-auto">
  <table class="w-full text-p2">
    <thead>
      <tr class="border-b border-gray-200 bg-gray-50">
        <th class="text-left p-12px font-semibold text-gray-600">Name</th>
        <th class="text-left p-12px font-semibold text-gray-600">Status</th>
        <th class="text-left p-12px font-semibold text-gray-600">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-gray-100 hover:bg-gray-50">
        <td class="p-12px text-gray-900">John Doe</td>
        <td class="p-12px"><span class="badge">Active</span></td>
        <td class="p-12px"><button class="...">Edit</button></td>
      </tr>
    </tbody>
  </table>
</div>

Key classes:

Table: w-full
Cells: p-*, text-*, text-left
Headers: font-semibold, text-*
Row: border-b, hover:bg-*

19. Tab

Sections of content in a single view.

Variants:

Default
Default group
Vertical
Vertical group
Segmented
Segmented horizontal group
Segmented vertical group

HTML structure:

<div>
  <div class="flex gap-4px border-b border-gray-200" role="tablist">
    <button class="px-16px py-8px text-p2 font-medium border-b-2 border-transparent hover:border-gray-300 text-gray-500 hover:text-gray-700" role="tab" aria-selected="false">Tab 1</button>
    <button class="px-16px py-8px text-p2 font-medium border-b-2 border-accent-500 text-accent-700" role="tab" aria-selected="true">Tab 2</button>
  </div>
  <div class="p-16px">Content for active tab</div>
</div>

Important: Icons must have fill/stroke set to currentColor.

Key classes:

Active: border-accent-500, text-accent-700
Inactive: border-transparent, text-gray-500
Layout: flex, gap-*

20. Toast

Temporary notification that auto-dismisses.

HTML structure:

<!-- Trigger -->
<button data-component="toast" data-toast-type="success" data-toast-value="Saved successfully!" data-toast-position="top-right" data-toast-dismissible="true">
  Show Toast
</button>

<!-- Container (auto-added by JS) -->
<div class="fixed z-[9999] p-16px flex flex-col gap-8px pointer-none">
  <!-- Toasts appear here -->
</div>

Variants:

Info: border-black-100 dark:border-black-700 bg-background
Success: border-green-500 bg-green-50 dark:bg-green-900
Warning: border-yellow-500 bg-yellow-50 dark:bg-yellow-900
Error: border-red-500 bg-red-50 dark:bg-red-900

JavaScript: Include the provided JS code in your project.

Data Attributes: - data-toast-type: "info", "success", "warning", "error" - data-toast-position: "top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center" - data-toast-dismissible: "true" or "false" - data-toast-value: the toast message

Key classes:

Container: fixed z-[9999] p-16px flex flex-col gap-8px pointer-none
Position: top-0 left-0, top-0 left-[50%] -translate-x-[50%], etc.
Toast: flex items-center gap-12px p-12px border rounded-12px shadow-md bg-white dark:bg-gray-800 animate-[fade-in_.3s_ease-out]
Removing: animate-[fade-out_.3s_ease-out]

21. Toggle

Binary state control with visual feedback.

HTML structure:

<label class="inline-flex items-center cursor-pointer">
  <input type="checkbox" class="hidden peer">
  <div class="relative w-44px h-24px bg-gray-300 rounded-full peer-checked:bg-accent-500 transition-colors">
    <div class="absolute top-2px left-2px w-20px h-20px bg-white rounded-full transition-transform peer-checked:translate-x-20px shadow-sm"></div>
  </div>
  <span class="ml-8px text-p2 text-gray-700">Toggle label</span>
</label>

Key classes:

Track: relative w-* h-* bg-* rounded-full peer-checked:bg-* transition-colors
Thumb: absolute top-2px left-2px w-* h-* bg-white rounded-full transition-transform peer-checked:translate-x-*

22. Tooltip

Contextual information on hover/focus.

Positions: Top, Bottom, Left, Right.

HTML structure:

<div class="relative inline-block">
  <button class="..." data-tooltip-target="tooltip1">Hover me</button>
  <div id="tooltip1" class="absolute bottom-full left-1/2 -translate-x-1/2 mb-8px px-12px py-6px bg-gray-900 text-white text-p4 rounded-8px whitespace-nowrap pointer-events-none hidden">
    Tooltip content
    <div class="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-gray-900"></div>
  </div>
</div>

Key classes:

Tooltip: absolute, px-*, py-*, bg-*, text-*, rounded-*, whitespace-nowrap, pointer-events-none, hidden
Arrow: absolute top-full left-1/2 -translate-x-1/2 border-* border-transparent border-t-*

Additional notes

Icon sizing

All components support inline SVG icons with [&>svg]:w-20px [&>svg]:h-20px (or appropriate size) to ensure consistent sizing.

Dark mode

Always include dark: variants for all color-related classes to support dark theme.

Accessibility

Use semantic HTML (<button>, <nav>, <table>, etc.).
Include ARIA attributes: aria-label, aria-labelledby, aria-expanded, aria-controls, role="tab", aria-selected, etc.
Ensure keyboard navigation (tab order, focus styles).

Theme customization

Users can customize the entire theme via Themer (https://kaida.dev/themer). When a theme changes, all components automatically update because they use CSS variables.

Framework adaptation

While the core library is pure HTML + CSS + JS, all components can be adapted to any framework (React, Vue, Svelte, etc.) by copying the HTML structure and applying the same CSS classes.

Quick reference: most used classes

Purpose	Classes
Container	`container`, `max-w-`, `w-full`, `p-`, `m-*`
Flexbox	`flex`, `inline-flex`, `items-center`, `justify-center`, `gap-*`
Grid	`grid`, `grid-cols-*` (if defined)
Typography	`text-h`, `text-p`, `text-btn`, `font-`
Colors	`bg-`, `text-`, `border-`, `hover:bg-`, `dark:*`
Radius	`rounded-*`
Sizing	`w-`, `h-`, `max-w-`, `min-h-`
Spacing	`p-`, `m-`, `gap-`, `space-`
Interactive	`hover:`, `focus:`, `active:`, `disabled:`
Dark mode	`dark:` (prefix)
Responsive	`sm:`, `md:`, `lg:`, `xl:`, `2xl:`

This documentation is designed to be consumed by AI assistants. For interactive examples and visual previews, visit https://kaida.dev/docs/components.

On this page

LLM context documentation — Kaida Component Library
Theme system
Available components
Component documentation
Additional notes
Quick reference: most used classes