### Install Pagination Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/pagination.mdx

Install the pagination component using the shadcn-ui CLI.

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

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

### Install Dependencies

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/drawer.mdx

Install the vaul-base dependency before using the Drawer component.

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

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

### Install Drawer Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/drawer.mdx

Use this command to install the Drawer component using shadcn-ui.

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

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

### Install 9ui with shadcn CLI

Source: https://context7.com/borabaloglu/9ui/llms.txt

Use the shadcn CLI to initialize 9ui in your project. This is the recommended installation method.

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

# Add 9ui registry to components.json
# Then install components as needed
```

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

### Install Core Dependencies

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/installation.mdx

Install the essential dependencies required for 9ui components to function correctly.

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

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

### Install Slider Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/slider.mdx

Install the Slider component using the shadcn CLI.

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

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

### Install Sonner Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/sonner.mdx

Run this command to install the Sonner component using shadcn-ui.

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

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

### Install Select Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/select.mdx

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

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

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

### Install Toast Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/toast.mdx

Run this command to add the Toast component to your project.

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

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

### Install Tooltip Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/tooltip.mdx

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

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

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

### Install Dropdown Menu

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/dropdown-menu.mdx

Use this command to add the Dropdown Menu component to your project.

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

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

### Install Phone Input Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/phone-input.mdx

Use this command to add the phone input component to your project.

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

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

### Install input-otp dependency

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/input-otp.mdx

Install the core input-otp npm package as a dependency for the component.

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

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

### Install Form Dependencies

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/form.mdx

Install the necessary dependencies for react-hook-form and zod validation.

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

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

### Install Preview Card Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/preview-card.mdx

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

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

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

### Install cmdk-base Dependency

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/command.mdx

Install the cmdk-base dependency, which is required for the Command component.

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

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

### Install React Day Picker Dependency

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/calendar.mdx

Install the react-day-picker dependency, which is required for the Calendar component. This command installs the package using npm.

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

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

### Install Button Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/button.mdx

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

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

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

### Install Toggle Group Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/toggle-group.mdx

Install the Toggle Group component using npm or npx.

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

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

### Install Toggle Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/toggle.mdx

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

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

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

### Install Embla Carousel Dependencies

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/carousel.mdx

Install the core Embla Carousel libraries required for the carousel functionality. Ensure these are installed before using the component.

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

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

### Install next-themes

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/dark-mode/next.mdx

Install the `next-themes` package using npm. This is the first step to enable theme management in your Next.js project.

```bash
npm install next-themes
```

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

### Install Autocomplete Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/autocomplete.mdx

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

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

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

### Install React Phone Number Input Dependency

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/phone-input.mdx

Install the core react-phone-number-input library before proceeding.

```bash
npm install react-phone-number-input
```

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

### Install Chart Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/chart.mdx

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

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

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

### Install Tabs Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/tabs.mdx

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

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

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

### Install Skeleton Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/skeleton.mdx

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

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

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

### Install Table Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/table.mdx

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

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

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

### Install Textarea Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/textarea.mdx

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

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

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

### Install Calendar Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/calendar.mdx

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

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

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

### Install Toolbar Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/toolbar.mdx

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 Aspect Ratio Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/aspect-ratio.mdx

Use this command to add the Aspect Ratio component to your project.

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

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

### Install Card Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/card.mdx

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

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

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

### Install Switch Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/switch.mdx

Use this command to add the Switch component to your project via shadcn.

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

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

### Install Number Field Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/number-field.mdx

Install the Number Field component using the shadcn-ui CLI.

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

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

### Install 9ui Input Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/input.mdx

Use this command to add the Input component to your project via shadcn.

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

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

### Install Input OTP with shadcn-ui

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/input-otp.mdx

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

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

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

### Install Recharts Dependency

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/chart.mdx

The Chart component relies on the recharts library. Install it using npm.

```bash
npm install recharts
```

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

### Alert with Action Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/alert.mdx

Example of an alert that includes an action, allowing users to interact with the message.

```tsx
<Alert>
  <AlertTriangle className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>Your password has expired. Please reset it now.</AlertDescription>
</Alert>

