### 9ui Getting Started List Data

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

An array of objects detailing the getting started guides for the 9ui library. Each entry includes a title, href for the documentation link, and a brief description.

```javascript
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."
	}
]
```

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

### Getting Started Items Configuration

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

Defines a list of items for getting started, including title, href, and description for each item. This structure is commonly used for navigation or tutorial links.

```javascript
const gettingStartedItems = [
  {
    title: "Introduction",
    href: "/docs/getting-started/introduction",
    description: "Learn about 9ui."
  },
  {
    title: "Installation",
    href: "/docs/getting-started/installation"
  }
];
```

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

### 9ui Metadata and Setup

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

Contains essential metadata for the 9ui project, including character set, title, description, author information, keywords, and social media meta tags for Open Graph and Twitter. It also includes favicon links.

```html
<meta charSet="utf-8" />
<title>Installation - 9ui</title>
<meta name="description" content="Installing dependencies and setting up the project."/>
<link rel="author" href="https://x.com/borabalogluu" />
<meta name="author" content="Bora Baloglu" />
<link rel="manifest" href="https://9ui.dev/site.webmanifest" crossOrigin="undefined" />
<meta name="keywords" content="React,Base UI,Tailwind CSS,9ui" />
<meta name="creator" content="Bora Baloglu" />
<meta property="og:title" content="Installation" />
<meta property="og:description" content="Installing dependencies and setting up the project." />
<meta property="og:url" content="https://9ui.dev/docs/getting-started/installation" />
<meta property="og:image" content="https://9ui.dev/og.jpg?v=3" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="9ui" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@borabalogluu" />
<meta name="twitter:title" content="Installation" />
<meta name="twitter:description" content="Installing dependencies and setting up the project." />
<meta name="twitter:image" content="https://9ui.dev/og.jpg?v=3" />
<link rel="shortcut icon" href="/favicon-16x16.png" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="256x256" />
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
```

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

### Table Component Manual Installation

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

Provides the source code for the Table component that can be manually copied and pasted into your project. This is an alternative to using the CLI for installation.

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

const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
  ({ className, ...props }, ref) => (
    <div className="relative w-full overflow-auto">
      <table
        ref={ref}
        className={cn("w-full caption-bottom text-sm", className)}
        {...props}
      />
    </div>
  ),
)
Table.displayName = "Table"

const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
  ),
)
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
  ),
)
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot
      ref={ref}
      className={cn("border-t bg-slate-100/40 font-medium dark:bg-white/5", className)}
      {...props}
    />
  ),
)
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
  ({ className, ...props }, ref) => (
    <tr
      ref={ref}
      className={cn("border-b transition-colors hover:bg-slate-100/50 data-[state=selected]:bg-slate-100/50 dark:hover:bg-slate-800/50 dark:data-[state=selected]:bg-slate-800/50", className)}
      {...props}
    />
  ),
)
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <th
      ref={ref}
      className={cn(
        "h-10 px-4 py-2 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 dark:text-slate-400",
        className
      )}
      {...props}
    />
  ),
)
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <td
      ref={ref}
      className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0", className)}
      {...props}
    />
  ),
)
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
  ({ className, ...props }, ref) => (
    <caption
      ref={ref}
      className={cn("mt-4 text-sm text-slate-500 dark:text-slate-400", className)}
      {...props}
    />
  ),
)
TableCaption.displayName = "TableCaption"

export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption
}
```

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

### Aspect Ratio Installation via CLI

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

Provides the command-line interface (CLI) command to install the Aspect Ratio component using shadcn-ui. This command fetches the necessary files for integration.

```bash
npx shadcn@latest add https://9ui.dev/r/aspect-ratio.json
```

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

### Install Base UI Component Library

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

Command to install the base UI components package using npm, yarn, pnpm, or bun.

```npm
npm install @base-ui-components/react
```

```yarn
yarn add @base-ui-components/react
```

```pnpm
pnpm install @base-ui-components/react
```

```bun
bun add @base-ui-components/react
```

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

### Install AspectRatio Component

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

Shows how to import the AspectRatio component from its source path. This is the initial step to use the component in your application.

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

```

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

