### Install Kuzenbo Core Packages

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/getting-started/quickstart/content.mdx

Installs the necessary Kuzenbo core, theme, and styles packages along with React and next-themes. This command is for npm users; alternative package managers are supported.

```bash
npm i @kuzenbo/core @kuzenbo/theme @kuzenbo/styles react react-dom next-themes
```

--------------------------------

### Kuzenbo Quickstart Example with UI Components

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/README.md

A basic React (TypeScript) example demonstrating the integration of Kuzenbo UI components. It includes setting up the theme and using components like Announcement, Card, and Button. This snippet requires the Kuzenbo theme and core UI packages.

```tsx
import "@kuzenbo/theme/prebuilt/kuzenbo.css";
import "@kuzenbo/styles/recommended.css";

import {
  Announcement,
  AnnouncementTag,
  AnnouncementTitle,
} from "@kuzenbo/core/ui/announcement";
import { Button } from "@kuzenbo/core/ui/button";
import { Card } from "@kuzenbo/core/ui/card";
import { ThemeBootstrapScript } from "@kuzenbo/theme";
import { ThemeProvider } from "@kuzenbo/theme";

export default function App() {
  return (
    <>
      <ThemeBootstrapScript />
      <ThemeProvider>
        <main className="bg-background text-foreground min-h-screen p-6">
          <div className="mx-auto grid max-w-3xl gap-4">
            <Announcement themed>
              <AnnouncementTag>Release</AnnouncementTag>
              <AnnouncementTitle>Kuzenbo is ready to ship.</AnnouncementTitle>
            </Announcement>

            <Card className="p-6">
              <h1 className="text-xl font-semibold">Dashboard</h1>
              <p className="text-muted-foreground mt-2">
                Build with semantic tokens and composable primitives.
              </p>
              <div className="mt-4 flex gap-2">
                <Button>Create Report</Button>
                <Button variant="outline">View Logs</Button>
              </div>
            </Card>
          </div>
        </main>
      </ThemeProvider>
    </>
  );
}
```

--------------------------------

### Install Kuzenbo Core and Theme with Bun

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/README.md

Installs the core UI primitives and theme runtime for Kuzenbo using the Bun package manager. This is the recommended starting point for most Kuzenbo projects.

```bash
bun add @kuzenbo/core @kuzenbo/theme
```

--------------------------------

### Install Kuzenbo Packages with npm

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/getting-started/nextjs/content.mdx

Installs the necessary Kuzenbo core, theme, styles, and next-themes packages using npm. This is the first step to integrating Kuzenbo into your Next.js project.

```bash
npm i @kuzenbo/core @kuzenbo/theme @kuzenbo/styles next-themes
```

--------------------------------

### Basic Navigation Menu Example (TypeScript)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/navigation-menu/content.mdx

Demonstrates a basic implementation of the NavigationMenu component, showcasing a simple navigation structure with a trigger and content links. This example is suitable for primary navigation items like 'Getting Started'.

```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@kuzenbo/core/ui/navigation-menu";

export function DocsNav() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="/docs/installation">
              Installation
            </NavigationMenuLink>
            <NavigationMenuLink href="/docs/quick-start">
              Quick Start
            </NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuLink href="/docs/components">
            Components
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}
```

--------------------------------

### Quick Example: AI Widget and Session Hook (React)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/packages/ai/README.md

Demonstrates a quick example of using the AiWidget component and the useAiSession hook from the @kuzenbo/ai package in a React application. It shows how to display session status and provide controls to start or reset the session.

```tsx
"use client";

import { AiWidget } from "@kuzenbo/ai/ui/ai-widget";
import { useAiSession } from "@kuzenbo/ai/hooks/use-ai-session";

export function AiQuickExample() {
  const session = useAiSession();

  return (
    <AiWidget title={session.active ? "Assistant (active)" : "Assistant"}>
      Messages in this session: {session.messages}
      <div className="mt-3 flex gap-2">
        <button onClick={session.start} type="button">
          Start message
        </button>
        <button onClick={session.reset} type="button">
          Reset
        </button>
      </div>
    </AiWidget>
  );
}

```