```

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

### Install Menubar Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/menubar.mdx

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

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

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

### Install remix-themes

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/dark-mode/remix.mdx

Install the `remix-themes` package using npm to add dark mode capabilities to your Remix application.

```bash
npm install remix-themes
```

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

### Install Alert Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/alert.mdx

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

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

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

### Install Context Menu Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/context-menu.mdx

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

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

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

### Install Resizable Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/resizable.mdx

Use this command to add the Resizable component to your project via npm.

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

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

### Install Command Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/command.mdx

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

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

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

### Install Carousel Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/carousel.mdx

Install the Carousel component using npx. This command adds the necessary package to your project.

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

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

### Install Meter Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/meter.mdx

Use this command to add the Meter component to your project via shadcn.

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

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

### Install Kbd Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/kbd.mdx

Use this command to add the Kbd component to your project via npm.

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

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

### Install Accordion Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/accordion.mdx

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

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

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

### Install Sheet Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/sheet.mdx

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

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

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

### Install Separator Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/separator.mdx

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

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

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

### Install Combobox Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/combobox.mdx

Use this command to add the Combobox component to your project via shadcn.

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

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

### Setup ToastProvider for Toast Notifications

Source: https://context7.com/borabaloglu/9ui/llms.txt

Wrap your application with ToastProvider to enable the toast notification system. This is a required setup step before using toast functionalities.

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

function App() {
  return (
    <ToastProvider>
      {/* Your app content */}
    </ToastProvider>
  )
}
```

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

### Install Progress Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/progress.mdx

Use this command to add the Progress component to your project via npm.

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

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

### Install Dialog Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/dialog.mdx

Use this command to add the Dialog component to your project via shadcn.

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

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

### Info Alert Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/alert.mdx

Example of an informational alert, used to provide users with relevant information.

```tsx
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components and dependencies to your app.</AlertDescription>
</Alert>

```

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

### Install Avatar Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/avatar.mdx

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

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

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

### Install Collapsible Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/collapsible.mdx

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

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

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

### Install Checkbox Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/checkbox.mdx

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

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

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

### Info Badge Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/badge.mdx

Renders a badge with an info color scheme.

```tsx
<Badge variant="info">Info</Badge>

```

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

### Install Label Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/label.mdx

Use this command to add the Label component to your project via shadcn.

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

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

### Install 9ui Form Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/form.mdx

Use this command to add the 9ui form component to your project.

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

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

### Outline Badge Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/badge.mdx

Renders a badge with an outline style.

```tsx
<Badge variant="outline">Outline</Badge>

```

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

### Success Alert Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/alert.mdx

Example of a success alert, typically used for positive feedback or confirmation.

```tsx
<Alert>
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your settings have been saved.</AlertDescription>
</Alert>

```

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

### Install Badge Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/badge.mdx

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

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

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

### Install Checkbox Group

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/checkbox-group.mdx

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

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

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

### Install Popover Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/popover.mdx

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

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

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

### Warning Badge Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/badge.mdx

Renders a badge with a warning color scheme.

```tsx
<Badge variant="warning">Warning</Badge>

```

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

### Initialize Project with shadcn-ui

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/installation.mdx

Use this command to initialize your project with shadcn-ui and configure it for 9ui.

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

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

### Install Alert Dialog Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/alert-dialog.mdx

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

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

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

### Install Breadcrumbs Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/breadcrumbs.mdx

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

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

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

### Install Navigation Menu Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/navigation-menu.mdx

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

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

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

### Install Emoji Picker with npx

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/emoji-picker.mdx

Use this command to add the Emoji Picker component to your project.

```bash
npx shadcn@latest add @9ui/emoji-picker
```

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

### Success Badge Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/badge.mdx

Renders a badge with a success color scheme.

```tsx
<Badge variant="success">Success</Badge>

```

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

### Select with Groups Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/select.mdx

Shows how to organize Select options into groups. This improves usability for longer lists of choices.

```tsx
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a verified email" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes">Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SelectItem value="broccoli">Broccoli</SelectItem>
      <SelectItem value="carrot">Carrot</SelectItem>
      <SelectItem value="spinach">Spinach</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
```

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

### Danger Badge Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/badge.mdx

Renders a badge with a danger color scheme.

```tsx
<Badge variant="danger">Danger</Badge>

```

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

### Secondary Badge Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/badge.mdx

Renders a badge with a secondary color scheme.

```tsx
<Badge variant="secondary">Secondary</Badge>

```

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

### Button Examples

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/button.mdx

Demonstrates various styles and functionalities of the Button component, including different sizes, icons, and states.

