### Install Combobox Component

Source: https://www.9ui.dev/docs/components/combobox

Install the Combobox component using the shadcn-ui CLI.

```bash
npx shadcn@latest add @9ui/combobox
```

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

### Dropdown Menu Example

Source: https://www.9ui.dev/docs/components/dropdown-menu

A comprehensive example demonstrating the usage of the Dropdown Menu component with various interactive elements like playback controls, shuffle and repeat options, sorting, and sub-menus. Ensure 'lucide-react' is installed for icons.

```tsx
"use client"

import { useState } from "react"
import {
  PauseIcon,
  PlayIcon,
  SkipBackIcon,
  SkipForwardIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownMenuDemo() {
  const [shuffle, setShuffle] = useState(false)
  const [repeat, setRepeat] = useState(false)
  const [sortBy, setSortBy] = useState("artist")

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={(props) => <Button {...props}>Controls</Button>}
      />
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuLabel>Playback</DropdownMenuLabel>
          <DropdownMenuItem>
            <PlayIcon />
            Play
            <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <PauseIcon />
            Pause
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <SkipBackIcon />
            Previous
            <DropdownMenuShortcut>⌘[</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <SkipForwardIcon />
            Next
            <DropdownMenuShortcut>⌘]</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem
          checked={shuffle}
          onCheckedChange={setShuffle}
        >
          Shuffle
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={repeat} onCheckedChange={setRepeat}>
          Repeat
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem disabled>
          Enhanced Audio
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuLabel>Sort by</DropdownMenuLabel>
          <DropdownMenuRadioGroup value={sortBy} onValueChange={setSortBy}>
            <DropdownMenuRadioItem value="artist">Artist</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="album">Repeat</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="title">Title</DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Add to Playlist</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>Jazz</DropdownMenuItem>
            <DropdownMenuItem>Rock</DropdownMenuItem>
            <DropdownMenuItem>Pop</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

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

### Install Input OTP Dependencies

Source: https://www.9ui.dev/docs/components/input-otp

Install the necessary 'input-otp' package using npm.

```bash
npm install input-otp
```

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

### Install Badge Component

Source: https://www.9ui.dev/docs/components/badge

Use this command to install the Badge component in your project.

```bash
npx shadcn@latest add @9ui/badge
```

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

### Install Toast Component

Source: https://www.9ui.dev/docs/components/toast

Run this command in your terminal to install the Toast component package.

```bash
npx shadcn@latest add @9ui/toast
```

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

### Install 9ui Dependencies

Source: https://www.9ui.dev/docs/getting-started/installation

Install the core dependencies required for 9ui components using npm. Ensure you have Node.js and npm installed.

```bash
npm install tw-animate-css @base-ui/react tailwind-merge clsx lucide-react class-variance-authority
```

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

### Install Textarea Component

Source: https://www.9ui.dev/docs/components/textarea

Use this command to install the Textarea component in your project.

```bash
npx shadcn@latest add @9ui/textarea
```

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

### Install Calendar Component

Source: https://www.9ui.dev/docs/components/calendar

Install the Calendar component using the shadcn CLI. Ensure you have react-day-picker installed as a dependency.

```bash
npx shadcn@latest add @9ui/calendar
```

```bash
npm install react-day-picker
```

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

### Install Chart Component

Source: https://www.9ui.dev/docs/components/chart

Install the Chart component using the shadcn-ui CLI. Ensure you have the necessary dependencies installed.

```bash
npx shadcn@latest add @9ui/chart
```

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

### Install Select Component

Source: https://www.9ui.dev/docs/components/select

Install the Select component using the shadcn-ui CLI. This command adds the necessary package to your project.

```bash
npx shadcn@latest add @9ui/select
```

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

### Navigation Menu Component Example

Source: https://www.9ui.dev/docs/components/navigation-menu

A full example of the Navigation Menu component in React, demonstrating nested menus for 'Getting Started' and 'Components', along with a 'Source Code' link.

```tsx
"use client"

import * as React from "react"
import Link from "next/link"

import { Icons } from "@/components/icons"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu"

import { cn } from "@/lib/utils"

