### Create Tanstack Start Project

Source: https://www.nocta-ui.com/docs/tanstack

Initializes a new Tanstack Start project with Tailwind CSS support. This command requires npm to be installed and sets up the basic project structure.

```bash
npm create @tanstack/start@latest my-app --tailwind
cd my-app
```

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

### Create Vite Project with React and TypeScript

Source: https://www.nocta-ui.com/docs/vite

Initializes a new Vite project with the React and TypeScript template. It then navigates into the project directory and installs the initial dependencies.

```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
```

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

### Install and Import NOCTA UI Input Component

Source: https://www.nocta-ui.com/docs/input

Instructions for installing the Input component using the nocta-ui CLI and importing it into your project. This is the initial setup step before using the component.

```bash
npx @nocta-ui/cli add input
```

```javascript
import { Input } from '@/components/ui/input';
```

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

### Install NOCTA UI Pagination Component

Source: https://www.nocta-ui.com/docs/pagination

Installs the Pagination component using the nocta-ui CLI. This command-line tool automates the setup process for adding the component to your project.

```bash
npx @nocta-ui/cli add pagination
```

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

### Add NOCTA UI Components using CLI

Source: https://www.nocta-ui.com/docs/cli-guide/add

Installs one or more Nocta UI components into your configured workspaces. This command downloads source files, writes them to the correct packages, normalizes imports, and installs any required npm dependencies. The `--dry-run` flag allows you to preview the planned actions without modifying files or dependencies.

```bash
npx @nocta-ui/cli add button card avatar
# Preview the plan without touching disk or dependencies
npx @nocta-ui/cli add dialog --dry-run
```

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

### Create React Router Project

Source: https://www.nocta-ui.com/docs/reactrouter

Initializes a new React Router project using the `create-react-router` command-line tool. This command sets up the basic file structure and dependencies for a new React Router application.

```bash
npx create-react-router@latest my-app
cd my-app
```

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

### Usage Example of Nocta UI Components in React Router

Source: https://www.nocta-ui.com/docs/reactrouter

Demonstrates how to import and use Nocta UI components (Button, Card, Badge) within a React Router application. It shows basic usage with props for customization and structure.

```javascript
import { Button } from '~/components/ui/button';
import { Card, CardHeader, CardContent, CardTitle } from '~/components/ui/card';
import { Badge } from '~/components/ui/badge';

export default function Home() {
  return (
    <div className="p-8">
      <Card className="max-w-md">
        <CardHeader>
          <CardTitle>Welcome to Nocta UI</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <Button variant="default">
              Get Started
            </Button>
            <Badge variant="secondary">
              React Router Ready
            </Badge>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
```

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

### Create Next.js Project with Nocta UI Dependencies

Source: https://www.nocta-ui.com/docs/nextjs

This command creates a new Next.js project with essential configurations like TypeScript, ESLint, Tailwind CSS, and App Router, pre-set for Nocta UI integration.

```bash
npx create-next-app@latest my-app \
  --typescript \
  --eslint \
  --tailwind \
  --app \
  --turbopack \
  --import-alias "@/*"
cd my-app
```

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

### Initialize Nocta UI in Next.js Project

Source: https://www.nocta-ui.com/docs/nextjs

Initialize Nocta UI in your existing Next.js project. This command automatically installs all the necessary dependencies for Nocta UI to function correctly.

```bash
npx @nocta-ui/cli init
```

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

### List Nocta UI Components from Registry CLI

Source: https://www.nocta-ui.com/docs/cli-guide/list

This command queries the Nocta registry and prints an organized catalog of available components, grouped by category. It displays descriptions, variants, and sizes, and helps discover component names for the 'nocta-ui add' command. The command is read-only and does not install dependencies.

```bash
npx @nocta-ui/cli list
```

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

### Install and Add Components with Nocta CLI

Source: https://www.nocta-ui.com/docs/monorepo

Installs new UI components and adds them to the shared package using the Nocta CLI. The CLI handles updating component source files, export barrels, and managing workspace dependencies. This command should be run from the application workspace.

```bash
npx @nocta-ui/cli add button card
```

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

### Installation

Source: https://www.nocta-ui.com/docs/navigation-menu