```tsx
<Button variant="secondary">Secondary</Button>
```

```tsx
<Button variant="outline">Outline</Button>
```

```tsx
<Button variant="ghost">Ghost</Button>
```

```tsx
<Button variant="link">Link</Button>
```

```tsx
<Button variant="destructive">Destructive</Button>
```

```tsx
<Button>Default</Button>
```

```tsx
<Button size="sm">Small</Button>
```

```tsx
<Button size="lg">Large</Button>
```

```tsx
<Button><PlusCircleIcon className="mr-2 h-4 w-4" /> With Icon</Button>
```

```tsx
<Button>Loading...</Button>
```

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

### Install Radio Group Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/radio-group.mdx

Use this command to add the Radio Group component to your project via shadcn.

```bash
npx shadcn@latest add @9ui/radio-group
```

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

### Drawer Component Anatomy

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/drawer.mdx

This example shows the basic structure and nesting of Drawer components.

```tsx
<Drawer>
	<DrawerTrigger>
	<DrawerContent>
		<DrawerHeader>
			<DrawerTitle />
			<DrawerDescription />
		</DrawerHeader>
		<DrawerFooter>
			<DrawerClose />
		</DrawerFooter>
	</DrawerContent>
</Drawer>

```

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

### Select with Custom Value Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/select.mdx

Demonstrates how to use the Select component with a custom value input. This allows users to enter their own option.

```tsx
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes">Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
```

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

### Configure components.json for shadcn CLI

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/installation.mdx

Optionally create a `components.json` file to enable shadcn CLI component installation with the correct paths and settings. This file specifies project configuration, including Tailwind CSS settings, aliases, and icon library preferences.

```json
{
	"$schema": "https://ui.shadcn.com/schema.json",
	"style": "new-york",
	"rsc": false,
	"tsx": true,
	"tailwind": {
		"config": "",
		"css": "src/styles/globals.css",
		"baseColor": "neutral",
		"cssVariables": true,
		"prefix": ""
	},
	"aliases": {
		"components": "@/components",
		"utils": "@/lib/utils",
		"ui": "@/components/ui",
		"lib": "@/lib",
		"hooks": "@/hooks"
	},
	"iconLibrary": "lucide",
	"registries": {
		"@9ui": "https://9ui.dev/r/{name}.json"
	}
}
```

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

### Dropdown Menu Anatomy

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/dropdown-menu.mdx

This example shows the basic structure and nesting of Dropdown Menu components.

```typescript
<DropdownMenu>
	<DropdownMenuTrigger />
	<DropdownMenuContent>
		<DropdownMenuGroup>
			<DropdownMenuLabel />
			<DropdownMenuItem>
				<DropdownMenuItemShortcut />
			</DropdownMenuItem>
		</DropdownMenuGroup>
		<DropdownMenuSeparator />
		<DropdownMenuCheckboxItem />
		<DropdownMenuRadioGroup>
			<DropdownMenuRadioItem />
		</DropdownMenuRadioGroup>
		<DropdownMenuSub>
			<DropdownMenuSubTrigger />
			<DropdownMenuSubContent>
				<DropdownMenuItem />
			</DropdownMenuSubContent>
		</DropdownMenuSub>
	</DropdownMenuContent>
</DropdownMenu>
```

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

### Accordion Component Examples

Source: https://context7.com/borabaloglu/9ui/llms.txt

Shows how to implement the Accordion component for collapsible content sections. Imports include Accordion, AccordionItem, AccordionTrigger, and AccordionContent. The `defaultValue` prop can be used to initially expand specific items.

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion"

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles that match the other components.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is it animated?</AccordionTrigger>
    <AccordionContent>
      Yes. It uses CSS animations for smooth transitions.
    </AccordionContent>
  </AccordionItem>
</Accordion>

// With openByDefault for initially expanded item
<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Initially Open</AccordionTrigger>
    <AccordionContent>This section starts open.</AccordionContent>
  </AccordionItem>
</Accordion>
```

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

### CSS Theming with Semantic Color Tokens and Dark Mode

Source: https://context7.com/borabaloglu/9ui/llms.txt

Configure the theme system using CSS variables for semantic color tokens and support for dark mode. This example shows basic color mappings and dark mode overrides.

```css
/* globals.css */
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-ring: var(--ring);
  /* ... more color mappings */
}

