### Installing nyxb CLI Canary Version (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/getting-started.mdx

Provides the command to install the canary version of the `nyxb` command-line interface using npm. The build command required for generating registry files is currently only available in this version.

```bash
npm install nyxb@canary
```

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

### Installing Registry Item with nyxb CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/getting-started.mdx

This command uses the `npx` runner to execute the latest version of the `nyxb` CLI. The `add` command is used to install a component or item from a registry specified by the provided URL. This is the standard way to add pre-built components from a registry into a project.

```bash
npx nyxb@latest add http://localhost:3000/r/hello-world.json
```

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

### Serving the Registry with npm run dev (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/getting-started.mdx

Provides the standard command to start a development server for frameworks like Next.js. This server will serve the generated registry JSON files from the configured output directory (defaulting to `public/r`).

```bash
npm run dev
```

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

### Initiating nyxb Template Installation (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/templates/portfolio.mdx

Use this command to start the interactive process for installing a nyxb template. It will guide you through selecting the template (e.g., 'portfolio'), naming your project, and choosing a package manager.

```bash
npx nyxb@latest template
```

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

### Running the Registry Build Command (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/getting-started.mdx

Gives the command to execute the `registry:build` script defined in `package.json`. Running this command generates the final registry JSON files based on the configuration.

```bash
npm run registry:build
```

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

### Creating a Simple Registry Component (TSX)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/getting-started.mdx

Defines a simple React component using TypeScript (TSX) that renders a button with "Hello World". This component serves as an example item to be added to the registry. Requires a `Button` component dependency.

```tsx
import { Button } from "~/components/ui/button"

export function HelloWorld() {
  return <Button>Hello World</Button>
}
```

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

### Adding a Component Definition to registry.json (JSON)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/getting-started.mdx

Illustrates how to add a specific component definition (the `hello-world` component) to the `items` array in `registry.json`. It includes metadata like name, type, title, description, and file paths.

```json
{
  "$schema": "https://nyxbui.design/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  ]
}
```

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

### Initializing nyxb Registry Configuration (JSON)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/getting-started.mdx

Sets up the basic structure for the `registry.json` file, including schema reference, name, homepage, and an empty items array. This file is essential for the `nyxb` CLI build process.

```json
{
  "$schema": "https://nyxbui.design/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    // ...
  ]
}
```

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

### Adding Registry Build Script to package.json (JSON)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/getting-started.mdx

Shows how to add a new script named `registry:build` to the `scripts` section of `package.json`. This script uses the `nyxb build` command to process the `registry.json` file.

```json
{
  "scripts": {
    "registry:build": "nyxb build"
  }
}
```

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

### Running Development Server (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/README.md

Provides commands to start the local development server for the Next.js application using various package managers like npm, yarn, pnpm, or bun.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

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

### Navigating to Project and Starting Development Server (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/templates/portfolio.mdx

After installation, navigate into your new project directory using 'cd' and then run the development server using your chosen package manager's command (e.g., 'npm run dev', 'pnpm run dev', 'yarn dev', or 'bun dev').

```bash-session
cd <your-project-directory>\n<package-manager> run dev
```

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

### Creating a New Gatsby Project (CLI)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/gatsby.mdx

Initiates the process of creating a new Gatsby project using the official command-line tool. This command starts an interactive setup process.

```bash
npm init gatsby
```

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

### nyxb UI CLI Init Prompts - Text

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/cli.mdx

Example of the interactive prompts displayed when running the `nyxb init` command, guiding the user through configuration choices like style, base color, and CSS variables.

```Text
Which style would you like to use? › Miami
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
```

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

### Install Checkbox Component using CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/checkbox.mdx

Installs the checkbox component using the nyxb CLI tool for quick setup.

```bash
npx nyxb@latest add checkbox
```

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

### Installing Core Dependencies

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/manual.mdx

Installs the essential npm packages required for the UI components, including styling utilities and animation support.

```bash
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge
```

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

### Install Dependencies Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/sonner.mdx

Install the required packages `sonner` and `next-themes` using your package manager for manual setup.

```bash
 sonner next-themes
```

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

### Configuring Tailwind Content Path (TypeScript)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/getting-started.mdx

Configures the `content` array in `tailwind.config.ts` to include the directory where registry components are stored. This ensures Tailwind CSS correctly scans and processes styles used within these components.

```ts
// tailwind.config.ts
export default {
  content: ["./registry/**/*.{js,ts,jsx,tsx}"],
}
```

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

### Install Radix UI Slot Dependency

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/button.mdx

Installs the required @radix-ui/react-slot dependency using pnpm for manual button component setup.

```bash
pnpm add @radix-ui/react-slot
```

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

### Installing Lucide React Icons (Default Style)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/manual.mdx