--------------------------------

### Run Release Validation Commands (Bash)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/_internal_docs/release-one-time-setup.md

Executes a series of commands from the repository root to validate the release setup. Includes checks for status, formatting, linting, typechecking, testing, and boundary conditions.

```bash
bun run release:status
bun run format
bun run lint
bun run typecheck
bun run test
bun run boundaries
```

--------------------------------

### Basic React UI Example with @kuzenbo/core and @kuzenbo/theme

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/packages/core/README.md

Demonstrates the basic setup and usage of @kuzenbo/core UI components within a React application. It requires @kuzenbo/theme for styling and includes ThemeBootstrapScript and ThemeProvider for theme management.

```tsx
import "@kuzenbo/theme/prebuilt/kuzenbo.css";

import { Button } from "@kuzenbo/core/ui/button";
import { Card } from "@kuzenbo/core/ui/card";
import { ThemeBootstrapScript, ThemeProvider } from "@kuzenbo/theme";

export function CoreQuickExample() {
  return (
    <>
      <ThemeBootstrapScript />
      <ThemeProvider>
        <Card className="max-w-sm p-4">
          <p className="text-sm text-muted-foreground">
            Core primitives are ready.
          </p>
          <Button className="mt-3">Create project</Button>
        </Card>
      </ThemeProvider>
    </>
  );
}
```

--------------------------------

### Install @kuzenbo/code Package

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/code/content.mdx

Installs the necessary @kuzenbo/code, @kuzenbo/core, and @kuzenbo/theme packages using Bun. It's recommended to keep all three packages installed together for optimal functionality.

```bash
bun add @kuzenbo/code @kuzenbo/core @kuzenbo/theme
```

--------------------------------

### Install @kuzenbo/tiptap using Package Managers

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/packages/tiptap/README.md

Installs the @kuzenbo/tiptap package along with its core dependencies using various package managers. Ensure you have React 19+, @tiptap/react, @kuzenbo/core, and @kuzenbo/theme installed.

```bash
bun add @kuzenbo/tiptap @kuzenbo/core @kuzenbo/theme @tiptap/react
```

```bash
npm install @kuzenbo/tiptap @kuzenbo/core @kuzenbo/theme @tiptap/react
```

```bash
pnpm add @kuzenbo/tiptap @kuzenbo/core @kuzenbo/theme @tiptap/react
```

```bash
yarn add @kuzenbo/tiptap @kuzenbo/core @kuzenbo/theme @tiptap/react
```

--------------------------------

### Install Core Kuzenbo Packages (npm, pnpm, yarn, bun)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/getting-started/installation/content.mdx

Installs the core Kuzenbo packages along with React, ReactDOM, and next-themes. This is a prerequisite for using Kuzenbo components. Ensure you have Node.js 18+ and a compatible React version installed.

```bash
npm i @kuzenbo/core @kuzenbo/theme @kuzenbo/styles react react-dom next-themes
```

```bash
pnpm add @kuzenbo/core @kuzenbo/theme @kuzenbo/styles react react-dom next-themes
```

```bash
yarn add @kuzenbo/core @kuzenbo/theme @kuzenbo/styles react react-dom next-themes
```

```bash
bun add @kuzenbo/core @kuzenbo/theme @kuzenbo/styles react react-dom next-themes
```

--------------------------------

### Install useFullscreen Hook

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/hooks/use-fullscreen/content.mdx

Installs the @kuzenbo/hooks package, which contains the useFullscreen hook, using npm.

```bash
npm i @kuzenbo/hooks
```

--------------------------------

### Install @kuzenbo/ai Package

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/ai-widget/content.mdx

Installs the @kuzenbo/ai package using npm. This is the first step to using the AiWidget and related utilities.

```bash
npm i @kuzenbo/ai
```

--------------------------------

### Install MockDataTable Dependencies

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/mock-data-table/content.mdx