### Install Base UI Components

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

Installs the Base UI components package using various package managers like npm, yarn, pnpm, and bun. This is a prerequisite for using the UI library.

```bash
npm install @base-ui-components/react
```

```bash
yarn add @base-ui-components/react
```

```bash
pnpm add @base-ui-components/react
```

```bash
bun add @base-ui-components/react
```

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

### Table Component Installation

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

Command to install the Table component using npx. This command fetches the necessary files to integrate the component into your project.

```Shell
npx shadcn@latest add https://9ui.dev/r/table.json
```

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

### UI Component Installation (CLI/Manual)

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

Provides instructions for installing UI components. It includes options for installation via a Command Line Interface (CLI) or through manual setup. This section is crucial for setting up the development environment.

```bash
// Example for CLI installation (conceptual, actual command depends on the tool)
// npm install @your-ui-library/slider
// or
// yarn add @your-ui-library/slider

// Manual installation steps would typically involve copying files or configuring build processes.
```

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

### Toast Installation and Setup

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

Instructions for installing the Toast component using npm/yarn/pnpm/bun and adding the necessary `ToastProvider` to the application's layout for global toast management.

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

```typescript
import { ToastProvider } from "@/components/ui/toast"
 
export default function RootLayout({ children }) {
	return (
		<html lang="en">
			<head />
			<body>
				<ToastProvider>
					<main>{children}</main>
				</ToastProvider>
			</body>
		</html>
	)
}
```

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

### Add 9ui Theme with shadcn/ui

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

This command installs the 9ui theme configuration into your project using shadcn/ui. It fetches the theme definition from a remote URL.

```bash
npx shadcn@latest add "https://9ui.dev/r/theme.json"
```

```bash
yarn dlx shadcn@latest add "https://9ui.dev/r/theme.json"
```

```bash
pnpm dlx shadcn@latest add "https://9ui.dev/r/theme.json"
```

```bash
bunx shadcn@latest add "https://9ui.dev/r/theme.json"
```

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

### Install Table Component via CLI

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

Installs the Table component using the shadcn-ui CLI with different package managers. This command fetches the component's source code and integrates it into your project.

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

```bash
yarn dlx shadcn@latest add https://9ui.dev/r/table.json
```

```bash
pnpm dlx shadcn@latest add https://9ui.dev/r/table.json
```

```bash
bunx shadcn@latest add https://9ui.dev/r/table.json
```

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

### Install Aspect Ratio Component via CLI

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

Provides commands to add the Aspect Ratio component to your project using various package managers like npm, yarn, pnpm, and bun. This is the recommended way to integrate the component.

```npm
npx shadcn@latest add https://9ui.dev/r/aspect-ratio.json
```

```yarn
yarn dlx shadcn@latest add https://9ui.dev/r/aspect-ratio.json
```

```pnpm
pnpm dlx shadcn@latest add https://9ui.dev/r/aspect-ratio.json
```

```bun
bunx shadcn@latest add https://9ui.dev/r/aspect-ratio.json
```

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

### Add 9ui Theme via shadcn CLI

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

Command to add the 9ui theme configuration to your project using the shadcn CLI.

```bash
npx shadcn@latest add "https://9ui.dev/r/theme.json"
```

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

### Aspect Ratio Component Example

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

Demonstrates the usage of the Aspect Ratio component to wrap content and maintain a specified aspect ratio. Requires the AspectRatio component from '@/components/ui/aspect-ratio'.

```typescript
import { AspectRatio } from "@/components/ui/aspect-ratio"
 
export function AspectRatioDemo() {
	return (
		<AspectRatio
			ratio={16 / 9}
			className="bg-card text-card-foreground rounded-lg border"
		>
			<div className="flex size-full items-center justify-center font-medium">
				Content
			</div>
		</AspectRatio>
	)
}
```

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