Installs the `lucide-react` package, which provides icons for the `default` style of the UI components.

```bash
npm install lucide-react
```

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

### Install ScrollArea using CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/scroll-area.mdx

Installs the ScrollArea component using the nyxb CLI tool, simplifying the setup process.

```bash
npx nyxb@latest add scroll-area
```

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

### Manual Installation of Input OTP

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/input-otp.mdx

Details the manual installation process, including installing the core dependency and updating the Tailwind CSS configuration file to include necessary animations.

```bash
 input-otp
```

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "caret-blink": {
          "0%,70%,100%": { opacity: "1" },
          "20%,50%": { opacity: "0" }
        }
      },
      animation: {
        "caret-blink": "caret-blink 1.25s ease-out infinite"
      }
    }
  }
}
```

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

### Installing Radix UI Icons (Miami Style)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/manual.mdx

Installs the `@radix-ui/react-icons` package, which provides icons for the `miami` style of the UI components.

```bash
npm install @radix-ui/react-icons
```

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

### Install Accordion Dependency Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/accordion.mdx

Install the core Radix UI Accordion dependency using pnpm for manual setup.

```bash
pnpm add @radix-ui/react-accordion
```

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

### Install Badge Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/badge.mdx

Installs the Badge component using the nyxb CLI tool. This command adds the component files and dependencies to your project, simplifying the setup process.

```bash
npx nyxb@latest add badge
```

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

### Install Orbiting Circles Component via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/orbiting-circles.mdx

Installs the Orbiting Circles component using the nyxb CLI tool, simplifying the setup process.

```bash
npx nyxb@latest add orbiting-circles
```

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

### Install Shine Border Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/shine-border.mdx

Installs the Shine Border component using the nyxb CLI tool. This command fetches and adds the component files to your project, simplifying the setup process.

```bash
npx nyxb@latest add shine-border
```

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

### Installing Drawer with CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/drawer.mdx

Command to install the Drawer component using the nyxb CLI tool.

```bash
npx nyxb@latest add drawer
```

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

### Manual Installation Dependencies

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/resizable.mdx

Lists the required dependency for manual installation of the resizable component.

```text
 react-resizable-panels
```

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

### Install InputPhone Component via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/input-phone.mdx

Installs the `InputPhone` component into your project using the `nyxb` CLI tool. This is the recommended installation method.

```bash
npx nyxb@latest add input-phone
```

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

### Install Button Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/button.mdx

Installs the button component using the nyxb CLI tool.

```bash
npx nyxb@latest add button
```

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

### Install Tour Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/tour.mdx

Use the nyxb CLI to automatically add the tour component and its dependencies to your project. This is the recommended installation method.

```bash
npx nyxb@latest add tour
```

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

### Install Input Component (CLI) - Bash

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/input.mdx

Installs the Input component using the nyxb CLI. This is the recommended method for adding the component to your project.

```bash
npx nyxb@latest add input
```

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

### Installing Drawer Manual Dependency

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/drawer.mdx

Lists the required dependency for manual installation of the Drawer component.

```bash
 vaul
