# Installation



Nexus UI components are designed for React projects using Tailwind CSS v4 and TypeScript. Follow the steps below to get set up.

Prerequisites [#prerequisites]

Make sure your project has the following:

* [React 19](https://react.dev) or later
* [Tailwind CSS v4](https://tailwindcss.com)
* [TypeScript](https://typescriptlang.org)

Nexus UI also depends on shared utilities from [shadcn/ui](https://ui.shadcn.com). If you don't have shadcn set up yet, initialize it first:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
  <Tab value="npm">
    ```bash
    npx shadcn@latest init
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest init
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx shadcn@latest init
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx shadcn@latest init
    ```
  </Tab>
</Tabs>

Add registry [#add-registry]

Add the Nexus UI registry to your `components.json` (skip if using Option 1):

```json title="components.json"
{
  "registries": {
    "@nexus-ui": "https://nexus-ui.dev/r/{name}.json"
  }
}
```

Add components [#add-components]

Option 1: shadcn CLI (recommended) [#option-1-shadcn-cli-recommended]

Nexus UI is in the [shadcn directory](https://ui.shadcn.com/registry). No config needed—add components directly:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
  <Tab value="npm">
    ```bash
    npx shadcn@latest add @nexus-ui/prompt-input
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @nexus-ui/prompt-input
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @nexus-ui/prompt-input
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx shadcn@latest add @nexus-ui/prompt-input
    ```
  </Tab>
</Tabs>

Option 2: Direct URL [#option-2-direct-url]

Add components by passing the registry URL directly:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
  <Tab value="npm">
    ```bash
    npx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json
    ```
  </Tab>
</Tabs>

Option 3: Nexus UI CLI [#option-3-nexus-ui-cli]

Install components using the Nexus UI CLI:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
  <Tab value="npm">
    ```bash
    npx nexus-ui-cli@latest add prompt-input
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx nexus-ui-cli@latest add prompt-input
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx nexus-ui-cli@latest add prompt-input
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bunx nexus-ui-cli@latest add prompt-input
    ```
  </Tab>
</Tabs>

Install all components: `npx nexus-ui-cli@latest`

Manual installation [#manual-installation]

If you prefer to install manually, copy the component source from the docs page directly into your project.

Each component page includes the full source code. Copy it into your `components/nexus-ui` directory and install the required dependencies:

<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
  <Tab value="npm">
    ```bash
    npm install @radix-ui/react-slot
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add @radix-ui/react-slot
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add @radix-ui/react-slot
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add @radix-ui/react-slot
    ```
  </Tab>
</Tabs>

Project structure [#project-structure]

After adding components, your project will look something like this:

```
components/
├── nexus-ui/
│   └── prompt-input.tsx
├── ui/
│   ├── button.tsx
│   ├── textarea.tsx
│   └── scroll-area.tsx
└── ...
```

Components in `nexus-ui/` are Nexus UI primitives. Components in `ui/` are shared shadcn/ui primitives that Nexus UI components may depend on.

Usage [#usage]

Import and compose components directly:

```tsx noCollapse
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputActions,
} from '@/components/nexus-ui/prompt-input'

export function ChatInput() {
  return (
    <PromptInput>
      <PromptInputTextarea />
      <PromptInputActions>
        <PromptInputActionGroup>
          <PromptInputAction asChild>
            <Button>
              <Paperclip />
            </Button>
          </PromptInputAction>
        </PromptInputActionGroup>
        <PromptInputActionGroup>
          <PromptInputAction asChild>
            <Button>
              <ArrowUp />
            </Button>
          </PromptInputAction>
        </PromptInputActionGroup>
      </PromptInputActions>
    </PromptInput>
  )
}
```

See individual component pages for detailed usage and examples.