Instructions for installing the Navigation Menu component using the nocta-ui CLI and importing necessary primitives.

```APIDOC
## Installation

Install the Navigation Menu component with the nocta-ui CLI:

```bash
npx @nocta-ui/cli add navigation-menu
```

Import the primitives you need for your navigation structure:

```javascript
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuGroup,
  NavigationMenuLink,
} from '@/components/ui/navigation-menu';
```
```

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

### Installation

Source: https://www.nocta-ui.com/docs/wheel-picker

Instructions on how to install the Wheel Picker component using the nocta-ui CLI and import its components.

```APIDOC
## Installation

Install the Wheel Picker via the nocta-ui CLI:

```bash
npx @nocta-ui/cli add wheel-picker
```

Import the components you need:

```javascript
import {
  WheelPicker,
  WheelPickerGroup,
  WheelPickerItem,
} from '@/components/ui/wheel-picker';
```
```

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

### Install Tailwind CSS for Vite

Source: https://www.nocta-ui.com/docs/vite

Installs Tailwind CSS and its Vite plugin as development dependencies. This is a prerequisite for styling with Tailwind CSS in a Vite project.

```bash
npm install tailwindcss @tailwindcss/vite
```

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

### Install NOCTA UI Context Menu

Source: https://www.nocta-ui.com/docs/context-menu

Installs the Context Menu component using the nocta-ui CLI. This is the first step before importing and using the component in your project.

```bash
npx @nocta-ui/cli add context-menu
```

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

### Install Command Palette using CLI

Source: https://www.nocta-ui.com/docs/command-k

Installs the Command Palette component using the nocta-ui CLI. This command initiates the installation process for the necessary files and configurations.

```bash
npx @nocta-ui/cli add command-k
```

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

### Install NOCTA UI Tabs Component

Source: https://www.nocta-ui.com/docs/tabs

Installs the Tabs component using the nocta-ui CLI. This is the first step before importing and using the component in your project.

```bash
npx @nocta-ui/cli add tabs
```

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

### Install NOCTA UI Table Component

Source: https://www.nocta-ui.com/docs/table

Instructions to install the Table component using the nocta-ui CLI. This is the first step before importing the component into your project.

```bash
npx @nocta-ui/cli add table
```

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

### Default Pie Chart Example

Source: https://www.nocta-ui.com/docs/pie-chart

A basic example of a Pie Chart, showcasing its default appearance and functionality. This serves as a starting point for implementing pie charts in your application.

```javascript
// Code for Default Pie Chart example would go here
```

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

### Add Nocta UI Components via CLI

Source: https://www.nocta-ui.com/docs/nextjs

Add specific Nocta UI components to your project using the Nocta UI CLI. This allows for modular integration of UI elements like buttons, cards, and badges.

```bash
npx @nocta-ui/cli add button
npx @nocta-ui/cli add card
npx @nocta-ui/cli add badge
```

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

### Install Tooltip with CLI

Source: https://www.nocta-ui.com/docs/tooltip

Installs the Tooltip component into your project using the nocta-ui CLI. This is the first step to using the tooltip functionality.

```bash
npx @nocta-ui/cli add tooltip
```

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

### Install Toggle Component using CLI

Source: https://www.nocta-ui.com/docs/toggle

This command installs the Toggle component using the nocta-ui CLI. Ensure you have Node.js and npm/npx installed to run this command.

```bash
npx @nocta-ui/cli add toggle
```

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

### Install Kbd Component using NOCTA UI CLI

Source: https://www.nocta-ui.com/docs/kbd

This command installs the Kbd component using the nocta-ui CLI. Ensure you have Node.js and npm/npx installed. This is the first step before importing the component into your project.

```bash
npx @nocta-ui/cli add kbd
```

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

### Command Palette Installation

Source: https://www.nocta-ui.com/docs/command-k

Instructions for installing and importing the Command Palette component using the nocta-ui CLI.

```APIDOC
## Installation

Install the Command Palette component using the nocta-ui CLI:

```bash
npx @nocta-ui/cli add command-k
```

Import the component:

```javascript
import { CommandK } from '@/components/ui/command-k';
```
```

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

### Install NOCTA UI Button Component

Source: https://www.nocta-ui.com/docs/button