```

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

### Full registry.json example

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/registry/registry-json.mdx

This is a complete example of the registry.json file structure, including the schema reference, registry name, homepage, and a sample item definition.

```json
{
  "$schema": "https://nyxbui.design/schema/registry.json",
  "name": "nyxb",
  "homepage": "https://nyxbui.design",
  "items": [
    {
      "name": "hello-world",
      "type": "registry:block",
      "title": "Hello World",
      "description": "A simple hello world component.",
      "files": [
        {
          "path": "registry/hello-world/hello-world.tsx",
          "type": "registry:component"
        }
      ]
    }
  ]
}
```

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

### Installing Select Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/select.mdx

Installs the Select component using the nyxb CLI. This is the recommended method for adding the component to your project.

```bash
npx nyxb@latest add select
```

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

### Installing Select Component Dependencies Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/select.mdx

Installs the required dependencies for the Select component when performing a manual installation. This includes the core Radix UI select primitive.

```bash
@radix-ui/react-select
```

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

### Install Dialog Component using CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/dialog.mdx

Installs the Dialog component and its dependencies using the nyxb CLI tool.

```bash
npx nyxb@latest add dialog
```

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

### Install Multi Select Dependencies Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/multi-select.mdx

Installs the required peer dependencies for the Multi Select component when performing a manual installation. These dependencies are from the Radix UI library.

```bash
npm install @radix-ui/react-icons @radix-ui/react-popover @radix-ui/react-primitive @radix-ui/react-use-controllable-state
```

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

### Add Specific nyxb Component (Example) - Bash

Source: https://github.com/nyxb-ui/ui/blob/main/packages/nyxb/README.md

Example command to add the `alert-dialog` component to the project, demonstrating the usage of the `add` command with a specific component name.

```bash
npx nyxb add alert-dialog
```

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

### Install Navigation Menu via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/navigation-menu.mdx

Installs the Navigation Menu component and its dependencies using the nyxb CLI tool.

```bash
npx nyxb@latest add navigation-menu
```

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

### Install Checkbox Dependency Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/checkbox.mdx

Installs the required dependency (@radix-ui/react-checkbox) for manual setup of the checkbox component.

```bash
@radix-ui/react-checkbox
```

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

### Installing Tooltip Component using CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/tooltip.mdx

Command to add the Tooltip component to your project using the `nyxb` CLI tool. This is the recommended installation method.

```bash
npx nyxb@latest add tooltip
```

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

### Manual Installation File Path (text)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/animated-list.mdx

This snippet shows the recommended file path for placing the animated-list component source code when installing manually.

```text
components/ui/animated-list.tsx
```

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

### Install Stepper CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/stepper.mdx

Run this command using npx to automatically install the Stepper component and its dependencies into your project.

```bash
npx nyxb@latest add stepper
```

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

### Manual Installation File Path (text)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/typing-animation.mdx

Specifies the recommended file path where the Typing Animation component code should be placed when installing manually.

```text
components/ui/typing-animation.tsx
```

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

### Install Radix Alert Dialog Dependency pnpm Bash

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/alert-dialog.mdx

Installs the core `@radix-ui/react-alert-dialog` dependency using pnpm. This is a prerequisite for the manual installation method.

```bash
pnpm add @radix-ui/react-alert-dialog
```

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

### Initialize nyxb Project - Bash

Source: https://github.com/nyxb-ui/ui/blob/main/packages/nyxb/README.md

Initializes a new project with nyxb dependencies, adds the `ny` util, configures `tailwind.config.js`, and sets up CSS variables.

```bash
npx nyxb init
```

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

### Initializing nyxb UI CLI Project - Bash

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/cli.mdx

Use this command to initialize configuration and dependencies for a new project using the latest version of the nyxb CLI.

```Bash
npx nyxb@latest init
```

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

### Install Popover Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/popover.mdx

Installs the Popover component using the nyxb CLI tool.

```bash
npx nyxb@latest add popover
```

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

### Install Toggle Component using CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/toggle.mdx

Installs the Toggle component and its dependencies using the nyxb CLI tool. This is the recommended method for adding the component to your project.

```bash
npx nyxb@latest add toggle
```

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

### List Available nyxb Components - Bash

Source: https://github.com/nyxb-ui/ui/blob/main/packages/nyxb/README.md

Runs the `add` command without arguments to display a list of all components available for installation.

```bash
npx nyxb add
```

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

### Installing Table Component using CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/table.mdx

Command-line interface command to add the table component to a project using the nyxb CLI tool. This is the recommended installation method.

```bash
npx nyxb@latest add table
```

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

### nyxb UI CLI Init Command Options - Text

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/cli.mdx

Detailed usage syntax and available command-line options for the `nyxb init` command, including arguments for components and flags for defaults, force overwrite, skipping prompts, and specifying the working directory.

```Text
Usage: nyxb init [options] [components...]

initialize your project and install dependencies

Arguments:
  components         the components to add or a url to the component.

Options:
  -d, --defaults    use default values i.e miami, zinc and css variables. (default: false)
  -f, --force       force overwrite of existing nyxbui.json. (default: false)
  -y, --yes         skip confirmation prompt. (default: false)
  -c, --cwd <cwd>   the working directory. defaults to the current directory.
  -h, --help       display help for command