Installs the necessary packages for MockDataTable and TanStack Table. This command is essential before importing and using the components.

```bash
npm i @kuzenbo/datatable @tanstack/react-table
```

--------------------------------

### Verify Kuzenbo Installation with Components (React)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/getting-started/installation/content.mdx

Renders a Button and Card component from Kuzenbo to verify that the installation and styling are working correctly. If these components appear styled as expected, the setup is successful.

```tsx
import { Button } from "@kuzenbo/core/ui/button";
import { Card } from "@kuzenbo/core/ui/card";

export function InstallSmokeTest() {
  return (
    <Card>
      <Button>Install verified</Button>
    </Card>
  );
}
```

--------------------------------

### Create Starter Screen with Kuzenbo UI Components

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/getting-started/quickstart/content.mdx

A React component demonstrating the creation of a starter screen using Kuzenbo's Announcement, Button, and Card UI components. It includes an announcement banner and a project dashboard card with action buttons.

```tsx
import {
  Announcement,
  AnnouncementTag,
  AnnouncementTitle,
} from "@kuzenbo/core/ui/announcement";
import { Button } from "@kuzenbo/core/ui/button";
import { Card } from "@kuzenbo/core/ui/card";

export function QuickstartScreen() {
  return (
    <main className="bg-background text-foreground min-h-screen p-6">
      <div className="mx-auto grid max-w-3xl gap-4">
        <Announcement themed>
          <AnnouncementTag>Release</AnnouncementTag>
          <AnnouncementTitle>Kuzenbo is wired and ready.</AnnouncementTitle>
        </Announcement>

        <Card className="p-6">
          <h1 className="text-xl font-semibold">Project Dashboard</h1>
          <p className="text-muted-foreground mt-2">
            Start with semantic tokens and composition-safe primitives.
          </p>
          <div className="mt-4 flex gap-2">
            <Button>Create Report</Button>
            <Button variant="outline">View Logs</Button>
          </div>
        </Card>
      </div>
    </main>
  );
}
```

--------------------------------

### Custom Docs Playground Setup

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/_internal_docs/components.md

Illustrates the file structure and component composition required to implement an interactive component playground within the Kuzenbo documentation website. It uses a specific pattern for defining, previewing, and composing playground components.

```bash
apps/website/components/docs-playground/<component>/<component>-playground.definition.ts
apps/website/components/docs-playground/<component>/<component>-playground-preview.client.tsx
apps/website/components/docs-playground/<component>/<component>-playground.client.tsx
```

--------------------------------

### Basic Inline Command Menu Example

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/command/content.mdx

Demonstrates a basic inline command menu using the Command component. This is suitable for embedding directly within a panel, providing a searchable list of actions.

```tsx
import { Command } from "@kuzenbo/core/ui/command";

export function InlineCommandMenu() {
  return (
    <Command className="w-80 rounded-lg border">
      <Command.Input placeholder="Search actions..." />
      <Command.List>
        <Command.Empty>No action found.</Command.Empty>

        <Command.Group heading="Navigation">
          <Command.Item>Open dashboard</Command.Item>
          <Command.Item>Go to billing</Command.Item>
        </Command.Group>

        <Command.Separator />

        <Command.Group heading="Workspace">
          <Command.Item>
            Invite member
            <Command.Shortcut>Cmd+I</Command.Shortcut>
          </Command.Item>
        </Command.Group>
      </Command.List>
    </Command>
  );
}
```

--------------------------------

### Install Updated Kuzenbo Packages (Bash)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/patterns/migration/content.mdx

Installs the latest versions of core Kuzenbo packages, including theme, charts, notifications, and date utilities. This command is essential for starting the migration process.

```bash
bun add @kuzenbo/core @kuzenbo/theme @kuzenbo/charts @kuzenbo/notifications @kuzenbo/date
```

--------------------------------

### Install @kuzenbo/theme Package

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/packages/theme/README.md

Instructions for installing the @kuzenbo/theme package using various package managers like Bun, npm, pnpm, and Yarn.

