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

Customize Theme

/* Light mode */
:root {
  --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) */
.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%;
}

Breadcrumb

Composable breadcrumb trail built from list primitives.

  1. Home
  2. Docs
  3. Current

Usage

import {Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList} from 'kinu';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Exports

Name Description Rendered HTML
Breadcrumb Navigation trail <nav k="breadcrumb">
BreadcrumbList Trail container <ol k="breadcrumb-list">
BreadcrumbItem Trail item <li k="breadcrumb-item">
BreadcrumbLink Trail link <a k="breadcrumb-link">

Notes

  • Ships structural wrappers so you can supply router-aware links.
  • Uses semantic list markup for accessibility.

_Source: src/components/breadcrumb/index.tsx