### Install input-otp via CLI

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

Installs the input-otp component using the shadcn CLI. This command fetches the component's code and integrates it into your project, simplifying the setup process.

```bash
npx shadcn@latest add https://9ui.dev/r/input-otp.json
```

```bash
yarn dlx shadcn@latest add https://9ui.dev/r/input-otp.json
```

```bash
pnpm dlx shadcn@latest add https://9ui.dev/r/input-otp.json
```

```bash
bunx shadcn@latest add https://9ui.dev/r/input-otp.json
```

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

### Animated Icons Library

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

Highlights an external library for animated icons, recommended for users seeking dynamic icon solutions. The library is accessible via icons.pqoqubbw.dev.

```html
<p>
  If you are looking for animated icons, the <a href="https://icons.pqoqubbw.dev/">pqoqubbw/icons</a> library is a great choice.
</p>
```

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

### Basic HTML Structure for UI

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

Represents a minimal HTML structure often found in web applications, including navigation links to different sections of the documentation and the main application UI.

```html
[ui](/) 

[Docs](/docs)[Components](/docs/components)[Themes](/themes)

[ui](/) 

2.x[GitHub](https://github.com/borabaloglu/9ui)Toggle theme
```

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

### 9ui Design System FAQ: Production Readiness

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

Answers the question about whether the 9ui design system is production-ready, confirming its suitability for live projects.

```jsx
Question: Is it production ready?
Answer: Yes. It is a design system that allows you to create beautiful and customizable components.
```

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

### Preview Card Installation (CLI)

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

Provides the command-line instruction to install the Preview Card component into a project, typically using npx with shadcn-ui.

```bash
npx shadcn@latest add https://9ui.dev/r/preview-card.json
```

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

### 9ui Design System FAQ: Production Readiness

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

Answers the question about whether the 9ui design system is production-ready, confirming its suitability for live projects.

```jsx
Question: Is it production ready?
Answer: Yes. It is a design system that allows you to create beautiful and customizable components.
```

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

### Layout Configuration (layout.tsx)

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

Example of how to wrap your application's children with a root div in the main layout file to apply global styles.

```tsx
<body>
	<div className="root">{children}</div>
</body>
```

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

### Introduction to 9ui Components

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

This snippet details the core philosophy of 9ui: providing customizable components that are integrated directly into projects rather than installed via npm. It highlights the flexibility and adaptability of these components, built upon Base UI and Tailwind CSS.

```markdown
## Introduction

Beautiful, customizable components built with Base UI and Tailwind CSS

This isn’t a standard component library. It’s a curated set of components that you can customize to fit your style.

You won’t install it through npm. Instead, you simply select the components you need and add them directly to your project.

Once included, each component is fully adaptable, letting you fine-tune it to meet your exact requirements.

## Why Base UI?

[Base UI](https://base-ui.com) offers unstyled, headless components with built-in accessibility. This makes it perfect for 9ui, allowing us to integrate Tailwind CSS without forcing any default design. It’s a clean foundation that stays lightweight, letting you adapt every detail to fit your exact needs.

## Is it production-ready?

(Content truncated in input)
```

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

### Introduction to 9ui Components

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

This snippet details the core philosophy of 9ui: providing customizable components that are integrated directly into projects rather than installed via npm. It highlights the flexibility and adaptability of these components, built upon Base UI and Tailwind CSS.

```markdown
## Introduction

Beautiful, customizable components built with Base UI and Tailwind CSS

This isn’t a standard component library. It’s a curated set of components that you can customize to fit your style.

You won’t install it through npm. Instead, you simply select the components you need and add them directly to your project.

Once included, each component is fully adaptable, letting you fine-tune it to meet your exact requirements.

## Why Base UI?

[Base UI](https://base-ui.com) offers unstyled, headless components with built-in accessibility. This makes it perfect for 9ui, allowing us to integrate Tailwind CSS without forcing any default design. It’s a clean foundation that stays lightweight, letting you adapt every detail to fit your exact needs.

## Is it production-ready?

(Content truncated in input)
```

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