:root {
  --background: oklch(98.5% 0 0);
  --foreground: oklch(14.5% 0 0);
  --primary: oklch(14.5% 0 0);
  --primary-foreground: oklch(98.5% 0 0);
  --secondary: oklch(92.2% 0 0);
  --muted: oklch(92.2% 0 0);
  --accent: oklch(92.2% 0 0);
  --destructive: oklch(50.5% 0.213 27.518);
  --border: oklch(87% 0 0);
  --ring: oklch(70.8% 0 0);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(14.5% 0 0);
  --foreground: oklch(98.5% 0 0);
  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(14.5% 0 0);
  /* ... dark mode overrides */
}

/* Adding custom colors */
:root {
  --custom-color: oklch(62.7% 0.265 303.9);
  --custom-color-foreground: oklch(97.7% 0.014 308.299);
}

@theme inline {
  --color-custom-color: var(--custom-color);
  --color-custom-color-foreground: var(--custom-color-foreground);
}
```

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

### Danger Alert Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/alert.mdx

Example of a danger alert, used for critical information or to indicate errors.

```tsx
<Alert>
  <AlertTitle>Danger</AlertTitle>
  <AlertDescription>Your account has been suspended.</AlertDescription>
</Alert>

```

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

### Install Scroll Area Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/scroll-area.mdx

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

```bash
npx shadcn@latest add @9ui/scroll-area
```

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

### Multiple Select Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/select.mdx

Implements a multi-select functionality using the Select component. This allows users to choose multiple options from the list.

```tsx
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select tags" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Tags</SelectLabel>
      <SelectItem value="next.js">Next.js</SelectItem>
      <SelectItem value="react">React</SelectItem>
      <SelectItem value="vue">Vue</SelectItem>
      <SelectItem value="svelte">Svelte</SelectItem>
      <SelectItem value="angular">Angular</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
```

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

### Wrap App with Theme Provider

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/dark-mode/vite.mdx

Integrate the ThemeProvider into your application's root to make theme management available throughout the component tree. Set the default theme, for example, 'system'.

```tsx
import { ThemeProvider } from "@/providers/theme-provider"

function App() {
	return (
		<ThemeProvider defaultTheme="system">
			{/* Your app content */}
		</ThemeProvider>
	)
}

export default App
```

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

### Import Calendar and Popover Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/date-picker.mdx

Imports required for using the date picker component. Ensure Calendar and Popover components are installed.

```tsx
import { Calendar } from "@/components/ui/calendar"
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover"
```

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

### Context Menu Anatomy

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/context-menu.mdx

This example demonstrates the basic structure and nesting of Context Menu components. It includes groups, items, separators, checkboxes, radio buttons, and submenus.

```tsx
<ContextMenu>
	<ContextMenuTrigger />
	<ContextMenuContent>
		<ContextMenuGroup>
			<ContextMenuGroupLabel />
			<ContextMenuItem>
				<ContextMenuItemShortcut />
			</ContextMenuItem>
		</ContextMenuGroup>
		<ContextMenuSeparator />
		<ContextMenuCheckboxItem />
		<ContextMenuSeparator />
		<ContextMenuRadioGroup>
			<ContextMenuRadioItem />
		</ContextMenuRadioGroup>
		<ContextMenuSub>
			<ContextMenuSubTrigger />
			<ContextMenuSubContent>
				<ContextMenuItem />
			</ContextMenuItem>
		</ContextMenuSub>
	</ContextMenuContent>
</ContextMenu>
```

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

### Toolbar Anatomy

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/toolbar.mdx

Basic structure of a toolbar component. This example shows how to arrange different toolbar elements.

```tsx
<Toolbar>
  <ToolbarButton />
  <ToolbarLink />
  <ToolbarSeparator />
  <ToolbarGroup>
    <ToolbarButton />
    <ToolbarButton />
  <ToolbarGroup />
  <ToolbarInput />
</Toolbar>

```

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

### Checkbox with Label

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/checkbox.mdx

Example of a Checkbox component paired with a descriptive label. This improves accessibility and user experience.

```typescript
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label
    htmlFor="terms"
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </label>
</div>

```

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

### Initialize MCP for AI Assistance

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/installation.mdx

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

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

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

### Warning Alert Example

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/alert.mdx

Example of a warning alert, used to caution users about potential issues or important notices.

```tsx
<Alert>
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>This action cannot be undone.</AlertDescription>
</Alert>