Installs the Button component using the nocta-ui CLI. This is the first step to integrate the button into your project.

```bash
npx @nocta-ui/cli add button
```

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

### Configure TypeScript tsconfig.app.json for Path Aliases

Source: https://www.nocta-ui.com/docs/vite

Updates the `tsconfig.app.json` file to include `baseUrl` and `paths` compiler options. This complements the main `tsconfig.json` for IDE path resolution.

```json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".", 
    "paths": {
      "@/*": [ 
        "./src/*"
      ]
    } 
    // ...
  }
}
```

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

### Install NOCTA UI Card Component

Source: https://www.nocta-ui.com/docs/card

Instructions to install the Card component using the nocta-ui CLI. This command adds the necessary files to your project.

```bash
npx @nocta-ui/cli add card
```

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

### Install Skeleton Component using CLI

Source: https://www.nocta-ui.com/docs/skeleton

Instructions to install the Skeleton component using the nocta-ui CLI. This is a prerequisite for using the component in your project.

```bash
npx @nocta-ui/cli add skeleton
```

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

### Install Calendar Component with CLI

Source: https://www.nocta-ui.com/docs/calendar

Installs the Calendar component into your project using the nocta-ui command-line interface. Ensure you have Node.js and npm/npx installed.

```bash
npx @nocta-ui/cli add calendar
```

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

### Import NOCTA UI Alert Components

Source: https://www.nocta-ui.com/docs/alert

Example of how to import the Alert, AlertTitle, and AlertDescription components from the '@/components/ui/alert' path after installation. These imports are necessary to use the components in your React application.

```javascript
import {
  Alert,
  AlertTitle,
  AlertDescription,
} from '@/components/ui/alert';

```

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

### Installation and Usage

Source: https://www.nocta-ui.com/docs/chat

Instructions on how to install the Chat component using the nocta-ui CLI and import necessary components.

```APIDOC
## Installation and Usage

Install the Chat component using the nocta-ui CLI:
```bash
npx @nocta-ui/cli add chat
```

Then import the components you need:
```javascript
import {
  Chat,
  ChatMessages,
  ChatMessage,
  ChatInput,
  ChatActions,
  TypingIndicator,
  type ChatMessage,
  type TypingUser,
} from '@/components/ui/chat';
```
```

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

### Button Component Installation and Usage

Source: https://www.nocta-ui.com/docs/button

Instructions on how to install the Button component using the nocta-ui CLI and import it into your project.

```APIDOC
## Installation

Install the Button component using the nocta-ui CLI:

```bash
npx @nocta-ui/cli add button
```

Then import the components you need:

```javascript
import { Button } from '@/components/ui/button';
```
```

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

### Install NOCTA UI Select Component

Source: https://www.nocta-ui.com/docs/select

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

```bash
npx @nocta-ui/cli add select
```

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

### Install NOCTA UI Alert Component

Source: https://www.nocta-ui.com/docs/alert

Instructions for installing the Alert component using the nocta-ui CLI. This command-line interface tool helps in adding specific components to your project.

```bash
npx @nocta-ui/cli add alert
```

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

### Install OTP Input using NOCTA UI CLI

Source: https://www.nocta-ui.com/docs/otp-input

Installs the OTP Input component using the nocta-ui command-line interface. This is the primary method for adding the component to your project.

```bash
npx @nocta-ui/cli add otp-input
```

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

### Install NOCTA UI Toast Component

Source: https://www.nocta-ui.com/docs/toast

Installs the Toast component using the nocta-ui CLI. This is the initial step to integrate the toast notifications into your project.

```bash
npx @nocta-ui/cli add toast
```

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

### Install NOCTA UI Sidebar

Source: https://www.nocta-ui.com/docs/sidebar

Installs the Sidebar package using the nocta-ui CLI. This is the initial step to add the sidebar functionality to your project. It does not require any specific inputs other than running the command.

```bash
npx @nocta-ui/cli add sidebar
```

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

### Install Progress Component using CLI

Source: https://www.nocta-ui.com/docs/progress

Installs the Progress component into your project using the nocta-ui CLI. This command adds the necessary files and dependencies for the component.

```bash
npx @nocta-ui/cli add progress
```

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

