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
KINU
  • Components
  • Getting Started
  • 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%;
}
Get Started

Carousel

Scroll snapping carousel with previous/next helpers.

Slide 1
Slide 2
Slide 3
Slide 4

Usage

import {Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious} from 'kinu';

<Carousel>
  <CarouselContent>
    <CarouselItem>Slide</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Exports

Name Description Rendered HTML
Carousel Image slider —
CarouselContent Slider content —
CarouselItem Slide item <div k="carousel-item">
CarouselPrevious Previous button —
CarouselNext Next button —

Props

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

Notes

  • Leverages CSS scroll snap for buttery momentum.
  • Content remains fully declarative.

_Source: src/components/carousel/index.tsx