const components: { title: string; href: string; description: string }[] = [
  {
    title: "Alert Dialog",
    href: "/docs/components/alert-dialog",
    description:
      "A modal dialog for critical messages or confirmation actions.",
  },
  {
    title: "Preview Card",
    href: "/docs/components/preview-card",
    description: "Used to display a preview of content when hovered.",
  },
  {
    title: "Emoji Picker",
    href: "/docs/components/emoji-picker",
    description: "A component that allows users to pick an emoji.",
  },
  {
    title: "Progress",
    href: "/docs/components/progress",
    description: "Displays a progress bar with an optional label.",
  },
  {
    title: "Tabs",
    href: "/docs/components/tabs",
    description: "Used to organize content into tabbed navigation.",
  },
  {
    title: "Tooltip",
    href: "/docs/components/tooltip",
    description: "Used to provide context or hints for elements.",
  },
]

const gettingStartedItems = [
  {
    title: "Introduction",
    href: "/docs/getting-started/introduction",
    description: "Learn about 9ui.",
  },
  {
    title: "Installation",
    href: "/docs/getting-started/installation",
    description: "How to install 9ui in your project.",
  },
  {
    title: "Roadmap",
    href: "/docs/getting-started/roadmap",
    description: "See what we are working on next.",
  },
]

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu className="w-full">
      <NavigationMenuList className="flex-col items-start md:flex-row md:items-center">
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2">
              {gettingStartedItems.map((item) => (
                <ListItem key={item.title} title={item.title} href={item.href}>
                  {item.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2">
              {components.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="https://github.com/borabaloglu/9ui"
            render={({ ...props }) => (
              <a {...props} className={cn(navigationMenuTriggerStyle())}>
                <Icons.gitHub />
                Source Code
              </a>
            )}
          />
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

function ListItem({
  title,
  children,
  href,
  ...props
}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink
        render={(props) => (
          <Link href={href} {...props}>
            <div className="text-sm font-semibold">{title}</div>
            <p className="text-muted-foreground line-clamp-2 text-sm">
              {children}
            </p>
          </Link>
        )}
      />
    </li>
  )
}

```

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

### Install Input Component

Source: https://www.9ui.dev/docs/components/input

Install the Input component using the shadcn-ui CLI. This command adds the necessary package to your project.

```bash
npx shadcn@latest add @9ui/input
```

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

### Install Kbd Component

Source: https://www.9ui.dev/docs/components/kbd

Install the Kbd component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @9ui/kbd
```

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

### Install Tooltip Component

Source: https://www.9ui.dev/docs/components/tooltip

Install the tooltip component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @9ui/tooltip
```

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

### Install Resizable Components

Source: https://www.9ui.dev/docs/components/resizable

Use this command to add the resizable components to your project.

```bash
npx shadcn@latest add @9ui/resizable
```

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

### Install Drawer Component

Source: https://www.9ui.dev/docs/components/drawer

Command to install the Drawer component using the shadcn CLI. Ensure you have npx available.

```bash
npx shadcn@latest add @9ui/drawer
```

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

### Install Skeleton Component

Source: https://www.9ui.dev/docs/components/skeleton

Use this command to add the Skeleton component to your project. Ensure you have shadcn-ui installed.

```bash
npx shadcn@latest add @9ui/skeleton
```

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

### Install Table Component

Source: https://www.9ui.dev/docs/components/table

Use this command to install the Table component in your project. This command should be run in your terminal.

```bash
npx shadcn@latest add @9ui/table
```

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

### Install Button Component

Source: https://www.9ui.dev/docs/components/button

Use this command to add the Button component to your project. Ensure you have shadcn-ui installed.

```bash
npx shadcn@latest add @9ui/button
```

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

### Basic Select Example

Source: https://www.9ui.dev/docs/components/select

A fundamental example demonstrating how to use the Select component with a list of items. It includes the necessary imports and component structure.

```typescript
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const items = [
  {
    label: "Select a fruit",
    value: null,
  },
  {
    label: "Apple",
    value: "apple",
  },
  {
    label: "Banana",
    value: "banana",
  },
  {
    label: "Cherry",
    value: "cherry",
  },
]

export default function SelectDemo() {
  return (
    <div className="w-80">
      <Select items={items}>
        <SelectTrigger className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {items.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}

```

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

### Install Dialog Component

Source: https://www.9ui.dev/docs/components/dialog

Use this command to add the Dialog component to your project. Ensure you have npx installed.

```bash
npx shadcn@latest add @9ui/dialog
```

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

### Install Phone Input Component

Source: https://www.9ui.dev/docs/components/phone-input

Install the Phone Input component using npm. This command adds the necessary package to your project.

```bash
npx shadcn@latest add @9ui/phone-input
```

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

### Install Alert Component

Source: https://www.9ui.dev/docs/components/alert

Install the Alert component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @9ui/alert
```

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

### Install Pagination Component

Source: https://www.9ui.dev/docs/components/pagination

Install the Pagination component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @9ui/pagination
```

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

### Full Tabs Component Example

Source: https://www.9ui.dev/docs/components/tabs

A comprehensive example demonstrating the implementation of the Tabs component with login and signup forms.

```tsx
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TabsDemo() {
  return (
    <Tabs className="w-full max-w-96" defaultValue="login">
      <TabsList>
        <TabsTrigger value="login">Login</TabsTrigger>
        <TabsTrigger value="signup">Sign up</TabsTrigger>
      </TabsList>
      <TabsContent value="login">
        <Card>
          <CardHeader>
            <CardTitle>Login</CardTitle>
            <CardDescription>Login to your account to continue</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" placeholder="Email" type="email" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" placeholder="Password" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button className="w-full">Login</Button>
          </CardFooter>
        </Card>
      </TabsContent>
      <TabsContent value="signup">
        <Card>
          <CardHeader>
            <CardTitle>Sign up</CardTitle>
            <CardDescription>Sign up to create an account</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" placeholder="Email" type="email" />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="password">Password</Label>
              <Input id="password" placeholder="Password" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button className="w-full">Sign up</Button>
          </CardFooter>
        </Card>
      </TabsContent>
    </Tabs>
  )
}

```

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

### Install Slider Component

Source: https://www.9ui.dev/docs/components/slider

Use this command to install the Slider component via npm.

```bash
npx shadcn@latest add @9ui/slider
```

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

### Install Toolbar Component

Source: https://www.9ui.dev/docs/components/toolbar

Install the Toolbar component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @9ui/toolbar
```

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

### Install Checkbox Component

Source: https://www.9ui.dev/docs/components/checkbox

Use this command to install the checkbox component in your project via the terminal.

```bash
npx shadcn@latest add @9ui/checkbox
```

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

### Install Autocomplete Component

Source: https://www.9ui.dev/docs/components/autocomplete

Use this command to add the Autocomplete component to your project.

```bash
npx shadcn@latest add @9ui/autocomplete
```

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

### Install Toggle Component

Source: https://www.9ui.dev/docs/components/toggle

Use this command to add the Toggle component to your project.

```bash
npx shadcn@latest add @9ui/toggle
```

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

### Install Progress Component

Source: https://www.9ui.dev/docs/components/progress

Install the Progress component using the shadcn CLI. This command adds the necessary package to your project.

```bash
npx shadcn@latest add @9ui/progress
```

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

### Install Collapsible Component

Source: https://www.9ui.dev/docs/components/collapsible

Use this command to add the Collapsible component to your project. Ensure you have npx installed.

```bash
npx shadcn@latest add @9ui/collapsible
```

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

### Install Aspect Ratio Component

Source: https://www.9ui.dev/docs/components/aspect-ratio

Install the Aspect Ratio component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @9ui/aspect-ratio
```

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

### Install Command Component

Source: https://www.9ui.dev/docs/components/command

Use this command to add the Command component to your project.

```bash
npx shadcn@latest add @9ui/command
```

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

### Install Meter Component

Source: https://www.9ui.dev/docs/components/meter

Install the Meter component using the shadcn-ui CLI. This command adds the necessary package to your project.

```bash
npx shadcn@latest add @9ui/meter
```

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

### Install Card Component

Source: https://www.9ui.dev/docs/components/card

Install the Card component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @9ui/card
```

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

### Install Menubar Component

Source: https://www.9ui.dev/docs/components/menubar

Use this command to add the Menubar component to your project. This command installs the necessary package via npm.

```bash
npx shadcn@latest add @9ui/menubar
```

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

### Install Switch Component

Source: https://www.9ui.dev/docs/components/switch

Use this command to add the Switch component to your project via the shadcn-ui CLI. Ensure you have the CLI installed and configured.

```bash
npx shadcn@latest add @9ui/switch
```

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

### Install Tabs Component

Source: https://www.9ui.dev/docs/components/tabs

Install the Tabs component using the shadcn-ui CLI. This command adds the necessary dependencies to your project.

```bash
npx shadcn@latest add @9ui/tabs
```

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

### Preview Card Component Example

Source: https://www.9ui.dev/docs/components/preview-card

This is a full example of the Preview Card component in action. It requires client-side rendering and imports necessary components from 9ui.

```tsx
"use client"

import { Icons } from "@/components/icons"
import {
  PreviewCard,
  PreviewCardContent,
  PreviewCardTrigger,
} from "@/components/ui/preview-card"

export default function PreviewCardDemo() {
  return (
    <PreviewCard>
      <p>
        This is a preview card component from{"} 
        <PreviewCardTrigger className="cursor-pointer underline underline-offset-2">
          9ui
        </PreviewCardTrigger>
        .
      </p>
      <PreviewCardContent>
        <Icons.logo className="mx-auto w-10" />
        <p className="mt-4 text-sm">
          Beautiful, customizable components built with{"} 
          <a
            href="https://base-ui.com"
            className="underline underline-offset-2"
            target="_blank"
          >
            Base UI
          </a>{" 
```

```tsx
and{"} 
          <a
            href="https://tailwindcss.com"
            className="underline underline-offset-2"
            target="_blank"
          >
            Tailwind CSS
          </a>
          .
        </p>
        <div className="mt-4 flex flex-col gap-1 text-sm">
          <div className="flex items-center gap-2">
            <span className="text-muted-foreground">Creator:</span>
            <a
              href="https://x.com/borabalogluu"
              className="underline underline-offset-2"
              target="_blank"
            >
              Bora Baloglu
            </a>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-muted-foreground">Source code:</span>
            <a
              href="https://github.com/borabaloglu/9ui"
              className="underline underline-offset-2"
              target="_blank"
            >
              Github
            </a>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-muted-foreground">Website</span>
            <a
              href="https://www.9ui.dev"
              className="underline underline-offset-2"
              target="_blank"
            >
              9ui.dev
            </a>
          </div>
        </div>
      </PreviewCardContent>
    </PreviewCard>
  )
}
```

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

### Install Dropdown Menu Component

Source: https://www.9ui.dev/docs/components/dropdown-menu

Use this command to add the Dropdown Menu component to your project. Ensure you have the latest version of shadcn-ui installed.

```bash
npx shadcn@latest add @9ui/dropdown-menu
```

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

### Install Accordion Component

Source: https://www.9ui.dev/docs/components/accordion

Install the Accordion component using the shadcn-ui CLI. This command adds the necessary package to your project.

```bash
npx shadcn@latest add @9ui/accordion
```

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

### Install Carousel Component

Source: https://www.9ui.dev/docs/components/carousel

Install the Carousel component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @9ui/carousel
```

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

### Card Example: With Image

Source: https://www.9ui.dev/docs/components/card

Demonstrates a Card component integrated with an image. This example showcases how to display visual content within the card structure.

```tsx
import Image from "next/image"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function CardWithImageDemo() {
  return (
    <Card className="w-full max-w-80">
      <CardHeader>
        <div className="relative aspect-video rounded-lg">
          <Image
            src="https://images.pexels.com/photos/1616403/pexels-photo-1616403.jpeg?auto=compress&cs=tinysrgb&w=450&h=800&dpr=2"
            alt="Blog Image"
            fill
            className="rounded-lg"
          />
        </div>
        <CardTitle className="mt-2">What is 9ui?</CardTitle>
        <CardDescription>
          Deep dive into the 9ui components and learn how to use them in your
          own projects.
        </CardDescription>
      </CardHeader>
      <CardFooter>
        <Button className="w-full">Read more</Button>
      </CardFooter>
    </Card>
  )
}
```

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

### Initialize Project with Shadcn

Source: https://www.9ui.dev/docs/getting-started/installation

Use this command to quickly set up a new project with 9ui integration. Ensure you have npx installed.

```bash
npx shadcn@latest init https://9ui.dev/r/init.json
```

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

### Install Popover Component

Source: https://www.9ui.dev/docs/components/popover

Use this command to add the Popover component to your project.

```bash
npx shadcn@latest add @9ui/popover
```

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

### Install Preview Card Component

Source: https://www.9ui.dev/docs/components/preview-card

Use this command to add the Preview Card component to your project using shadcn-ui.

```bash
npx shadcn@latest add @9ui/preview-card
```

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

### Dialog Demo Component

Source: https://www.9ui.dev/docs/components/dialog

A complete example of a Dialog component in React, including imports and structure. Use this as a starting point for implementing dialogs in your application.

```tsx
import {
  Button
} from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export default function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger
        render={(props) => <Button {...props}>Privacy Policy</Button>}
      />
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Privacy Policy</DialogTitle>
          <DialogDescription>
            Please read our privacy policy carefully.
          </DialogDescription>
        </DialogHeader>
        <div className="text-foreground max-h-80 overflow-y-auto text-sm outline-none">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          ultricies, odio quis blandit vestibulum, orci elit suscipit urna, at
          lobortis arcu enim vel purus. Maecenas luctus sem dui, lobortis
          dignissim enim consequat in. Nullam a volutpat purus. Aenean
          pellentesque eros nec rutrum suscipit. Fusce ac lectus volutpat, 
          feugiat nulla et, suscipit dui. Pellentesque habitant morbi tristique
          senectus et netus et malesuada fames ac turpis egestas. Ut maximus,
          risus et convallis placerat, risus urna feugiat neque, in vestibulum
          leo arcu vitae justo. Duis magna mi, maximus at neque sed, tempor
          congue ligula. In iaculis metus nec euismod egestas. Donec id
          porttitor nulla. Donec feugiat iaculis lacus, ut elementum dui
          faucibus sed. Sed ut ipsum non tellus dignissim accumsan. Vivamus
          luctus malesuada lacus sed dictum.
          <br />
          <br />
          Sed consectetur nibh mollis, ornare magna et, dictum tellus. Nam
          viverra dui a enim iaculis, sed blandit orci consectetur. Maecenas et
          nisi eleifend velit pretium eleifend sit amet eget nisl. Vestibulum
          eget ipsum semper purus pulvinar iaculis. Sed ut odio eu felis
          porttitor ultrices eu sed odio. Nullam lorem sapien, pellentesque
          convallis libero vel, tempus accumsan nisi. Morbi efficitur ex vitae
          felis luctus cursus. Suspendisse nibh neque, gravida sed elementum
          ullamcorper, gravida in nisi. Donec et luctus metus. Fusce sed est
          dictum, imperdiet nisi eu, suscipit odio. In id enim at tortor
          malesuada vulputate eu eu sem. Mauris blandit faucibus euismod.
          <br />
          <br />
          Curabitur quam tortor, tristique euismod finibus viverra, bibendum sit
          amet nisl. Nulla lobortis pharetra mauris, ac semper urna tempor et.
          Maecenas enim magna, suscipit nec metus id, ornare pulvinar dolor.
          Cras rhoncus ante sit amet tempus luctus. Donec in nisl a dolor auctor
          tincidunt. Cras at arcu tortor. Pellentesque ante felis, convallis sit
          amet erat id, consectetur consequat sapien. Aliquam volutpat velit in
          est bibendum, vestibulum commodo leo interdum. Integer sodales ex eu
          tempus faucibus. Vestibulum ultricies erat vel leo accumsan posuere.
          Cras commodo felis vitae lacus suscipit, in tristique lectus
          venenatis. Sed et nibh urna. Praesent vitae eleifend turpis. Fusce sit
          amet pretium lorem, in tempus elit. Etiam at ornare est. Aenean felis
          arcu, fermentum scelerisque nibh at, lacinia sagittis neque.
        </div>
        <DialogFooter>
          <DialogClose
            render={(props) => (
              <Button {...props} className="w-full">
                Accept
              </Button>
            )}
          />
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
```

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

### Meter Component Example

Source: https://www.9ui.dev/docs/components/meter

A complete example demonstrating the Meter component's usage with a value and maximum. It includes a label and a formatted value display.

```tsx
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"

export default function MeterDemo() {
  return (
    <Meter className="mx-auto w-48" value={4} max={5}>
      <div className="flex items-center justify-between">
        <MeterLabel>Tasks Completed</MeterLabel>
        <MeterValue>{(formattedValue, value) => `${value} / 5`}</MeterValue>
      </div>
    </Meter>
  )
}
```

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

### Context Menu Example

Source: https://www.9ui.dev/docs/components/context-menu

Demonstrates the full implementation of a context menu with various interactive elements and sub-menus. Ensure the 'use client' directive is present for client-side interactivity.

```tsx
"use client"

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export default function ContextMenuDemo() {
  return (
    <div className="w-80">
      <ContextMenu>
        <ContextMenuTrigger className="flex aspect-video w-full items-center justify-center rounded-lg border border-dashed text-sm">
          Right Click Here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuItem>
              Back
              <ContextMenuShortcut>⌘[</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem disabled>
              Forward
              <ContextMenuShortcut>⌘]</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem>
              Reload
              <ContextMenuShortcut>⌘R</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuSub>
              <ContextMenuSubTrigger>More</ContextMenuSubTrigger>
              <ContextMenuSubContent>
                <ContextMenuItem>Save As</ContextMenuItem>
                <ContextMenuItem>Print</ContextMenuItem>
                <ContextMenuItem>Cast</ContextMenuItem>
                <ContextMenuSeparator />
                <ContextMenuItem>Inspect</ContextMenuItem>
              </ContextMenuSubContent>
            </ContextMenuSub>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuLabel>Settings</ContextMenuLabel>
            <ContextMenuCheckboxItem>Always on Top</ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem>Show full URL</ContextMenuCheckboxItem>
          </ContextMenuGroup>
          <ContextMenuSeparator />
          <ContextMenuGroup>
            <ContextMenuLabel>Zoom</ContextMenuLabel>
            <ContextMenuRadioGroup defaultValue="100">
              <ContextMenuRadioItem value="50">50%</ContextMenuRadioItem>
              <ContextMenuRadioItem value="100">100%</ContextMenuRadioItem>
              <ContextMenuRadioItem value="150">150%</ContextMenuRadioItem>
            </ContextMenuRadioGroup>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  )
}
```

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

### Install Carousel Dependencies

Source: https://www.9ui.dev/docs/components/carousel

Install the core dependencies for the carousel functionality. Ensure these are installed before using the component.

```bash
npm install embla-carousel-react embla-carousel
```

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

### Install Sonner

Source: https://www.9ui.dev/docs/components/sonner

Run this command in your terminal to add Sonner to your project.

```bash
npx shadcn@latest add @9ui/sonner
```

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

### Menubar Component Example

Source: https://www.9ui.dev/docs/components/menubar

Demonstrates the full implementation of the Menubar component with various menu items, submenus, radio groups, checkboxes, and shortcuts. Ensure all necessary imports are included.

```tsx
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar"

export default function MenubarDemo() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New File
            <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            New Window
            <MenubarShortcut>⇧⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Open
            <MenubarShortcut>⌘O</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Open Folder
            <MenubarShortcut>⇧⌘O</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>Open Recent</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Save
            <MenubarShortcut>⌘S</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Save As
            <MenubarShortcut>⇧⌘S</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Close Window
            <MenubarShortcut>⌘W</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo
            <MenubarShortcut>⌘Z</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Redo
            <MenubarShortcut>⌘Y</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Cut
            <MenubarShortcut>⌘X</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Copy
            <MenubarShortcut>⌘C</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Paste
            <MenubarShortcut>⌘V</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Find
            <MenubarShortcut>⌘F</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Replace
            <MenubarShortcut>⌥⌘F</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarSub>
            <MenubarSubTrigger>Appearance</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarRadioGroup>
                <MenubarRadioItem value="system">System</MenubarRadioItem>
                <MenubarRadioItem value="light">Light</MenubarRadioItem>
                <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
              </MenubarRadioGroup>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Show/Hide Sidebar
            <MenubarShortcut>⌃⌥⌘*</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Command Palette
            <MenubarShortcut>⇧⌘P</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>Expand Tabs</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Zoom In
            <MenubarShortcut>⌘+</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Zoom Out
            <MenubarShortcut>⌘-</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Reset Zoom
            <MenubarShortcut>⌘0</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarCheckboxItem>Show Toolbar</MenubarCheckboxItem>
          <MenubarCheckboxItem>Show Status Bar</MenubarCheckboxItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Help</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Getting Started</MenubarItem>
          <MenubarItem>Report Issue</MenubarItem>
          <MenubarItem>Check for Updates</MenubarItem>
          <MenubarItem>Contact the Team</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

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

### Command Component Example

Source: https://www.9ui.dev/docs/components/command

Demonstrates the full usage of the Command component with various groups and items, including projects, teams, and navigation.

```tsx
import {
  ArrowRightIcon,
  LayoutGridIcon,
  PlusIcon,
  UsersIcon,
} from "lucide-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
import { Kbd } from "@/components/ui/kbd"

export default function CommandDemo() {
  return (
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Projects">
          <CommandItem>
            <LayoutGridIcon />
            <span>Search projects...</span>
            <CommandShortcut>
              <Kbd>⌘</Kbd>
              <Kbd>P</Kbd>
            </CommandShortcut>
          </CommandItem>
          <CommandItem>
            <PlusIcon />
            <span>Create new project...</span>
            <CommandShortcut>
              <Kbd>C</Kbd>
            </CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Teams">
          <CommandItem>
            <UsersIcon />
            <span>Search teams...</span>
          </CommandItem>
          <CommandItem>
            <PlusIcon />
            <span>Create new team...</span>
            <CommandShortcut>
              <Kbd>T</Kbd>
            </CommandShortcut>
          </CommandItem>
        </CommandGroup>
        <CommandGroup heading="Navigation">
          <CommandItem>
            <ArrowRightIcon />
            <span>Go to home</span>
          </CommandItem>
          <CommandItem>
            <ArrowRightIcon />
            <span>Go to profile</span>
          </CommandItem>
          <CommandItem>
            <ArrowRightIcon />
            <span>Go to settings</span>
          </CommandItem>
          <CommandItem>
            <ArrowRightIcon />
            <span>Go to billing</span>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}
```

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

### Initialize MCP for AI Assistance

Source: https://www.9ui.dev/docs/getting-started/installation

Run this command to initialize MCP, which provides AI assistance with full context of the 9ui registry. This requires npx.

```bash
npx shadcn@latest mcp init
```

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

### Install cmdk-base Dependency

Source: https://www.9ui.dev/docs/components/command

Install the cmdk-base dependency required for the Command component.

```bash
npm install cmdk-base
```

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

### Install Recharts Dependency

Source: https://www.9ui.dev/docs/components/chart

Install the Recharts library, which is a peer dependency for the Chart component.

```bash
npm install recharts
```

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

### Install Form Dependencies

Source: https://www.9ui.dev/docs/components/form

Install the necessary npm packages for react-hook-form and Zod integration.

```bash
npm install react-hook-form zod @hookform/resolvers
```

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

### Install Number Field Component

Source: https://www.9ui.dev/docs/components/number-field

Use this command to install the Number Field component in your project.

```bash
npx shadcn@latest add @9ui/number-field
```

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

### Basic Toggle Group Setup

Source: https://www.9ui.dev/docs/components/toggle-group

Demonstrates the basic structure for a Toggle Group with single selection. Ensure necessary icons and components are imported.

```tsx
import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react"

import { Toggle } from "@/components/ui/toggle"
import { ToggleGroup } from "@/components/ui/toggle-group"

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup>
      <Toggle value="left">
        <AlignLeftIcon />
      </Toggle>
      <Toggle value="center">
        <AlignCenterIcon />
      </Toggle>
      <Toggle value="right">
        <AlignRightIcon />
      </Toggle>
    </ToggleGroup>
  )
}
```

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

### Install vaul-base Dependency

Source: https://www.9ui.dev/docs/components/drawer

Install the vaul-base package using npm. This is a required dependency for the Drawer component.

```bash
npm install vaul-base
```

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

### Install Input OTP Component

Source: https://www.9ui.dev/docs/components/input-otp

Use this command to add the Input OTP component to your project using shadcn-ui.

```bash
npx shadcn@latest add @9ui/input-otp
```

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

### Install Alert Dialog

Source: https://www.9ui.dev/docs/components/alert-dialog

Use this command to add the Alert Dialog component to your project.

```bash
npx shadcn@latest add @9ui/alert-dialog
```

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

### Install Form Component

Source: https://www.9ui.dev/docs/components/form

Use this command to add the form component to your project via shadcn-ui.

```bash
npx shadcn@latest add @9ui/form
```

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

### Install Context Menu Component

Source: https://www.9ui.dev/docs/components/context-menu

Use this command to add the Context Menu component to your project via the shadcn-ui CLI.

```bash
npx shadcn@latest add @9ui/context-menu
```

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

### Install Avatar Component

Source: https://www.9ui.dev/docs/components/avatar

Install the Avatar component using the shadcn-ui CLI. This command adds the necessary package to your project.

```bash
npx shadcn@latest add @9ui/avatar
```

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

### Install Navigation Menu Component

Source: https://www.9ui.dev/docs/components/navigation-menu

Use this command to add the Navigation Menu component to your project via the shadcn CLI.

```bash
npx shadcn@latest add @9ui/navigation-menu
```

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

### Drawer Example with Feedback Form

Source: https://www.9ui.dev/docs/components/drawer

Demonstrates a complete Drawer component implementation including a feedback form with rating and textarea. Requires 'react', 'lucide-react', and custom components from '@/components/ui'.

```tsx
"use client"

import { useState } from "react"
import { StarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import { Textarea } from "@/components/ui/textarea"

import { cn } from "@/lib/utils"

export default function DrawerDemo() {
  const [rating, setRating] = useState<number | undefined>(undefined)

  const handleChangeRating = (newRating: number) => {
    if (newRating === rating) {
      setRating(undefined)
    } else {
      setRating(newRating)
    }
  }

  return (
    <Drawer shouldScaleBackground>
      <DrawerTrigger
        render={(props) => <Button {...props}>Open Drawer</Button>}
      />
      <DrawerContent>
        <div className="mx-auto w-full max-w-md">
          <DrawerHeader>
            <DrawerTitle>Provide Your Feedback</DrawerTitle>
            <DrawerDescription>
              We value your feedback. Please rate your experience and leave a
              review.
            </DrawerDescription>
          </DrawerHeader>

          <div className="flex flex-col gap-4 px-4">
            <div className="flex gap-2">
              {[1, 2, 3, 4, 5].map((star) => (
                <StarIcon
                  key={star}
                  className={cn(
                    "size-8 cursor-pointer transition-all",
                    rating && star <= rating
                      ? "fill-yellow-300 text-yellow-300"
                      : "text-muted-foreground fill-none"
                  )}
                  onClick={() => handleChangeRating(star)}
                />
              ))}
            </div>
            <Textarea placeholder="Write a review" />
          </div>

          <DrawerFooter>
            <Button className="w-full">Submit</Button>
            <DrawerClose
              render={(props) => (
                <Button {...props} variant="outline" className="w-full">
                  Cancel
                </Button>
              )}
            />
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  )
}

```

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

### Install Breadcrumbs Component

Source: https://www.9ui.dev/docs/components/breadcrumbs

Install the breadcrumbs component using the shadcn-ui CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @9ui/breadcrumbs
```

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

### Setup ToastProvider in Layout

Source: https://www.9ui.dev/docs/components/toast

Wrap your main application content with ToastProvider in your root layout file to enable toast functionality.

```tsx
import { ToastProvider } from "@/components/ui/toast"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <ToastProvider>
          <main>{children}</main>
        </ToastProvider>
      </body>
    </html>
  )
}
```

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

### Basic Combobox Example

Source: https://www.9ui.dev/docs/components/combobox

A basic example of a Combobox component for selecting a fruit from a list. Ensure the `fruits` array is defined.

```typescript
import * as React from "react"

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
import { Label } from "@/components/ui/label"

export default function ComboboxDemo() {
  return (
    <Combobox items={fruits}>
      <div className="relative flex flex-col gap-2">
        <Label htmlFor="select-fruit">Select a fruit</Label>
        <ComboboxInput
          className="w-80"
          id="select-fruit"
          placeholder="e.g. Apple"
        />
      </div>

      <ComboboxContent>
        <ComboboxEmpty>No fruits found.</ComboboxEmpty>
        <ComboboxList>
          {(item: string) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

const fruits = [
  "Apple",
  "Banana",
  "Orange",
  "Pineapple",
  "Grape",
  "Mango",
  "Strawberry",
  "Blueberry",
  "Raspberry",
  "Blackberry",
  "Cherry",
  "Peach",
  "Pear",
  "Plum",
  "Kiwi",
  "Watermelon",
  "Cantaloupe",
  "Honeydew",
  "Papaya",
  "Guava",
  "Lychee",
  "Pomegranate",
  "Apricot",
  "Grapefruit",
  "Passionfruit",
]

```