```

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

### Install Data Table Component (nyxb CLI)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/data-table.mdx

Installs the necessary components for building data tables using the nyxb CLI.

```bash
npx nyxb@latest add table
```

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

### Install Timeline Component using CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/timeline.mdx

Installs the Timeline component and its dependencies into your project using the nyxb CLI tool.

```bash
npx nyxb@latest add timeline
```

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

### Install Aspect Ratio Manual Dependency

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/aspect-ratio.mdx

Manually install the required Radix UI dependency for the Aspect Ratio component using pnpm.

```bash
pnpm add @radix-ui/react-aspect-ratio
```

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

### Installing Textarea Component via CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/textarea.mdx

Command-line instruction to add the Textarea component to a project using the `nyxb` CLI tool. This is the recommended installation method.

```bash
npx nyxb@latest add textarea
```

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

### Manual Installation - Component File Path

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/alert.mdx

Specify the target file path where the Alert component code should be placed during manual installation.

```text
components/ui/alert.tsx
```

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

### Initializing Project with nyxb CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/changelog.mdx

Example command demonstrating how to use the new `npx nyxb init` CLI to initialize a project and automatically include specified components like `sidebar-01` and `login-01`.

```bash
npx nyxb init sidebar-01 login-01
```

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

### Configure nyxbui.json CLI Output (Text)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/remix.mdx

Example output from the `nyxb init` command, showing the interactive prompts for configuring the `nyxbui.json` file.

```txt
Which style would you like to use? › Miami
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
```

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

### Add Motion One Utils Dependency Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/scroll-based-velocity.mdx

Install the required @motionone/utils package using pnpm as part of the manual setup process for the component.

```bash
pnpm add @motionone/utils
```

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

### Installing Dependencies pnpm Bash

Source: https://github.com/nyxb-ui/ui/blob/main/CONTRIBUTING.md

Command to install all project dependencies across the monorepo using the pnpm package manager.

```Bash
pnpm install
```

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

### Initialize nyxb-ui Project (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/laravel.mdx

Runs the `nyxb` CLI's init command using `npx` to set up the `nyxb-ui` library within the project. This command typically guides the user through configuration.

```bash
npx nyxb@latest init
```

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

### Importing nyxb/ui Component (TSX)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/monorepo.mdx

Example of how to import a component, such as `Button`, from the shared `@workspace/ui` package within the monorepo. Components installed by the CLI into `packages/ui` are typically imported from this alias.

```tsx
import { Button } from "@workspace/ui/components/button"
```

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

### Manual Installation File Path

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/animated-subscribe-button.mdx

This is the recommended file path where you should place the source code for the Animated Subscribe Button component when installing manually.

```text
components/ui/animated-subscribe-button.tsx
```

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

### Install Progress Component using nyxb CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/progress.mdx

Installs the Progress component into your project using the nyxb command-line interface.

```bash
npx nyxb@latest add progress
```

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

### Install Hero Video Dialog CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/hero-video-dialog.mdx

Installs the Hero Video Dialog component using the nyxb CLI. This is the recommended method for adding the component to your project.

```bash
npx nyxb@latest add hero-video-dialog
```

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

### Initializing nyxb/ui Monorepo Project (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/monorepo.mdx

Command to start a new monorepo project using the nyxb/ui CLI. It prompts the user to select the project type, specifically recommending the "Next.js (Monorepo)" option. This sets up the basic monorepo structure with `web` and `ui` workspaces and Turborepo.

```bash
npx nyxb@canary init
```

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

### Install Sidebar Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/sidebar.mdx

Run this command in your terminal to automatically install the `sidebar.tsx` component using the nyxb CLI.

```bash
npx nyxb@latest add sidebar
```

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

### Install Grid Layout via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/grid-layout.mdx

Installs the grid-layout component using the nyxb CLI tool. This command fetches and adds the component files to your project.

```bash
npx nyxb@latest add grid-layout
```

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

### Manual Installation File Path

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/magic-card.mdx

Specifies the recommended file path for manually installing the Magic Card component by copying the source code.

```text
components/ui/magic-card.tsx
```

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

### Install Safari Component via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/safari.mdx

Installs the Safari component using the nyxb CLI tool. This command adds the component files to your project automatically.

```bash
npx nyxb@latest add safari
```

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

### Install Switch Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/switch.mdx

Installs the Switch component using the nyxb CLI tool. This is the recommended method for adding the component and its dependencies to your project.

```bash
npx nyxb@latest add switch
```

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

### nyxb-ui Init Configuration Prompts (Text)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/laravel.mdx

Shows example prompts displayed by the `npx nyxb@latest init` command, asking the user about style, base color, and CSS variables.

```txt
Which style would you like to use?
Which color would you like to use as base color?
Do you want to use CSS variables for colors? › yes
```

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

### Importing nyxb/ui Hooks and Utilities (TSX)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/monorepo.mdx

Examples demonstrating how to import hooks (`useTheme`) and utility functions (`cn`) from the shared `@workspace/ui` package. These are also installed by the CLI into `packages/ui` and made available via the workspace alias.

```tsx
import { useTheme } from "@workspace/ui/hooks/use-theme"
import { cn } from "@workspace/ui/lib/utils"
```

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

### Initialize nyxb UI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/remix.mdx

Run the `nyxb` CLI's `init` command to configure the nyxb UI library within your project.

```bash
npx nyxb@latest init
```

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

### Install Hover Card Component using CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/hover-card.mdx

Installs the Hover Card component using the nyxb CLI tool.

```bash
npx nyxb@latest add hover-card
```

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

### Manual Installation File Path (Text)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/grid-layout.mdx

Specifies the recommended file path for the grid-layout component when installing manually. Copy the component code into this location.

```text
components/ui/grid-layout.tsx
```

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

### Install Multi Select Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/multi-select.mdx

Installs the Multi Select component using the nyxb CLI tool. This is the recommended method for adding the component to your project.

```bash
npx nyxb@latest add multi-select
```

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

### Running Website Development Server pnpm Bash

Source: https://github.com/nyxb-ui/ui/blob/main/CONTRIBUTING.md

How to start the development server specifically for the 'web' workspace, which hosts the nyxbui.design website.

```Bash
pnpm --filter=web dev
```

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

### Install Ripple Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/ripple.mdx

Installs the Ripple component using the nyx CLI tool. This command adds the component files to your project automatically.

```bash
npx nyx@latest add ripple
```

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

### Install Shiny Button using CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/shiny-button.mdx

Installs the Shiny Button component into your project using the nyxb CLI tool. This command fetches and adds the component files automatically.

```bash
npx nyxb@latest add shiny-button
```

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

### Initializing nyxbui Project (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/nyxbui-json.mdx

Command to create the `nyxbui.json` configuration file in your project directory, which is required for using the nyxbui CLI to add components.

```bash
npx nyxb@latest init
```

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

### Installing Text Reveal Component (CLI)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/text-reveal.mdx

This command uses the nyxb CLI to automatically add the Text Reveal component and its dependencies to your project. It's the recommended method for installation.

```bash
npx nyxb@latest add text-reveal
```

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

### Initialize nyxb-ui in Next.js (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/next.mdx

Runs the nyxb-ui initialization command to create a new Next.js project or set up an existing one with nyxb-ui.

```bash
npx nyxb@latest init
```

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

### Implement Basic Table of Contents (TSX)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/toc.mdx

Demonstrates how to import and use the TableOfContentsList, TableOfContentsItem, and TableOfContentsLink components to create a simple table of contents with static links. This code is used for both manual installation and basic usage examples.

```tsx
import {
  TableOfContentsItem,
  TableOfContentsLink,
  TableOfContentsList
} from "../ui/toc"