### Next.js Component Loading (`ComponentPreview`, `Tabs`, `CommandBlock`)

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

Details the dynamic loading of specific UI components used within the application, such as `ComponentPreview`, `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, and `CommandBlock`. These are likely used for rendering documentation examples or interactive elements.

```javascript
self.__next_f.push([1,"12:I[68206,[\"4969\",\"static/chunks/4969-05b5a8736a6a8ee7.js\",\"8640\",\"static/chunks/8640-8be4a0f89dd7c25b.js\",\"1491\",\"static/chunks/1491-46d499b9525dfd75.js\",\"754\",\"static/chunks/754-8ac61347e3a0269e.js\",\"6457\",\"static/chunks/6457-7941390bcc5f14c8.js\",\"1998\",\"static/chunks/1998-9092e3ecfa97a7d2.js\",\"9582\",\"static/chunks/app/docs/%5B...slug%5D/page-f8e3c06873e4c6d1.js\"],\"ComponentPreview\"]\n13:I[53492,[\"4969\",\"static/chunks/4969-05b5a8736a6a8ee7.js\",\"8640\",\"static/chunks/8640-8be4a0f89dd7c25b.js\",\"1491\",\"static/chunks/1491-46d499b9525dfd75.js\",\"754\",\"static/chunks/754-8ac61347e3a0269e.js\",\"6457\",\"static/chunks/6457-7941390bcc5f14c8.js\",\"1998\",\"static/chunks/1998-9092e3ecfa97a7d2.js\",\"9582\",\"static/chunks/app/docs/%5B...slug%5D/page-f8e3c06873e4c6d1.js\"],\"Tabs\"]\n14:I[53492,[\"4969\",\"static/chunks/4969-05b5a8736a6a8ee7.js\",\"8640\",\"static/chunks/8640-8be4a0f89dd7c25b.js\",\"1491\",\"static/chunks/1491-46d499b9525dfd75.js\",\"754\",\"static/chunks/754-8ac61347e3a0269e.js\",\"6457\",\"static/chunks/6457-7941390bcc5f14c8.js\",\"1998\",\"static/chunks/1998-9092e3ecfa97a7d2.js\",\"9582\",\"static/chunks/app/docs/%5B...slug%5D/page-f8e3c06873e4c6d1.js\"],\"TabsList\"]\n15:I[53492,[\"4969\",\"static/chunks/4969-05b5a8736a6a8ee7.js\",\"8640\",\"static/chunks/8640-8be4a0f89dd7c25b.js\",\"1491\",\"static/chunks/1491-46d499b9525dfd75.js\",\"754\",\"static/chunks/754-8ac61347e3a0269e.js\",\"6457\",\"static/chunks/6457-7941390bcc5f14c8.js\",\"1998\",\"static/chunks/1998-9092e3ecfa97a7d2.js\",\"9582\",\"static/chunks/app/docs/%5B...slug%5D/page-f8e3c06873e4c6d1.js\"],\"TabsTrigger\"]\n16:I[53492,[\"4969\",\"static/chunks/4969-05b5a8736a6a8ee7.js\",\"8640\",\"static/chunks/8640-8be4a0f89dd7c25b.js\",\"1491\",\"static/chunks/1491-46d499b9525dfd75.js\",\"754\",\"static/chunks/754-8ac61347e3a0269e.js\",\"6457\",\"static/chunks/6457-7941390bcc5f14c8.js\",\"1998\",\"static/chunks/1998-9092e3ecfa97a7d2.js\",\"9582\",\"static/chunks/app/docs/%5B...slug%5D/page-f8e3c06873e4c6d1.js\"],\"TabsContent\"]\n17:I[54882,[\"4969\",\"static/chunks/4969-05b5a8736a6a8ee7.js\",\"8640\",\"static/chunks/8640-8be4a0f89dd7c25b.js\",\"1491\",\"static/chunk"],"CommandBlock",1]\n18:I[46918,[\"4969\",\"static/chunks/4969-05b5a8736a6a8ee7.js\",\"8640\",\"static/chunks/8640-8be4a0f89dd7c25b.js\",\"1491\",\"static/chunks/1491-46d499b9525dfd75.js\",\"754\",\"static/chunks/754-8ac61347e3a0269e.js\",\"6457\",\"static/chunks/6457-7941390bcc5f14c8.js\",\"1998\",\"static/chunks/1998-9092e3ecfa97a7d2.js\",\"9582\",\"static/chunks/app/docs/%5B...slug%5D/page-f8e3c06873e4c6d1.js\"],"TabsContent",1]
```

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

### Installation Options

Source: https://9ui.dev/docs/components/emoji-picker

Provides instructions for installing the Emoji Picker, offering both a Command Line Interface (CLI) method and a manual installation process.

```markdown
## Installation

- CLI
- Manual

```

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

### React Navigation Menu Component Example

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

Demonstrates the implementation of a navigation menu component using React. It features nested menus for 'Getting Started' and 'Components', dynamically rendering lists of links with descriptions. Requires a UI library for NavigationMenu and related components.

```typescript
"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 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((item) => (
    								<ListItem
    									key={item.title}
    									title={item.title}
    									href={item.href}
    								>
    									{item.description}
    								</ListItem>
    							))}
    						</ul>
    					</NavigationMenuContent>
    				</NavigationMenuItem>
    			</NavigationMenuList>
    		</NavigationMenu>
    	)
    }
     
    const ListItem = React.forwardRef<
    	HTMLAnchorElement,
    	React.ComponentPropsWithoutRef<"a">
    >(({ className, title, children, ...props }, ref) => {
    	return (
    		<li>
    			<NavigationMenuLink asChild>
    				<a
    					ref={ref}
    					className={cn(
    						"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
    						className
    				)}
    					{...props}
    				>
    					<div className="text-sm font-medium leading-none">{title}</div>
    					<p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
    						{children}
    					</p>
    				</a>
    			</NavigationMenuLink>
    		</li>
    	)
    })
    ListItem.displayName = "ListItem"