```

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

### Import Preview Card Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/preview-card.mdx

Import the necessary components for the Preview Card from the specified path.

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

```

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

### Astro Script for Theme Handling

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/dark-mode/astro.mdx

This script handles theme initialization and persistence using localStorage. It observes changes to the document's class list to update localStorage.

```astro
--- 
import '../styles/global.css';
---

<script is:inline>
  function getTheme() {
    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
      return localStorage.getItem("theme")
    }

		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
  }

	const theme = getTheme()
	document.documentElement.classList.remove("light", "dark")
	document.documentElement.classList.add(theme)

	if (typeof localStorage !== "undefined") {
		const observer = new MutationObserver(() => {
			const isDark = document.documentElement.classList.contains("dark")
			localStorage.setItem("theme", isDark ? "dark" : "light")
		})
		observer.observe(document.documentElement, {
			attributes: true,
			attributeFilter: ["class"]
		})
	}
</script>

<html lang="en">
	<body>
		{/* content */}
	</body>
</html>
```

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

### Import Tooltip Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/tooltip.mdx

Import the necessary components for using the Tooltip.

```typescript
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip"

```

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

### Import Context Menu Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/context-menu.mdx

Import all necessary components for the Context Menu from the '@/components/ui/context-menu' path. Ensure these components are correctly aliased in your project configuration.

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

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

### Import Meter Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/meter.mdx

Import the necessary Meter, MeterLabel, and MeterValue components from the ui library.

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

```

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

### Create Session Storage for Theme

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/dark-mode/remix.mdx

Set up cookie session storage using `@remix-run/node` and `remix-themes` to manage theme preferences. This involves creating a `themeSessionResolver` that handles theme persistence.

```tsx
import { createCookieSessionStorage } from "@remix-run/node"
import { createThemeSessionResolver } from "remix-themes"

const sessionStorage = createCookieSessionStorage({
	cookie: {
		name: "__remix-themes",
		// domain: 'remix.run',
		path: "/",
		httpOnly: true,
		sameSite: "lax",
		secrets: ["s3cr3t"],
		// secure: true,
	},
})

export const themeSessionResolver = createThemeSessionResolver(sessionStorage)
```

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

### Add 9ui Registry to components.json

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/installation.mdx

Add the 9ui registry configuration to your `components.json` file to enable component discovery.

```json
{
	// existing configuration
	"registries": {
		"@9ui": "https://9ui.dev/r/{name}.json"
	}
}
```

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

### Import Resizable Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/resizable.mdx

Import the necessary components for creating resizable layouts. Ensure these imports are at the top of your file.

```typescript
import {
	ResizableHandle,
	ResizablePanel,
	ResizablePanelGroup,
} from "@/components/ui/resizable"

