Overview

  • Typography
  • kinu Overview
  • Theming & Tokens
  • Base Styles
  • Command Attributes

Actions

  • Button
  • Item
  • Dialog
  • Alert Dialog
  • Drawer
  • Dropdown Menu
  • Context Menu
  • Sheet

Data Display

  • Badge
  • Chip
  • Accordion
  • Avatar
  • Card
  • Collapsible
  • Table
  • Empty
  • Kbd
  • Tree
  • Skeleton
  • Status
  • Timeline
  • Prose
  • Carousel
  • Hover Card

Data Input

  • Field
  • Input
  • Checkbox
  • Input Group
  • OTP Input
  • Radio Group
  • Select
  • Slider
  • Calendar
  • Switch
  • Color Picker
  • Combobox
  • Listbox
  • Date Picker
  • File Upload
  • Label
  • Time Picker
  • Textarea
  • Toggle
  • Toggle Group

Feedback

  • Alert
  • Tooltip
  • Spinner
  • Meter
  • Progress
  • Progress Ring
  • Toast

Navigation

  • List
  • Tabs
  • Breadcrumb
  • Navigation Menu
  • Menubar
  • Pagination

Layout

  • Aspect Ratio
  • Popover
  • Scroll Area
  • Resizable
  • Separator
  • Sidebar
kkinu
  • Home
  • Get Started
  • Docs
  • DemosLinear DemoChat DemoMusic DemoDashboard Demo
Theme
Density

Customize Theme

/* Light mode — root + explicit-light subtrees (e.g. per-component
   `data-color-scheme="light"`), scoped to the active theme. Both need
   the same tokens so toggling a subtree back to light keeps the
   customized palette. */
:root,
[data-color-scheme="light"] {
  --k-primary: 206.1 100% 50%;
  --k-primary-hover: 206.6 95.9% 48%;
  --k-primary-foreground: 0 0% 100%;
  --k-ring: 205.7 81.9% 65.3%;
  --k-accent: 205 92.3% 94.9%;
  --k-accent-foreground: 208 88.1% 42.9%;
  --k-foreground: 223.6 29.7% 14.5%;
  --k-card-foreground: 223.6 29.7% 14.5%;
  --k-popover-foreground: 223.6 29.7% 14.5%;
  --k-secondary-foreground: 223.6 29.7% 14.5%;
  --k-muted-foreground: 220 11.7% 40.4%;
  --k-border: 216.9 17.3% 85.3%;
  --k-input: 216.9 17.3% 85.3%;
  --k-muted: 216 17.2% 94.3%;
  --k-secondary: 216 17.2% 94.3%;
  --k-background: 240 20% 99%;
  --k-card: 240 20% 99%;
  --k-popover: 240 20% 99%;
  --k-radius: 0.5rem;
}

/* Dark mode (automatic) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --k-primary: 206.1 100% 50%;
    --k-primary-hover: 209.7 100% 61.6%;
    --k-primary-foreground: 0 0% 0%;
    --k-ring: 206.1 100% 50%;
    --k-accent: 212.1 69% 16.5%;
    --k-accent-foreground: 209.8 100% 72%;
    --k-foreground: 220 9.1% 93.5%;
    --k-card-foreground: 220 9.1% 93.5%;
    --k-popover-foreground: 220 9.1% 93.5%;
    --k-secondary-foreground: 220 9.1% 93.5%;
    --k-muted-foreground: 216 6.8% 71%;
    --k-border: 213.3 7.7% 22.9%;
    --k-input: 213.3 7.7% 22.9%;
    --k-muted: 225 5.7% 13.7%;
    --k-secondary: 225 5.7% 13.7%;
    --k-background: 240 5.6% 7.1%;
    --k-card: 240 5.6% 7.1%;
    --k-popover: 240 5.6% 7.1%;
  }
}

/* Dark mode (explicit, scopable to any subtree) */
[data-color-scheme="dark"] {
  color-scheme: dark;
  --k-primary: 206.1 100% 50%;
  --k-primary-hover: 209.7 100% 61.6%;
  --k-primary-foreground: 0 0% 0%;
  --k-ring: 206.1 100% 50%;
  --k-accent: 212.1 69% 16.5%;
  --k-accent-foreground: 209.8 100% 72%;
  --k-foreground: 220 9.1% 93.5%;
  --k-card-foreground: 220 9.1% 93.5%;
  --k-popover-foreground: 220 9.1% 93.5%;
  --k-secondary-foreground: 220 9.1% 93.5%;
  --k-muted-foreground: 216 6.8% 71%;
  --k-border: 213.3 7.7% 22.9%;
  --k-input: 213.3 7.7% 22.9%;
  --k-muted: 225 5.7% 13.7%;
  --k-secondary: 225 5.7% 13.7%;
  --k-background: 240 5.6% 7.1%;
  --k-card: 240 5.6% 7.1%;
  --k-popover: 240 5.6% 7.1%;
}

Sidebar

Responsive sidebar dialog that collapses on mobile.

P
Project UI
Component Library

Navigation

🏠 Dashboard📊 Analytics👥 Team⚙️ Settings

Resources

📖 Documentation🎨 Design System🔧 Tools
JD
John Doe
john@example.com
Components › Sidebar
A clean, organized sidebar component with improved styling and navigation.

Usage

import {Sidebar, SidebarTrigger} from 'kinu';

<Sidebar id="app-sidebar">
  <nav>...</nav>
</Sidebar>
<SidebarTrigger commandFor="app-sidebar">Toggle</SidebarTrigger>

Exports

Name Description Rendered HTML
SidebarTrigger Sidebar toggle <button k="sidebar-trigger">
Sidebar Side navigation <dialog k="sidebar">

Props

SidebarTriggerProps

Prop Type Default Description
commandFor string — Target sidebar ID to control.

SidebarProps

Prop Type Default Description
id string — Optional ID for the sidebar dialog.

Notes

  • Renders a <dialog> so it can slide in as a modal on small screens.
  • SidebarTrigger toggles the hidden/open state with the command attribute.
  • In its mobile modal mode on touch devices the sidebar is swipeable — swipe left to dismiss. The gesture is native CSS scroll-snapping, so momentum and snap-back come from the browser.
  • Lays out as a grid, so direct children stack as rows. In the swipe mode the last child fills the remaining height and scrolls, which suits a fixed header followed by scrolling navigation.

_Source: src/components/sidebar/index.tsx