```

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

### CLI Installation Commands

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

Provides commands for installing UI components using the shadcn CLI with different package managers. These commands fetch and add component configurations to your project.

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

```bash
yarn dlx shadcn@latest add https://9ui.dev/r/card.json
```

```bash
pnpm dlx shadcn@latest add https://9ui.dev/r/card.json
```

```bash
bunx shadcn@latest add https://9ui.dev/r/card.json
```

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

### Aspect Ratio Component Example (TSX)

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

Demonstrates how to use the AspectRatio component to display content with a defined aspect ratio. The component takes a `ratio` prop to set the aspect ratio, and the content inside will be scaled accordingly. It's useful for responsive layouts where maintaining a specific visual proportion is important.

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

export function AspectRatioDemo() {
	return (
		<AspectRatio
			ratio={16 / 9}
			className="bg-card text-card-foreground rounded-lg border"
		>
			<div className="flex size-full items-center justify-center font-medium">
				Content
			</div>
		</AspectRatio>
	)
}
```

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

### Importing and Using UI Table Components in TSX

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

This snippet demonstrates how to import various table-related components (Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow) from a local UI library and define a static array of movie objects. This setup is foundational for rendering structured data in a tabular format within a React application.

```tsx
import { Table,
	TableBody,
	TableCaption,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";

const movies = [
	{ title: "The Shawshank Redemption", year: 1994, rating: 9.3 },
	{ title: "The Godfather", year: 1972, rating: 9.2 },
	{ title: "The Dark Knight", year: 2008, rating: 9.0 },
	{ title: "Pulp Fiction", year: 1994, rating: 8.9 },
	{ title: "The Lord of the Rings: The Return of the King", year: 2003, rating: 8.9 },
	{ title: "Forrest Gump", year: 1994, rating: 8.8 },
	{ title: "Inception", year: 2010, rating: 8.8 },
	{ title: "Fight Club", year: 1999, rating: 8.8 },
	{ title: "The Matrix", year: 1999, rating: 8.7 },
	{ title: "Goodfellas", year: 1990, rating: 8.7 },
];
```

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