export default function TOCExample() {
  return (
    <TableOfContentsList>
      <TableOfContentsItem>
        <TableOfContentsLink href="#first-section">
          First Section
        </TableOfContentsLink>
      </TableOfContentsItem>
      <TableOfContentsItem>
        <TableOfContentsLink href="#second-section">
          Second Section
        </TableOfContentsLink>
      </TableOfContentsItem>
      <TableOfContentsItem>
        <TableOfContentsLink href="#third-section">
          Third Section
        </TableOfContentsLink>
      </TableOfContentsItem>
    </TableOfContentsList>
  )
}
```

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

### nyxbui.json Configuration Questions (Text)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/next.mdx

Shows the interactive prompts and typical answers when configuring the `nyxbui.json` file during the initialization process.

```txt
Which style would you like to use? › Miami
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
```

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

### Example npm Peer Dependency ERESOLVE Error

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/react-19.mdx

This snippet displays a typical error message from npm when it encounters an unmet peer dependency, specifically when a package requires an older version of React but React 19 is installed in the project.

```Bash
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react@19.0.0-rc-69d4b800-20241021
npm error node_modules/react
npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
```

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

### Installing Resizable Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/resizable.mdx

Command-line interface command to add the resizable component to a project using the nyxb CLI.

```bash
npx nyxb@latest add resizable
```

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

### Install canvas-confetti Dependency (Manual Installation)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/confetti.mdx

Install the required canvas-confetti library using pnpm as part of the manual installation process for the confetti component.

```bash
pnpm add canvas-confetti
```

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

### Manual Installation File Path (Text)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/box-reveal.mdx

Specifies the recommended file path for the Box Reveal component when performing a manual installation. Copy the component code into this location.

```text
components/ui/box-reveal.tsx
```

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

### Install Blur Fade Component using CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/blur-fade.mdx

This command uses the nyxbui CLI to automatically add the blur-fade component files to your project, simplifying the installation process.

```bash
npx nyxbui add blur-fade
```

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

### Install Flickering Grid Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/flickering-grid.mdx

Use the nyx CLI to automatically add the flickering-grid component to your project. This command fetches and installs the component files.

```bash
npx nyx@latest add flickering-grid
```

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

### nyxb UI CLI Add Command Options - Text

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/cli.mdx

Detailed usage syntax and available command-line options for the `nyxb add` command, including arguments for components and flags for skipping prompts, overwriting files, adding all components, specifying the working directory, and defining the installation path.

```Text
Usage: nyxb add [options] [components...]

add a component to your project

Arguments:
  components         the components to add or a url to the component.

Options:
  -y, --yes          skip confirmation prompt. (default: false)
  -o, --overwrite    overwrite existing files. (default: false)
  -c, --cwd <cwd>    the working directory. defaults to the current directory.
  -a, --all          add all available components. (default: false)
  -p, --path <path>  the path to add the component to.
  -h, --help         display help for command