### Install NOCTA UI Sheet Component

Source: https://www.nocta-ui.com/docs/sheet

Installs the Sheet component using the nocta-ui CLI. This is the first step to integrate the component into your project.

```bash
npx @nocta-ui/cli add sheet
```

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

### Dropdown Menu Installation

Source: https://www.nocta-ui.com/docs/dropdown-menu

Instructions on how to install the Dropdown Menu component using the nocta-ui CLI and import it into your project.

```APIDOC
## Installation

Install the Dropdown Menu component using the nocta-ui CLI:

```bash
npx @nocta-ui/cli add dropdown-menu
```

Import the component:

```javascript
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu';
```
```

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

### nocta.workspace.json Structure Example

Source: https://www.nocta-ui.com/docs/cli-guide/config

This JSON object illustrates the structure of the nocta.workspace.json file, which serves as a manifest for tracking workspaces within a monorepo. It includes package manager details, the repository root, and an array of workspace definitions, each specifying its name, kind, package name, root directory, and configuration file path.

```json
{
  "packageManager": "pnpm",
  "repoRoot": ".",
  "workspaces": [
    {
      "name": "@workspace/ui",
      "kind": "ui",
      "packageName": "@workspace/ui",
      "root": "packages/ui",
      "config": "packages/ui/nocta.config.json"
    },
    {
      "name": "@workspace/admin",
      "kind": "app",
      "packageName": "@workspace/admin",
      "root": "apps/admin",
      "config": "apps/admin/nocta.config.json"
    }
  ]
}
```

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

### Install NOCTA UI Form Component

Source: https://www.nocta-ui.com/docs/form

Installs the Form component using the nocta-ui CLI. No specific dependencies are required beyond the CLI itself.

```bash
npx @nocta-ui/cli add form
```

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

### Nocta CLI: Single Workspace Config (JSON)

Source: https://www.nocta-ui.com/docs/cli-guide/config

Example nocta.config.json for a single workspace at the repository root, representing a standalone application like a Next.js project. It defines Tailwind CSS path, component/utility aliases, and alias prefixes. No 'packageName' is needed when the workspace is at the repo root.

```json
{
  "$schema": "https://nocta-ui.com/registry/schema/config-schema.json",
  "style": "default",
  "tailwind": {
    "css": "app/globals.css"
  },
  "aliases": {
    "components": "components/ui",
    "utils": "lib/utils"
  },
  "aliasPrefixes": {
    "components": "@",
    "utils": "@"
  },
  "workspace": {
    "kind": "app",
    "root": "."
  }
}
```

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

### Install Dialog Component using NOCTA UI CLI

Source: https://www.nocta-ui.com/docs/dialog

This command installs the Dialog component and its dependencies using the NOCTA UI command-line interface. Ensure you have Node.js and npm/npx installed to execute this command.

```bash
npx @nocta-ui/cli add dialog
```

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

### Install Switch Component with noxta-ui CLI

Source: https://www.nocta-ui.com/docs/switch

Installs the Switch component using the noxta-ui command-line interface. This is the primary method for adding the component to your project.

```bash
npx @nocta-ui/cli add switch
```

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

### Install Pie Chart Component using CLI

Source: https://www.nocta-ui.com/docs/pie-chart

Installs the Pie Chart component using the nocta-ui CLI. This is the first step to using the component in your project.

```bash
npx @nocta-ui/cli add pie-chart
```

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

### Install Wheel Picker via CLI

Source: https://www.nocta-ui.com/docs/wheel-picker

This command installs the Wheel Picker component using the nocta-ui CLI. It is the first step to integrate the component into your project.

```bash
npx @nocta-ui/cli add wheel-picker
```

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

### Install Separator Component with NOCTA UI CLI

Source: https://www.nocta-ui.com/docs/separator

Installs the Separator component using the nocta-ui CLI. This is the first step to using the component in your project.

```bash
npx @nocta-ui/cli add separator
```

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

### Install Menubar with NOCTA UI CLI

Source: https://www.nocta-ui.com/docs/menubar

Installs the Menubar component using the `nocta-ui` command-line interface. This is the primary method for adding the component to your project.

```bash
npx @nocta-ui/cli add menubar
```

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