```bash
bun add @kuzenbo/theme
```

```bash
npm install @kuzenbo/theme
```

```bash
pnpm add @kuzenbo/theme
```

```bash
yarn add @kuzenbo/theme
```

--------------------------------

### Toolbar Sizing Configuration Example

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/toolbar/content.mdx

Demonstrates how to configure sizing for the Toolbar and its child components. This example shows the precedence of size settings from the root Toolbar down to individual elements like ToolbarButton and ToolbarInput.

```tsx
<Toolbar size="xl" aria-label="Formatting actions">
  <Toolbar.Group size="sm">
    <Toolbar.Button size="xs">Bold</Toolbar.Button>
    <Toolbar.Link href="/docs/components/toolbar">Docs</Toolbar.Link>
    <Toolbar.Separator />
    <Toolbar.Input aria-label="Search commands" size="lg" />
  </Toolbar.Group>
</Toolbar>
```

--------------------------------

### Example: Measure DOM Element Width with useIsomorphicEffect

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/hooks/use-isomorphic-effect/content.mdx

A practical example of using useIsomorphicEffect in a React Client Component to measure the width of a DOM element. It utilizes useRef to get a reference to the div and useState to store the measured width. The effect runs once on mount to perform the measurement.

```tsx
"use client";

import { useRef, useState } from "react";

import { useIsomorphicEffect } from "@kuzenbo/hooks/use-isomorphic-effect";

export function IsomorphicMeasurementExample() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [width, setWidth] = useState(0);

  useIsomorphicEffect(() => {
    const nextWidth = containerRef.current?.getBoundingClientRect().width ?? 0;
    setWidth(nextWidth);
  }, []);

  return (
    <div className="space-y-2" ref={containerRef}>
      <p className="text-sm text-muted-foreground">Measured width: {width}px</p>
      <div className="h-10 rounded-md border border-border bg-muted" />
    </div>
  );
}

```

--------------------------------

### Tooltip Component Examples (React/TypeScript)

Source: https://context7.com/kuzenbodev/kuzenbo/llms.txt

Illustrates the usage of the Tooltip component for displaying information on hover. Includes examples for basic tooltips, tooltips with custom positioning and delays, and a provider-based approach for managing multiple tooltips. Requires importing components from '@kuzenbo/core/ui/tooltip' and '@kuzenbo/core/ui/button'.

```tsx
import {
  Tooltip,
  TooltipTrigger,
  TooltipPortal,
  TooltipPositioner,
  TooltipPopup,
  TooltipArrow,
  TooltipContent,
} from "@kuzenbo/core/ui/tooltip";
import { Button } from "@kuzenbo/core/ui/button";

function TooltipExample() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover me</Button>
      </TooltipTrigger>
      <TooltipPortal>
        <TooltipPositioner side="top" sideOffset={4}>
          <TooltipPopup>
            <TooltipArrow />
            <TooltipContent>
              This is helpful information about the button.
            </TooltipContent>
          </TooltipPopup>
        </TooltipPositioner>
      </TooltipPortal>
    </Tooltip>
  );
}

// Multiple tooltips with provider
function TooltipsWithProvider() {
  return (
    <TooltipProvider delayDuration={300}>
      <div className="flex gap-4">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button>Save</Button>
          </TooltipTrigger>
          <TooltipPortal>
            <TooltipPositioner>
              <TooltipPopup>
                <TooltipContent>Save your changes (Ctrl+S)</TooltipContent>
              </TooltipPopup>
            </TooltipPositioner>
          </TooltipPortal>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">Export</Button>
          </TooltipTrigger>
          <TooltipPortal>
            <TooltipPositioner>
              <TooltipPopup>
                <TooltipContent>Export as PDF</TooltipContent>
              </TooltipPopup>
            </TooltipPositioner>
          </TooltipPortal>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}
```

--------------------------------

### Start and Reset AI Session State with useAiSession

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/hooks/use-ai-session/content.mdx