### UI Toggle Component Installation

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

Instructions for installing the UI Toggle component, typically via a command-line interface (CLI).

```bash
cli
```

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

### Install 9ui

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

Instructions on how to install the 9ui library into your project. This typically involves using a package manager like npm or yarn.

```bash
npm install 9ui
# or
yarn add 9ui
```

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

### Disabled Input Component Example

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

Demonstrates how to render a disabled input field using the `@/components/ui/input` component. This example shows the basic setup for a disabled input with a placeholder and a specific container class.

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

export function InputDisabled() {
	return <Input inputContainerClassName="w-80" placeholder="Name" disabled />
}
```

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

### Input Component Installation (CLI)

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

Instructions for adding the Input component to your project using the 9UI CLI. Supports npm, yarn, pnpm, and bun package managers.

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

```bash
yarn dlx shadcn@latest add https://9ui.dev/r/input.json
```

```bash
pnpm dlx shadcn@latest add https://9ui.dev/r/input.json
```

```bash
bunx shadcn@latest add https://9ui.dev/r/input.json
```

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

### Emoji Picker Usage Example

Source: https://9ui.dev/docs/components/emoji-picker

A practical example demonstrating how to import and use the EmojiPicker component within a TypeScript/React application. This snippet illustrates the basic setup for integrating the emoji picker into your UI.

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

// Example usage within a component:
// <EmojiPicker>
//   <EmojiPickerContent>
//     <EmojiPickerList>
//       {/* Render individual emojis or emoji groups here */}
//     </EmojiPickerList>
//   </EmojiPickerContent>
// </EmojiPicker>

```

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

### Next.js Dark Mode Setup Guide

Source: https://9ui.dev/docs/getting-started/dark-mode

This snippet outlines the structure for setting up dark mode in a Next.js project. It includes navigation elements, page titles, descriptions, and links to specific implementation guides for different frameworks.

```javascript
self.__next_f.push([
  "a:\",\"$\",\"main\",null,{\"className\":\"relative grid xl:grid-cols-\"[1fr_240px] xl:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen min-w-0 py-4\",\"children\":[[\"$\",\"nav\",null,{\"aria-label\":\"breadcrumb\",\"data-slot\":\"breadcrumb\",\"className\":\"mb-2\",\"children\":[\"$\",\"ol\",null,{\"data-slot\":\"breadcrumb-list\",\"className\":\"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5\",\"children\":[[\"$\",\"$1\",\"/docs/getting-started\",{\"children\":[[\"$\",\"li\",null,{\"data-slot\":\"breadcrumb-item\",\"className\":\"inline-flex items-center gap-1.5\",\"children\":[[\"$\",\"a\",null,{\"data-slot\":\"breadcrumb-link\",\"className\":\"hover:text-foreground transition-colors\",\"href\":\"/docs/getting-started\",\"children\":\"Getting Started\"}]}]],[\"$\",\"li\",null,{\"data-slot\":\"breadcrumb-separator\",\"role\":\"presentation\",\"aria-hidden\":\"true\",\"className\":\"[\u0026\u003esvg]:size-3.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"}]}]],[]}]}],[[\"$\",\"$1\",\"/docs/getting-started/dark-mode\",{\"children\":[[\"$\",\"li\",null,{\"data-slot\":\"breadcrumb-item\",\"className\":\"inline-flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"breadcrumb-page\",\"role\":\"link\",\"aria-disabled\":\"true\",\"aria-current\":\"page\",\"className\":\"text-foreground font-normal\",\"children\":\"Dark Mode\"}]}],false]}]],[]}]}]],[[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold\",\"children\":\"Dark Mode\"}],[\"$\",\"title\",null,{\"children\":\"Dark Mode | 9ui\"}]],\"\\n\",[[\"$\",\"p\",null,{\"className\":\"text-muted-foreground mt-2\",\"children\":\"Setting up dark mode in your project.\"}],[\"$\",\"meta\",null,{\"name\":\"description\",\"content\":\"Setting up dark mode in your project.\"}]],\"\\n\",[[\"$\",\"div\",null,{\"className\":\"mt-4 grid grid-cols-1 gap-4 md:grid-cols-2\",\"children\":[[\"$\",\"$L12\",null,{\"className\":\"bg-card text-card-foreground hover:bg-card/80 flex w-full flex-col items-center justify-center gap-3 rounded-lg border p-10 font-medium shadow transition-colors md:p-10\",\"href\":\"/docs/getting-started/dark-mode/next\",\"children\":[[\"$\",\"svg\",null,{\"role\":\"img\",\"viewBox\":\"0 0 24 24\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":\"24\",\"height\":\"24\",\"fill\":\"currentColor\",\"className\":\"size-10\",\"children\":[[\"$\",\"title\",null,{\"children\":\"Next.js\"}],[\"$\",\"path\",null,{\"d\":\"$13\"}]]}],[\"$\",\"p\",null,{\"children\":\"Next.js\"}]]}],[\"$\",\"$L12\",null,{\"className\":\"bg-card text-card-foreground hover:bg-card/80 flex w-full flex-col items-center justif"}]],[]}]],[]}]])
```

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