### Install NOCTA UI Spinner Component

Source: https://www.nocta-ui.com/docs/spinner

Instructions to install the Spinner component using the nocta-ui CLI. This command adds the necessary files to your project for the Spinner component.

```bash
npx @nocta-ui/cli add spinner
```

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

### Install Chat Component using CLI

Source: https://www.nocta-ui.com/docs/chat

Instructions to install the Chat component using the nocta-ui CLI. This command adds the necessary files to your project.

```bash
npx @nocta-ui/cli add chat
```

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

### Install NOCTA UI Slider

Source: https://www.nocta-ui.com/docs/slider

Instructions for installing the Slider component using the nocta-ui CLI. This is the initial step required before importing and using the component in your project.

```bash
npx @nocta-ui/cli add slider
```

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

### Install NOCTA UI Textarea Component

Source: https://www.nocta-ui.com/docs/textarea

Instructions for installing the Textarea component using the nocta-ui CLI. This command-line interface tool helps in adding specific components to your project.

```bash
npx @nocta-ui/cli add textarea
```

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

### Install Button Group using CLI

Source: https://www.nocta-ui.com/docs/button-group

Installs the Button Group component using the nocta-ui CLI. This is the first step to integrate the component into your project.

```bash
npx @nocta-ui/cli add button-group
```

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

### Default Combobox Example

Source: https://www.nocta-ui.com/docs/combobox

A basic example showcasing the default appearance and functionality of the Combobox component, allowing users to select a framework from a list.

```html
<Combobox placeholder="Select a framework..."></Combobox>
```

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

### Install Line Chart Component using CLI

Source: https://www.nocta-ui.com/docs/line-chart

Installs the Line Chart component using the nocta-ui CLI. This is the initial step to integrate the component into your project.

```bash
npx @nocta-ui/cli add line-chart
```

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

### Install Hovercard Component with CLI

Source: https://www.nocta-ui.com/docs/hovercard

Installs the Hovercard component using the nocta-ui CLI. This command fetches and sets up the necessary files for the component within your project.

```bash
npx @nocta-ui/cli add hovercard
```

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

### Install Badge Component with NOCTA UI CLI

Source: https://www.nocta-ui.com/docs/badge

Installs the Badge component using the NOCTA UI CLI. This command is the first step in integrating the Badge component into your project.

```bash
npx @nocta-ui/cli add badge
```

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

### Initialize Repository Root with Bun

Source: https://www.nocta-ui.com/docs/monorepo

Commands to create a new directory, navigate into it, and initialize a new project using Bun's `init` command. This sets up the basic project structure and `package.json` file.

```bash
mkdir nocta-bun-monorepo
cd nocta-bun-monorepo
bun init --yes
```

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

### Install NOCTA UI Radio Group Component

Source: https://www.nocta-ui.com/docs/radio-group

Install the Radio Group component using the nocta-ui CLI. This command adds the necessary files to your project.

```bash
npx @nocta-ui/cli add radio-group
```

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

### Nocta CLI: App Linking Shared UI Config (JSON)

Source: https://www.nocta-ui.com/docs/cli-guide/config

Example nocta.config.json for an application workspace that links to a shared UI package. It specifies the application's Tailwind entry point and delegates component installs to the linked workspace. Paths in 'linkedWorkspaces.config' are relative to the current workspace.

```json
{
  "$schema": "https://nocta-ui.com/registry/schema/config-schema.json",
  "style": "default",
  "tailwind": {
    "css": "app/globals.css"
  },
  "aliases": {
    "components": "components/ui",
    "utils": "lib/utils"
  },
  "aliasPrefixes": {
    "components": "@",
    "utils": "@"
  },
  "workspace": {
    "kind": "app",
    "packageName": "web",
    "root": "apps/web",
    "linkedWorkspaces": [
      {
        "kind": "ui",
        "packageName": "ui",
        "root": "packages/ui",
        "config": "../../packages/ui/nocta.config.json"
      }
    ]
  }
}
```

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

### Initialize Nocta UI CLI

Source: https://www.nocta-ui.com/docs/cli-guide/init