This example demonstrates how to use the useAiSession hook to manage the active state and message count of an AI session. It includes buttons to start a new message and reset the entire session, updating the UI to reflect the current session status.

```tsx
"use client";

import { useAiSession } from "@kuzenbo/ai/hooks/use-ai-session";

export function AiSessionControls() {
  const session = useAiSession();

  return (
    <div className="space-y-2 rounded-lg border border-border bg-card p-4 text-sm text-card-foreground">
      <p>Active: {String(session.active)}</p>
      <p>Messages sent: {session.messages}</p>
      <div className="flex gap-2">
        <button
          className="rounded-md border border-border px-3 py-1"
          onClick={session.start}
          type="button"
        >
          Start message
        </button>
        <button
          className="rounded-md border border-border px-3 py-1"
          onClick={session.reset}
          type="button"
        >
          Reset session
        </button>
      </div>
    </div>
  );
}
```

--------------------------------

### Import Global Styles for Kuzenbo

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/getting-started/nextjs/content.mdx

Imports the prebuilt Kuzenbo theme CSS and recommended styles into your application's global stylesheet. This ensures that Kuzenbo's styling is applied throughout your Next.js application.

```css
@import "@kuzenbo/theme/prebuilt/kuzenbo.css";
@import "@kuzenbo/styles/recommended.css";
```

--------------------------------

### Basic NavigationList Example in React

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/navigation-list/content.mdx

Demonstrates a basic implementation of the NavigationList component in React. It includes a simple navigation structure with a main section and a collapsible guides section.

```tsx
import { NavigationList } from "@kuzenbo/core/ui/navigation-list";

export function DocsSidebarNavigation() {
  return (
    <NavigationList className="w-72">
      <NavigationList.Content>
        <NavigationList.Group>
          <NavigationList.GroupLabel>Main</NavigationList.GroupLabel>
          <NavigationList.GroupContent>
            <NavigationList.Item>
              <NavigationList.Link active label="Overview" />
            </NavigationList.Item>

            <NavigationList.Item collapsible defaultOpened>
              <NavigationList.Link label="Guides" />
              <NavigationList.Sub>
                <NavigationList.SubItem>
                  <NavigationList.SubLink href="#" active>
                    Installation
                  </NavigationList.SubLink>
                </NavigationList.SubItem>
                <NavigationList.SubItem>
                  <NavigationList.SubLink href="#">
                    Patterns
                  </NavigationList.SubLink>
                </NavigationList.SubItem>
              </NavigationList.Sub>
            </NavigationList.Item>
          </NavigationList.GroupContent>
        </NavigationList.Group>
      </NavigationList.Content>
    </NavigationList>
  );
}
```

--------------------------------

### Validate Stable Lane (Bash)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/_internal_docs/release-one-time-setup.md

Validates and performs a dry run for stable versions using the 'stable' channel. Requires specifying the version, channel, and reference branch.

```bash
bun run release:validate -- --version <x.y.z> --channel stable --ref main
bun run release:dry-run -- --version <x.y.z> --channel stable --ref main
```

--------------------------------

### Table Sizing Example

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/table/content.mdx

Demonstrates how to apply different size tokens to the Table component and its parts.

```APIDOC
## Table Sizing Example

### Description

Demonstrates how to apply different size tokens to the Table component and its parts.

### Code

```tsx
<Table size="xl" className="min-w-[42rem]">
  <Table.Header size="sm">
    <Table.Row>
      <Table.Head size="xs">Region</Table.Head>
      <Table.Head>Pipeline</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row size="sm">
      <Table.Cell size="sm">North America</Table.Cell>
      <Table.Cell>$1.8M</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>
```

### Sizing Details

- **Tokens**: `xs | sm | md | lg | xl`
- **Default**: `md`
- **Precedence**: `explicit child size ?? nearest table context ?? root Table size ?? "md"`
```

--------------------------------

### Validate Prerelease Lane (Bash)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/_internal_docs/release-one-time-setup.md

Validates and performs a dry run for prerelease versions using the 'next' channel. Requires specifying the version, channel, and reference branch.