### Install Context Menu Component

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

Command-line instruction to add the Context Menu component to your project using npx. This command fetches the necessary configuration files and dependencies.

```Shell
npx shadcn@latest add https://9ui.dev/r/context-menu.json
```

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

### Install 9ui.dev Form Dependencies (Manual)

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

Lists the necessary dependencies for the 9ui.dev form component and provides installation commands for npm, yarn, pnpm, and bun. Ensure these are installed before using the component manually.

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

```bash
yarn add react-hook-form zod @hookform/resolvers
```

```bash
pnpm add react-hook-form zod @hookform/resolvers
```

```bash
bun add react-hook-form zod @hookform/resolvers
```

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

### External Script Inclusion

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

Includes an external JavaScript file for enhanced functionality, loaded after the initial page render.

```html
<script src="https://cdn.seline.so/seline.js" data-token="49f39f0c0218b41" strategy="afterInteractive"></script>
```

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

### Manual Installation of Drawer Component

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

Steps for manually installing the Drawer component, including installing necessary dependencies and copying the component's code into your project.

```bash
Install the following dependencies:
npm install vaul-base

yarn add vaul-base

pnpm add vaul-base

bun add vaul-base
```

```tsx
"use client"

```

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

### 404 Error Page Structure

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

Defines the structure and content for a 404 Not Found error page, including styling and messaging.

```html
<div>
  <h1>404</h1>
  <div>
    <h2>This page could not be found.</h2>
  </div>
</div>
```

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

### Movie Data Structure

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

Represents a collection of movie details, including title, year, and rating. This data is extracted from a syntax-highlighted structure.

```json
[
  {
    "title": "The Lord of the Rings: The Return of the King",
    "year": 2003,
    "rating": 9.0
  },
  {
    "title": "Pulp Fiction",
    "year": 1994,
    "rating": 8.9
  },
  {
    "title": "The Lord of the Rings: The Fellowship of the Ring",
    "year": 2001,
    "rating": 8.8
  }
]
```

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

### Drawer Component Example

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

Demonstrates the usage of the Drawer component, including its trigger, content, header, title, description, and footer. It shows how to import these components and pass relevant props for styling and functionality.