The `init` command bootstraps the current workspace to consume Nocta UI components. It analyzes the project structure, writes `nocta.config.json`, updates the repository manifest, and prepares shared helpers. The `--dry-run` flag previews actions without modifying the filesystem.

```bash
npx @nocta-ui/cli init
# Preview without touching the filesystem
npx @nocta-ui/cli init --dry-run
```

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

### Install File Upload Component using CLI

Source: https://www.nocta-ui.com/docs/file-upload

Installs the File Upload component using the nocta-ui CLI. This is the first step to integrate the component into your project.

```bash
npx @nocta-ui/cli add file-upload
```

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

### Nocta CLI: Shared UI Workspace with Export Barrel Config (JSON)

Source: https://www.nocta-ui.com/docs/cli-guide/config

Example nocta.config.json for a shared UI workspace. It defines Tailwind CSS path, component/utility aliases, and configures an export barrel for components. This setup allows the CLI to manage component files and updates within the UI package.

```json
{
  "$schema": "https://nocta-ui.com/registry/schema/config-schema.json",
  "style": "default",
  "tailwind": {
    "css": "src/styles.css"
  },
  "aliases": {
    "components": "src/components/ui",
    "utils": "src/lib/utils"
  },
  "aliasPrefixes": {
    "components": "@",
    "utils": "@"
  },
  "exports": {
    "components": {
      "barrel": "src/index.ts",
      "strategy": "named"
    }
  },
  "workspace": {
    "kind": "ui",
    "packageName": "ui",
    "root": "packages/ui"
  }
}
```

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

### Install Combobox Component with NOCTA UI CLI

Source: https://www.nocta-ui.com/docs/combobox

Instructions on how to install the Combobox component using the NOCTA UI command-line interface. This is the first step before importing and using the component in your project.

```bash
npx @nocta-ui/cli add combobox
```

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

### Install Navigation Menu Component with NOCTA UI CLI

Source: https://www.nocta-ui.com/docs/navigation-menu

Installs the Navigation Menu component using the nocta-ui CLI. This is the primary method for adding the component to your project.

```bash
npx @nocta-ui/cli add navigation-menu
```

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

### Install Checkbox Card Component with NOCTA UI CLI

Source: https://www.nocta-ui.com/docs/checkbox-card

Installs the Checkbox Card component using the nocta-ui command-line interface. This is the first step to add the component to your project.

```bash
npx @nocta-ui/cli add checkbox-card
```

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

### Default Hovercard Example

Source: https://www.nocta-ui.com/docs/hovercard

A basic example showcasing the default usage of the Hovercard component. This demonstrates how to implement a hovercard that displays lightweight profiles or previews on pointer hover.

```jsx
<Hovercard>
  <HovercardTrigger>Hover for details</HovercardTrigger>
  <HovercardContent>
    {/* Content to display on hover */}
  </HovercardContent>
</Hovercard>

```

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

### Set up Next.js App with Bun

Source: https://www.nocta-ui.com/docs/monorepo

Commands to create a new Next.js application within the monorepo's `apps/web` directory using Bun's `create next-app` command. This sets up the client-side application.

```bash
cd ../../
mkdir -p apps/web
cd apps/web
bun create next-app@latest . --yes
```

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

### Default Table Example (React JSX)

Source: https://www.nocta-ui.com/docs/table

A basic example showcasing the default rendering of the NOCTA UI Table component. This serves as a starting point for displaying data in a tabular format.

```jsx
  <Table
    columns={columns}
    data={data}
  />
```

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

### Import NOCTA UI Slider Component

Source: https://www.nocta-ui.com/docs/slider

Demonstrates how to import the Slider component into your JavaScript or TypeScript project after installation. This allows you to start using the component in your application.

```javascript
import { Slider } from '@/components/ui/slider';
```

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

### Scaffold and Configure UI Package (Bun)

Source: https://www.nocta-ui.com/docs/monorepo

Commands to create a new UI package directory, initialize it with Bun, and add necessary development dependencies like `tsc-alias`, `rimraf`, `concurrently`, and `tailwindcss`. This prepares the shared UI workspace.

```bash
mkdir -p packages/ui
cd packages/ui
bun init --yes
bun add -D tsc-alias rimraf concurrently tailwindcss
```

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

### Configure TypeScript tsconfig.json for Path Aliases