```bash
bun run release:validate -- --version <x.y.z-prerelease> --channel next --ref main
bun run release:dry-run -- --version <x.y.z-prerelease> --channel next --ref main
```

--------------------------------

### Add a Kuzenbo Button Component in Next.js

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/getting-started/nextjs/content.mdx

Demonstrates how to import and use a Kuzenbo Button component within a Next.js page. This example shows basic usage with Tailwind CSS classes for styling.

```tsx
import { Button } from "@kuzenbo/core/ui/button";

export default function Page() {
  return (
    <main className="bg-background text-foreground min-h-screen p-6">
      <Button>Hello Next.js</Button>
    </main>
  );
}
```

--------------------------------

### Setup Root Layout with Kuzenbo Theme and Provider (React/Next.js)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/content.mdx

This snippet demonstrates how to set up the root layout for a Next.js application using the Kuzenbo UI library. It includes importing necessary CSS files for the theme and styles, and wrapping the application with the ThemeBootstrapScript and ThemeProvider for runtime theming and dark mode support.

```tsx
import type { ReactNode } from "react";

import "@kuzenbo/theme/prebuilt/kuzenbo.css";
import "@kuzenbo/styles/recommended.css";
import { ThemeBootstrapScript } from "@kuzenbo/theme";
import { ThemeProvider } from "@kuzenbo/theme";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeBootstrapScript />
      </head>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Render a Line Chart with @kuzenbo/charts

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/foundations/charts/content.mdx

Demonstrates how to use the LineChart component from @kuzenbo/charts to visualize data. It shows how to configure chart data, keys, series, value formatting, and legends. This example assumes @kuzenbo/charts and recharts are installed.

```tsx
import { LineChart } from "@kuzenbo/charts/ui/line-chart";

const data = [
  { month: "Jan", revenue: 172_000, target: 180_000 },
  { month: "Feb", revenue: 186_000, target: 190_000 },
  { month: "Mar", revenue: 201_000, target: 205_000 },
];