```typescript
import { cn } from "@/lib/utils";
import { DrawerFooter } from "@/components/ui/drawer";
import { DrawerHeader } from "@/components/ui/drawer";
import { DrawerTitle } from "@/components/ui/drawer";
import { DrawerDescription } from "@/components/ui/drawer";
import { DrawerClose } from "@/components/ui/drawer";
import { DrawerContent } from "@/components/ui/drawer";
import { Drawer } from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";
import { DrawerTrigger } from "@/components/ui/drawer";

export function DrawerDemo() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Open drawer</Button>
      </DrawerTrigger>
      <DrawerContent className="flex flex-col gap-1.5 p-4">
        <DrawerHeader>
          <DrawerTitle>Edit profile</DrawerTitle>
          <DrawerDescription>Make changes to your profile here. Click save, when you're done.</DrawerDescription>
        </DrawerHeader>
        <DrawerFooter className="mt-auto flex flex-col gap-1">
          <DrawerClose asChild>
            <Button variant="outline">Cancel</Button>
          </DrawerClose>
          <Button>Save changes</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}
```

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

### Monicon Icon Usage

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

Demonstrates how to use the Monicon icon component from the 9ui library. Monicon offers over 200,000 icons from various popular libraries.

```tsx
import { Icon } from '9ui';

function MyComponent() {
  return (
    <Icon name="Monicon" />
  );
}
```

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

### Install Preview Card Component

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

Instructions for installing the Preview Card component using the shadcn-ui CLI. Supports npm, yarn, pnpm, and bun package managers.

```bash
npx shadcn@latest add https://9ui.dev/r/preview-card.json
```

```bash
yarn dlx shadcn@latest add https://9ui.dev/r/preview-card.json
```

```bash
pnpm dlx shadcn@latest add https://9ui.dev/r/preview-card.json
```

```bash
bunx shadcn@latest add https://9ui.dev/r/preview-card.json
```

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

### Install Select Component via CLI

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

Installs the Select component using the shadcn-ui CLI. Supports multiple package managers for seamless integration into your project.

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

```bash
yarn dlx shadcn@latest add https://9ui.dev/r/select.json
```

```bash
pnpm dlx shadcn@latest add https://9ui.dev/r/select.json
```

```bash
bunx shadcn@latest add https://9ui.dev/r/select.json
```

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

### Global CSS Configuration (globals.css)

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

Configuration for Tailwind CSS, including base styles and custom utility classes like `.root` for project-specific styling.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* Existing code */
 
@layer base {
	.root {
		@apply isolate;
	}
}
```

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

### Input OTP Component Usage Example

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

Demonstrates how to import and use the OTPInput component in a React/TypeScript application. It shows basic setup and context usage.

```tsx
"use client"

import * as React from "react"
import { OTPInput, OTPInputContext } from "react-otp-input"

function MyOTPInput() {
  const [otp, setOtp] = React.useState("")
  const { isFocused } = React.useContext(OTPInputContext)

  return (
    <OTPInput
      value={otp}
      onChange={setOtp}
      numInputs={6}
      renderInput={(props) => (
        <div
          className={[
            "flex h-10 w-10 items-center justify-center border-b-2 border-gray-300 text-lg",
            isFocused ? "border-blue-500 text-blue-500" : "",
          ].join(" ")}
          {...props}
        />
      )}
    />
  )
}

export default MyOTPInput

```

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

### Install 9ui Input Component

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

Provides the command to install the 9ui Input component using the shadcn/ui CLI. This command fetches the necessary component files and integrates them into your project.

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

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

### Table Component Anatomy

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

Illustrates the structural anatomy of the Table component, showing its constituent elements like Table, TableCaption, TableHeader, TableRow, and TableCell.

```HTML
<Table>
	<TableCaption />
	<TableHeader>
		<TableRow>
			<TableHead />
		</TableRow>
	</TableHeader>
	<TableBody>
		<TableRow>
			<TableCell />
		</TableRow>
	</TableBody>
</Table>
```

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

### Installation Command

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

Provides the command-line instruction to add the 9ui Switch component to your project using the shadcn-ui CLI.

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