Source: https://www.nocta-ui.com/docs/vite

Modifies the `tsconfig.json` file to include `baseUrl` and `paths` properties within `compilerOptions`. This allows for module path aliasing, such as resolving '@/*' to './src/*'.

```json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": { 
    "baseUrl": ".", 
    "paths": { 
      "@/*": ["./src/*"] 
    } 
  } 
}
```

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

### Configure Vite for Path Aliases

Source: https://www.nocta-ui.com/docs/vite

Configures the `vite.config.ts` file to resolve module paths using Node.js's `path` module. It sets up an alias for '@' to point to the './src' directory, enabling the use of absolute imports.

```typescript
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()], 
  resolve: { 
    alias: { 
      "@": path.resolve(__dirname, "./src"), 
    },
  },
})
```

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

### Import and Use Nocta UI Components in Next.js

Source: https://www.nocta-ui.com/docs/nextjs

Demonstrates how to import and utilize Nocta UI components such as Button, Card, and Badge within a Next.js application's React components. Ensure components are correctly imported from the '@/components/ui' path.

```jsx
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

export default function Home() {
  return (
    <div className="p-8">
      <Card className="max-w-md">
        <CardHeader>
          <CardTitle>Welcome to Nocta UI</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <Button variant="default">
              Get Started
            </Button>
            <Badge variant="secondary">
              Next.js Ready
            </Badge>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
```

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

### Import and Use Nocta UI Components in React

Source: https://www.nocta-ui.com/docs/vite

Demonstrates how to import and use Nocta UI components like Button, Card, and Badge within a React functional component. It utilizes the configured path alias '@' for importing components from the 'src' directory.

```jsx
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

function App() {
  return (
    <div className="p-8">
      <Card className="max-w-md">
        <CardHeader>
          <CardTitle>Welcome to Nocta UI</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <Button variant="default">
              Get Started
            </Button>
            <Badge variant="secondary">
              Vite Ready
            </Badge>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export default App;
```

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

### Rebuild or Watch Shared UI Package with Bun

Source: https://www.nocta-ui.com/docs/monorepo

Commands to rebuild or continuously watch the shared UI package for changes using Bun. This ensures that compiled artifacts remain up-to-date after component installations or code modifications. These commands are executed using Bun's filtering capabilities.

```bash
bun run --filter ui build
# or keep everything hot
bun run --filter ui dev
```

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

### Scroll Area Installation

Source: https://www.nocta-ui.com/docs/scroll-area

Instructions on how to install the Scroll Area component using the nocta-ui CLI and how to import it into your project.

```APIDOC
## Installation

Install the Scroll Area component using the nocta-ui CLI:

```bash
npx @nocta-ui/cli add scroll-area
```

Import the pieces you need:

```javascript
import { ScrollArea } from '@/components/ui/scroll-area';
```
```

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

### Default Select Example (React)

Source: https://www.nocta-ui.com/docs/select

A basic example of the Select component in React. It displays a simple dropdown for selecting an option.

```javascript
  <Select>
    <SelectTrigger>
      <SelectValue placeholder="Select a fruit" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="orange">Orange</SelectItem>
    </SelectContent>
  </Select>

```

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

### Infinite Wheel Picker Example

Source: https://www.nocta-ui.com/docs/wheel-picker

Demonstrates the 'infinite' prop for the WheelPicker, allowing for continuous scrolling. This example shows a time selection with hours.

```javascript
import {
  WheelPicker,
  WheelPickerItem,
} from '@/components/ui/wheel-picker';

<WheelPicker infinite defaultValue="08">
  {['08', '09', '10', '11', '12', '01', '02', '03', '04', '05', '06', '07'].map((hour) => (
    <WheelPickerItem key={hour} value={hour}>{hour}</WheelPickerItem>
  ))}
</WheelPicker>
```

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

### Install and Add Components with Nocta UI CLI

Source: https://www.nocta-ui.com/docs/index

This snippet demonstrates how to initialize the Nocta UI CLI and add specific components like button, card, and badge to your project. It requires the Nocta UI CLI to be installed globally or via npx.

```bash
npx @nocta-ui/cli init
npx @nocta-ui/cli add button card badge
```