export const RevenueVsTarget = () => (
  <LineChart
    chartRootProps={{ className: "h-72 w-full" }}
    data={data}
    dataKey="month"
    series={[
      { name: "revenue", label: "Revenue" },
      { name: "target", label: "Target", yAxisId: "right-axis" },
    ]}
    valueFormatter={(value) => `$${value.toLocaleString()}`}
    withLegend
    withRightYAxis
    rightYAxisProps={{ yAxisId: "right-axis" }}
  />
);
```

--------------------------------

### Install Additional Kuzenbo Feature Packages (npm, pnpm, yarn, bun)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/getting-started/installation/content.mdx

Installs optional feature packages for Kuzenbo, such as charts, date pickers, notifications, AI, and datatables. Remember to keep `@kuzenbo/theme` installed when adding any new feature packages.

```bash
npm i @kuzenbo/theme @kuzenbo/charts @kuzenbo/date @kuzenbo/notifications @kuzenbo/ai @kuzenbo/datatable
```

```bash
pnpm add @kuzenbo/theme @kuzenbo/charts @kuzenbo/date @kuzenbo/notifications @kuzenbo/ai @kuzenbo/datatable
```

```bash
yarn add @kuzenbo/theme @kuzenbo/charts @kuzenbo/date @kuzenbo/notifications @kuzenbo/ai @kuzenbo/datatable
```

```bash
bun add @kuzenbo/theme @kuzenbo/charts @kuzenbo/date @kuzenbo/notifications @kuzenbo/ai @kuzenbo/datatable
```

--------------------------------

### Install @kuzenbo/code with Package Managers

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/packages/code/README.md

Demonstrates how to install the @kuzenbo/code package along with its core and theme dependencies using various package managers like Bun, npm, pnpm, and Yarn.

```bash
bun add @kuzenbo/code @kuzenbo/core @kuzenbo/theme
```

```bash
npm install @kuzenbo/code @kuzenbo/core @kuzenbo/theme
```

```bash
pnpm add @kuzenbo/code @kuzenbo/core @kuzenbo/theme
```

```bash
yarn add @kuzenbo/code @kuzenbo/core @kuzenbo/theme
```

--------------------------------

### Install Dependencies with Bun

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/CONTRIBUTING.md

Installs project dependencies using the Bun package manager. Ensure Node.js and Bun are installed and meet the version requirements.

```bash
bun install
```

--------------------------------

### Importing Kuzenbo Components (TypeScript)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/getting-started/introduction/content.mdx

Demonstrates how to import components from different Kuzenbo packages. This example shows importing a Button from core, a LineChart from charts, and a Toast from notifications.

```tsx
import { Button } from "@kuzenbo/core/ui/button";
import { LineChart } from "@kuzenbo/charts/ui/line-chart";
import { Toast } from "@kuzenbo/notifications/ui/toast";
```

--------------------------------

### Install Kuzenbo Core Package

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/affix/content.mdx

Installs the necessary Kuzenbo core package for using the Affix component and other UI elements. This is a prerequisite for importing and using the component.

```bash
npm i @kuzenbo/core
```

--------------------------------

### Install @kuzenbo/charts and dependencies

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/foundations/charts/content.mdx

Installs the necessary packages for using @kuzenbo/charts, including the theme and recharts. It's recommended to install @kuzenbo/theme alongside @kuzenbo/charts for proper styling.

```bash
bun add @kuzenbo/charts @kuzenbo/theme recharts
```

--------------------------------

### Install Next Kuzenbo Packages

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/reference/versioning/content.mdx

Installs the pre-release stream of Kuzenbo core and theme packages using Bun. Use this channel for early adoption and testing in staging environments.

```bash
bun add @kuzenbo/core@next @kuzenbo/theme@next
```

--------------------------------

### Install @kuzenbo/core

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/container/content.mdx

Install the core package for the Container component using npm.

```bash
npm i @kuzenbo/core
```

--------------------------------

### Website SEO Validation Workflow (Bash)

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/_internal_docs/website-seo.md

This snippet shows the commands to run for validating the website's SEO setup. It includes formatting, linting, type checking, testing, and building the website application.

```bash
bun run format
bun run lint
bun run typecheck
bun run test
bun run --cwd apps/website build
bun run --cwd apps/website typecheck
```

--------------------------------

### Install @kuzenbo/date Package using yarn

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/packages/date/README.md

Instructions for installing the @kuzenbo/date package and its core dependencies using yarn. This command installs the date package along with the required core and theme packages.

```bash
yarn add @kuzenbo/date @kuzenbo/core @kuzenbo/theme
```

--------------------------------

### Basic Kuzenbo Sidebar Usage Example

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/apps/website/app/(docs)/docs/components/sidebar/content.mdx

Provides a fundamental example of implementing the Kuzenbo Sidebar. It showcases the basic structure using SidebarProvider, Sidebar, SidebarMenu, and SidebarMenuItem with SidebarMenuButton.

```tsx
import {
  Sidebar,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@kuzenbo/core/ui/sidebar";

export function SidebarBasicExample() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton>Home</SidebarMenuButton>
          </SidebarMenuItem>
          <SidebarMenuItem>
            <SidebarMenuButton>Settings</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </Sidebar>

      <SidebarInset>
        <header className="flex h-12 items-center gap-2 border-b border-border px-4">
          <SidebarTrigger />
          <span className="text-sm font-medium text-foreground">Dashboard</span>
        </header>
        <main className="flex-1 p-4">Main content</main>
      </SidebarInset>
    </SidebarProvider>
  );
}
```

--------------------------------

### Install @kuzenbo/date Package using pnpm

Source: https://github.com/kuzenbodev/kuzenbo/blob/main/packages/date/README.md

Instructions for installing the @kuzenbo/date package and its core dependencies using pnpm. This command installs the date package along with the required core and theme packages.

```bash
pnpm add @kuzenbo/date @kuzenbo/core @kuzenbo/theme
```