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
  • 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%;
}

Dropdown Menu

Command-driven dropdown built on top of <dialog>.

Usage

import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from 'kinu';

<DropdownMenu>
  <DropdownMenuTrigger><Button>Open</Button></DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Exports

Name Description Rendered HTML
DropdownMenu Dropdown menu —
DropdownMenuTrigger Menu trigger —
DropdownMenuContent Menu content —
DropdownMenuItem Menu item Alias of Item

Props

DropdownMenuProps

Prop Type Default Description
id string — Optional ID for the dropdown content. If not provided, one will be auto-generated.

DropdownMenuContentProps

Prop Type Default Description
id string — Override the auto-generated dialog ID.
command string 'close' Command dispatched when the dialog receives the command event.
commandFor string — Target dialog identifier for the command dispatch.
to "left" — Align the menu panel to the trigger's left or right edge.
mobile "drawer" — When set to "drawer", renders as a bottom-sheet drawer on mobile (≤640px)
while keeping menu behavior on larger screens.

Notes

  • Menu items render as <button> elements by default.
  • Automatically closes when an item dispatches the close command.
  • Set mobile="drawer" on DropdownMenuContent to adapt to a bottom-sheet on narrow viewports (≤640px).

_Source: src/components/dropdown-menu/index.tsx