```

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

### Listening to Carousel Events (TSX)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/carousel.mdx

Explains how to subscribe to carousel events by getting the API instance via the `setApi` prop. It provides an example of using the `api.on("select", ...)` method to execute code when a new slide is selected. Requires `CarouselApi` type and React hooks.

```tsx
import { type CarouselApi } from "~/components/ui/carousel"

export function Example() {
  const [api, setApi] = React.useState<CarouselApi>()

  React.useEffect(() => {
    if (!api) {
      return
    }

    api.on("select", () => {
      // Do something on select.
    })
  }, [api])

  return (
    <Carousel setApi={setApi}>
      <CarouselContent>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
      </CarouselContent>
    </Carousel>
  )
}
```

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

### Installing Sheet Component via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/sheet.mdx

Command to add the sheet component to your project using the `npx nyxb` CLI tool. This is the recommended installation method.

```bash
npx nyxb@latest add sheet
```

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

### Install Icon Cloud Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/icon-cloud.mdx

Installs the Icon Cloud component into your project using the nyxb CLI tool. This is the recommended method for adding the component.

```bash
npx nyxb@latest add icon-cloud
```

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

### Install Radio Group Dependencies Manual

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/radio-group.mdx

Installs the required dependencies for manual installation of the Radio Group component.

```bash
@radix-ui/react-radio-group
```

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

### Specify Manual Installation File Path (Text)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/gradual-spacing.mdx

Indicates the recommended file path within your project where the Gradual Spacing component code should be placed during manual installation.

```text
components/ui/gradual-spacing.tsx
```

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

### Install Video Modal Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/video-modal.mdx

Use the nyxb CLI to automatically add the video-modal component to your project. This command fetches and installs the component files.

```bash
npx nyxb@latest add video-modal
```

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

### Install Context Menu Dependencies Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/context-menu.mdx

Install the required Radix UI context menu package manually using a package manager like npm or yarn.

```bash
@radix-ui/react-context-menu
```

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

### Install Navigation Menu Dependencies Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/navigation-menu.mdx

Installs the required Radix UI dependency for the Navigation Menu component when installing manually.

```bash
@radix-ui/react-navigation-menu
```

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

### Initializing nyxb-ui Project (CLI)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/gatsby.mdx

Runs the nyxb CLI initialization command to set up the project for using nyxb-ui components. This command typically prompts for configuration details specific to nyxb-ui.

```bash
npx nyxb@latest init
```

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

### Install Avatar Dependencies Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/avatar.mdx

Installs the required Radix UI Avatar dependency using pnpm. This is the first step for manual installation.

```bash
pnpm add @radix-ui/react-avatar
```

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

### Running Documentation Development Server pnpm Bash

Source: https://github.com/nyxb-ui/ui/blob/main/CONTRIBUTING.md

How to run the local development server to view and work on the project's documentation, which is part of the 'web' workspace.

```Bash
pnpm --filter=web dev
```

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

### Install Framer Motion Dependency (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/hyper-text.mdx

Installs the framer-motion library, which is a required dependency for the Hyper Text component when installing manually.

```bash
npm install framer-motion
```

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

### Install Calendar Dependencies Manually (pnpm)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/calendar.mdx

Installs the required dependencies for the Calendar component when performing a manual installation. Requires pnpm package manager.

```bash
pnpm add react-day-picker date-fns
```

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

### Create Remix Project (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/remix.mdx

Use the `create-remix` command to initialize a new Remix application with the latest version.

```bash
npx create-remix@latest my-app
```

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

### Install ScratchToReveal Component using CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/scratch-to-reveal.mdx

Use the nyxb CLI to automatically add the ScratchToReveal component and its dependencies to your project.

```bash
npx nyxb@latest add scratch-to-reveal
```

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

### Install Toggle Dependency Manually (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/toggle.mdx

Installs the required `@radix-ui/react-toggle` dependency using npm or yarn as part of the manual installation process for the Toggle component.

```bash
@radix-ui/react-toggle
```

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

### Install Box Reveal Component via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/box-reveal.mdx

Installs the Box Reveal component using the nyxb CLI. This command automatically adds the component files to your project.

```bash
npx nyxb@latest add box-reveal
```

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

### Installing Marquee Component via CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/marquee.mdx

Command-line interface command to add the Marquee component to a project using the nyxb CLI tool. This is the recommended method for installation.

```bash
npx nyxb@latest add marquee
```

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

### Install Typing Animation Component using CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/typing-animation.mdx

Installs the Typing Animation component into your project using the nyxb CLI tool. This command automatically adds the component files and dependencies.

```bash
npx nyxb@latest add typing-animation
```

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

### Install React Icon Cloud Dependency Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/icon-cloud.mdx

Installs the core `react-icon-cloud` dependency using npm as part of the manual installation process for the Icon Cloud component.

```bash
npm i react-icon-cloud
```

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

### Running nyxb init command

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/vite.mdx

Execute the `npx nyxb@latest init` command to initialize the nyxb-ui configuration in the project.

```bash
npx nyxb@latest init
```

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

### Installing Recharts Dependency Manually (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/chart.mdx

Shows the npm command required to install the core Recharts library as a project dependency when performing a manual installation of the chart components.

```bash
npm install recharts
```

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

### Installing Tooltip Dependency Manually (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/tooltip.mdx

Specifies the core dependency (`@radix-ui/react-tooltip`) required for the manual installation of the Tooltip component. This package needs to be installed using a package manager like npm or yarn.

```bash
@radix-ui/react-tooltip
```

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

### Install Toggle Group Dependency Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/toggle-group.mdx

Install the core Radix UI Toggle Group dependency using a package manager like npm or yarn as part of the manual installation process.

```bash
@radix-ui/react-toggle-group
```

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

### Initializing nyxb/ui Monorepo (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/templates/monorepo-next/README.md

Use this command at the root of your project to initialize the nyxb/ui monorepo structure using the nyxb CLI.

```bash
pnpm dlx nyxb@latest init
```

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

### Initializing Nyxb UI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/astro.mdx

Runs the `nyxb` CLI initialization command to set up the UI library in the project.

```bash
npx nyxb@latest init
```

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

### Install Radix UI Dropdown Menu Dependency (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/dropdown-menu.mdx

This command installs the underlying @radix-ui/react-dropdown-menu package from npm, which is a required dependency for the manual installation method of the nyxb UI dropdown menu component.

```bash
npm install @radix-ui/react-dropdown-menu
```

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

### Install Bento Grid Component via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/bento-grid.mdx

Installs the Bento Grid component into your project using the Nyxb UI command-line interface. This command fetches and adds the necessary files for the component.

```bash
npx nyxb@latest add bento-grid
```

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

### Install Globe Dependencies Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/globe.mdx

Manually install the required dependencies 'cobe' and 'react-spring' for the Globe component. This snippet shows the dependencies needed, often used with a package manager's install command.

```bash
-D cobe react-spring
```

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

### Create Laravel Project with Inertia and React (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/laravel.mdx

Uses the Laravel installer to create a new project named `my-app`. It includes options for TypeScript, Breeze authentication, React stack, Git initialization, and non-interactive mode.

```bash
laravel new my-app --typescript --breeze --stack=react --git --no-interaction
```

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

### Install Radio Group CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/radio-group.mdx

Installs the Radio Group component using the nyxb CLI.

```bash
npx nyxb@latest add radio-group
```

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

### Running CLI Development Server pnpm Bash

Source: https://github.com/nyxb-ui/ui/blob/main/CONTRIBUTING.md

How to start the development process for the 'nyxbui' package, which is the project's command-line interface.

```Bash
pnpm --filter=nyxbui dev
```

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

### Creating a new Vite React project

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/vite.mdx

Use the npm `create vite` command to initialize a new React project with the latest template.

```bash
npm create vite@latest
```

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

### Install Breadcrumb Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/breadcrumb.mdx

Installs the Breadcrumb component and its dependencies using the nyxb CLI tool.

```bash
npx nyxb@latest add breadcrumb
```

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

### Install next-themes (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/dark-mode/next.mdx

This command installs the `next-themes` package, which is required to implement dark mode functionality in the Next.js application.

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

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

### Install Sonner via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/sonner.mdx

Run this command in your terminal to automatically install Sonner and its dependencies using the nyxb CLI.

```bash
npx nyxb@latest add sonner
```

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

### Manual Installation File Path

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/particles.mdx

Specifies the recommended file path where the Particles component code should be placed when installing manually.

```text
components/ui/particles.tsx
```

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

### Configuring Tsconfig Path Alias

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/manual.mdx

Configures the `tsconfig.json` file to set up a path alias (`~/*`) mapping to the project root (`./*`), simplifying import paths.

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

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

### Install Menubar Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/menubar.mdx

Provides the command-line interface command to automatically add the Menubar component and its dependencies to your project using the `nyxb` CLI tool.

```bash
npx nyxb@latest add menubar
```

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

### Install iPhone 15 Pro Component via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/iphone-15-pro.mdx

This command uses the `npx` utility to execute the latest version of the `nyxb` CLI, adding the `iphone-15-pro` component to your project. It's the recommended method for quick installation.

```bash
npx nyxb@latest add iphone-15-pro
```

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

### Install Toast Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/toast.mdx

Run this command using npx to automatically add the Toast component and its dependencies to your project.

```bash
npx nyxb@latest add toast
```

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

### Install Tabs Component using CLI (bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/tabs.mdx

Installs the Tabs component and its dependencies using the nyxb CLI tool.

```bash
npx nyxb@latest add tabs
```

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

### Install Aspect Ratio CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/aspect-ratio.mdx

Use the nyxb CLI to automatically add the Aspect Ratio component to your project.

```bash
npx nyxb@latest add aspect-ratio
```

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

### Initialize nyxb-ui with Defaults in Next.js (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/next.mdx

Runs the nyxb-ui initialization command with the `-d` flag to use default settings (miami style, zinc color, yes for CSS variables).

```bash
npx nyxb@latest init -d
```

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

### nyxb UI CLI Add Prompts - Text

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/cli.mdx

Example of the interactive component selection prompt shown when running `nyxb add` without specifying components directly. Users can navigate and select components using space and submit with enter.

```Text
Which components would you like to add? › Space to select. A to toggle all.
Enter to submit.

◯  accordion
◯  alert
◯  alert-dialog
◯  aspect-ratio
◯  avatar
◯  badge
◯  button
◯  calendar
◯  card
◯  checkbox
```

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

### nyxb UI CLI Build Command Options - Text

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/cli.mdx

Detailed usage syntax and available command-line options for the `nyxb build` command, including arguments for the registry file path and flags for specifying the output directory and the working directory.

```Text
Usage: nyxb build [options] [registry]

build components for a nyxb registry

Arguments:
  registry             path to registry.json file (default: "./registry.json")

Options:
  -o, --output <path>  destination directory for json files (default: "./public/r")
  -c, --cwd <cwd>      the working directory. defaults to the current directory. (default:
                       "/Users/nyxb/Code/nyxb/ui/packages/nyxb")
  -h, --help           display help for command
```

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

### Basic Menubar Usage Example (TSX)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/menubar.mdx

Demonstrates a basic implementation of the Menubar component, showing how to structure menus, items, shortcuts, and separators using the imported components.

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

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

### Install Toggle Group via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/toggle-group.mdx

Use this command to install the Toggle Group component and its dependencies using the nyxb CLI.

```bash
npx nyxb@latest add toggle-group
```

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

### Force Installing npm Packages with Peer Dependency Issues

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/react-19.mdx

These commands demonstrate how to use the `--force` or `--legacy-peer-deps` flags with `npm install` to bypass strict peer dependency checks and install packages even if they don't explicitly list React 19 as a supported version.

```Bash
npm i <package> --force

npm i <package> --legacy-peer-deps
```

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

### Installing Node types for Vite config

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/vite.mdx

Install the `@types/node` package as a development dependency to resolve type errors when importing the `path` module in `vite.config.ts`.

```bash
npm i -D @types/node
```

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

### Install Separator Dependency Manually (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/separator.mdx

Specifies the core dependency required for the Separator component when installing manually. This package provides the underlying primitive.

```bash
@radix-ui/react-separator
```

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

### Install Gradual Spacing Component via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/gradual-spacing.mdx

Installs the Gradual Spacing UI component using the nyxb CLI tool. This command adds the component files to your project automatically.

```bash
npx nyxb@latest add gradual-spacing
```

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

### Install Nyx TOC Dependency Manually

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/nyx-toc.mdx

Use pnpm to add the core Nyx TOC package as a dependency to your project when installing manually.

```bash
pnpm add @nyxb/nyx-toc
```

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

### Required Dependency for Manual Installation

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/label.mdx

Specifies the core dependency, `@radix-ui/react-label`, required for manual installation of the Label component. This package provides the underlying primitive.

```bash
@radix-ui/react-label
```

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

### Creating Astro Project (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/installation/astro.mdx

Starts a new Astro project using the npm package manager.

```bash
npm create astro@latest
```

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

### Installing Collapsible Dependency Manually (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/collapsible.mdx

Specifies the core dependency required for the collapsible component when installing manually. This package provides the underlying primitive.

```bash
@radix-ui/react-collapsible
```

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

### Installing Collapsible Component via CLI (Bash)

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/collapsible.mdx

Command to add the collapsible component to your project using the nyxb CLI. This is the recommended installation method.

```bash
npx nyxb@latest add collapsible
```

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

### Install Dock Component via CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/dock.mdx

Use the Nyxb CLI to automatically add the Dock component and its dependencies to your project.

```bash
npx nyxb@latest add dock
```

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

### Install Avatar Component using CLI

Source: https://github.com/nyxb-ui/ui/blob/main/apps/web/content/docs/components/avatar.mdx

Installs the Avatar component using the nyxb CLI tool. This command adds the component files to your project.

```bash
npx nyxb@latest add avatar
```