```

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

### Import Alert Dialog Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/alert-dialog.mdx

Import the necessary components for the Alert Dialog from the specified path. Ensure these components are available in your project.

```tsx
import {
	AlertDialog,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
```

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

### Configure shadcn/ui components.json for 9ui

Source: https://context7.com/borabaloglu/9ui/llms.txt

Configure your `components.json` file to register the 9ui registry. This allows the shadcn CLI to fetch components from 9ui.

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  },
  "registries": {
    "@9ui": "https://9ui.dev/r/{name}.json"
  }
}
```

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

### Global Styles Configuration

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/installation.mdx

Configure global styles, including theme variables and base styles, by importing Tailwind CSS and tw-animate-css.

```css
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
	--font-sans:
		"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-mono:
		"Geist Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco",
		"Consolas", '"Liberation Mono"', '"Courier New"', "monospace";
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 2px);
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);
	--color-danger: var(--danger);
	--color-danger-foreground: var(--danger-foreground);
	--color-danger-border: var(--danger-border);
	--color-warning: var(--warning);
	--color-warning-foreground: var(--warning-foreground);
	--color-warning-border: var(--warning-border);
	--color-info: var(--info);
	--color-info-foreground: var(--info-foreground);
	--color-info-border: var(--info-border);
	--color-success: var(--success);
	--color-success-foreground: var(--success-foreground);
	--color-success-border: var(--success-border);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);
}

:root {
	--background: oklch(98.5% 0 0);
	--foreground: oklch(14.5% 0 0);
	--card: oklch(97% 0 0);
	--card-foreground: oklch(14.5% 0 0);
	--popover: oklch(97% 0 0);
	--popover-foreground: oklch(14.5% 0 0);
	--primary: oklch(14.5% 0 0);
	--primary-foreground: oklch(98.5% 0 0);
	--secondary: oklch(92.2% 0 0);
	--secondary-foreground: oklch(20.5% 0 0);
	--muted: oklch(92.2% 0 0);
	--muted-foreground: oklch(43.9% 0 0);
	--accent: oklch(92.2% 0 0);
	--accent-foreground: oklch(14.5% 0 0);
	--destructive: oklch(50.5% 0.213 27.518);
	--destructive-foreground: oklch(98.5% 0 0);
	--border: oklch(87% 0 0);
	--input: oklch(97% 0 0);
	--ring: oklch(70.8% 0 0);
	--danger: oklch(96.6% 0.016 16.278);
	--danger-foreground: oklch(57.9% 0.237 29.233);
	--danger-border: oklch(93.3% 0.033 16.63);
	--warning: oklch(99% 0.016 96.37);

```

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

### Import Aspect Ratio Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/aspect-ratio.mdx

Import the AspectRatio component from the specified path to use it in your project.

```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio"
```

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

### 9ui Input Component with Trailing Icon

Source: https://context7.com/borabaloglu/9ui/llms.txt

Include a trailing icon, like an eye icon for password visibility toggling. Ensure `lucide-react` is installed.

```tsx
import { Input } from "@/components/ui/input"
import { Eye } from "lucide-react"

// With trailing icon
<Input
  placeholder="Password"
  type="password"
  trailingIcon={<Eye className="cursor-pointer" />}
/>
```

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

### Toolbar Component Imports

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/toolbar.mdx

Import all necessary components for building a toolbar. Ensure these imports are at the top of your file.

```tsx
import {
	Toolbar,
	ToolbarButton,
	ToolbarGroup,
	ToolbarInput,
	ToolbarLink,
	ToolbarSeparator,
} from "@/components/ui/toolbar"

```

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

### 9ui Button Component with Icon

Source: https://context7.com/borabaloglu/9ui/llms.txt

Include icons within the button component for enhanced visual cues. Ensure `lucide-react` or a similar icon library is installed.

```tsx
import { Button } from "@/components/ui/button"
import { Mail } from "lucide-react"

<Button>
  <Mail />
  Send Email
</Button>
```

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

### Dropdown Menu Imports

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/dropdown-menu.mdx

Import all necessary components for the Dropdown Menu from the UI library.

```typescript
import {
	DropdownMenu,
	DropdownMenuCheckboxItem,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuItemShortcut,
	DropdownMenuLabel,
	DropdownMenuRadioGroup,
	DropdownMenuRadioItem,
	DropdownMenuSeparator,
	DropdownMenuSub,
	DropdownMenuSubContent,
	DropdownMenuSubTrigger,
	DropdownMenuTrigger,
} from "@/components/ui/dropdown"
```

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

### TypeScript Theme Utilities

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/dark-mode/astro.mdx

Provides utility functions to get the current theme and set the theme on the document element. Supports 'light', 'dark', and 'system' themes.

```ts
export type Theme = "light" | "dark" | "system"

export function getTheme(): Theme {
	if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
		return localStorage.getItem("theme") as Theme
	}
	return "system"
}

export function setTheme(theme: Theme) {
	const isDark = 
		theme === "dark" ||
		(theme === "system" &&
			window.matchMedia("(prefers-color-scheme: dark)").matches)
	ddocument.documentElement.classList[isDark ? "add" : "remove"]("dark")
}
```

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

### Pagination Imports

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/pagination.mdx

Import all necessary components for the pagination UI.

```tsx
import {
	Pagination,
	PaginationContent,
	PaginationEllipsis,
	PaginationItem,
	PaginationLink,
	PaginationNext,
	PaginationPrevious,
} from "@/components/ui/pagination"
```

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

### Create ThemeProvider Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/dark-mode/next.mdx

Create a custom `ThemeProvider` component that wraps the `next-themes` provider. This component accepts all props from `next-themes` and passes them down.

```tsx
"use client"

import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({
	children,
	...props
}: React.ComponentProps<typeof NextThemesProvider>) {
	return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
```

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

### React Form with react-hook-form and Zod Validation

Source: https://context7.com/borabaloglu/9ui/llms.txt

Integrates react-hook-form with Zod for schema validation in a React form. Includes setup for form fields, error messages, and submission handling.

```tsx
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
  email: z.string().email({
    message: "Please enter a valid email address.",
  }),
})

function ProfileForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      email: "",
    },
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="johndoe" {...field} />
              </FormControl>
              <FormDescription>
                This is your public display name.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="john@example.com" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}

```

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

### Menubar Component Imports

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/menubar.mdx

Import all necessary Menubar components and sub-components from the '@/components/ui/menubar' path.

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

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

### Import Input Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/input.mdx

Import the Input component from the specified path in your project.

```tsx
import { Input } from "@/components/ui/input"
```

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

### Import Emoji Picker components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/emoji-picker.mdx

Import all necessary components for the Emoji Picker from the specified path.

```tsx
import {
	EmojiPicker,
	EmojiPickerContent,
	EmojiPickerEmpty,
	EmojiPickerList,
	EmojiPickerLoading,
	EmojiPickerSearch,
	EmojiPickerSkinToneSelector,
} from "@/components/ui/emoji-picker"
```

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

### Use Custom Colors in Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/theming.mdx

Apply the newly defined custom colors to your components using Tailwind CSS utility classes. The example shows how to set the background and text color using `bg-custom-color` and `text-custom-color-foreground`.

```jsx
<div className="bg-custom-color text-custom-color-foreground">
	Custom colored content
</div>
```

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

### Command Component Imports

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/command.mdx

Import the necessary components from the Command UI package. Ensure you have the correct path to your components.

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

```

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

### Add Theme Toggle Component

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/getting-started/dark-mode/vite.mdx

A React component that allows users to toggle between 'dark' and 'light' themes. It uses the useTheme hook to get and set the current theme and displays appropriate icons (Moon/Sun) based on the active theme.

```tsx
import * as React from "react"
import { MoonIcon, SunIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

import { useTheme } from "@/providers/theme-provider"

export default function ThemeToggle() {
	const { setTheme, theme } = useTheme()

	const toggleTheme = React.useCallback(() => {
		setTheme(theme === "dark" ? "light" : "dark")
	}, [theme, setTheme])

	return (
		<Button onClick={toggleTheme} variant="ghost" size="icon">
			<MoonIcon className="dark:hidden" />
			<SunIcon className="hidden dark:block" />
			<span className="sr-only">Toggle theme</span>
		</Button>
	)
}
```

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

### Import Accordion Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/accordion.mdx

Import the necessary Accordion components from the ui/accordion path.

```tsx
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion"

```

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

### Autocomplete Imports

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/autocomplete.mdx

Import the necessary components for using the Autocomplete feature. Ensure the import path is correct for your project structure.

```tsx
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/autocomplete"

```

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

### Basic Checkbox Component Usage

Source: https://context7.com/borabaloglu/9ui/llms.txt

Demonstrates the basic usage of a checkbox component, including its label. Requires importing Checkbox and Label components.

```tsx
<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>
```

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

### Import Toast Functionality

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/sonner.mdx

Import the `toast` function from the 'sonner' library to display notifications.

```tsx
import { toast } from "sonner"
```

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

### Display a Basic Toast

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/sonner.mdx

Use the imported `toast` function to show a simple message to the user. This is the most basic way to trigger a toast notification.

```tsx
toast("Toast is working!")
```

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

### Import Popover Components

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/popover.mdx

Import all necessary components for the Popover functionality from the ui package.

```typescript
import {
	Popover,
	PopoverClose,
	PopoverContent,
	PopoverDescription,
	PopoverFooter,
	PopoverHeader,
	PopoverTitle,
	PopoverTrigger,
} from "@/components/ui/popover"

```

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

### Navigation Menu Imports

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/navigation-menu.mdx

Import necessary components for the Navigation Menu from the UI library.

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

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

### Basic Kbd Component Anatomy

Source: https://github.com/borabaloglu/9ui/blob/main/apps/www/src/content/components/kbd.mdx

Render the Kbd component to display a keyboard shortcut. No props are required for basic usage.

```typescript
<Kbd />

```