"use client"; import * as React from "react"; import { motion } from "motion/react"; import { Badge } from "./badge"; import { CodeBlock } from "./code-block"; import { SearchInput } from "./search-input"; import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, EditIcon, ThumbsDownIcon, ThumbsUpIcon } from "@kineticui/icons"; const nav = [ { group: "Getting started", items: ["Introduction", "Installation", "Theming", "CLI"] }, { group: "Guides", items: ["Server components", "Forms", "Animations", "Dark mode"] }, { group: "API", items: ["Button", "Dialog", "Toast", "Tabs"] }, ]; /** Documentation layout: grouped sidebar with active indicator, breadcrumbs, callout, code, feedback and prev/next. */ export function DocsLayout() { const [active, setActive] = React.useState("Installation"); const [q, setQ] = React.useState(""); const [vote, setVote] = React.useState<"up" | "down" | null>(null); const flat = nav.flatMap((g) => g.items); const i = flat.indexOf(active); return (

{active}

Add Kinetic UI to a Next.js, Vite or Remix project in under a minute.

Using the CLI

The CLI copies component source into your project, installs dependencies and wires up tokens.

Note

Prefer packages? Install @kineticui/ui and import components directly. Both stay in sync.

Add the tokens

Was this page helpful? {(["up", "down"] as const).map((v) => ( setVote(v)} className={`flex size-8 items-center justify-center rounded-lg border ${vote === v ? "border-accent bg-accent-soft text-accent" : "border-border"}`}> {v === "up" ? : } ))} {vote ? Thanks! : null}

Edit on GitHub

{i > 0 ? ( ) : } {i < flat.length - 1 ? ( ) : null}

); }

Docs Layout

Installation