---
title: Installation
description: How to install and set up Nexus UI in your project
---

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

## 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 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

### 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>

Available components: `prompt-input`, `suggestions`, `model-selector`, `attachments`, `message`, `thread`.

### 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

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

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

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

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
              type="button"
              variant="ghost"
              size="icon-sm"
              className="cursor-pointer rounded-full text-secondary-foreground active:scale-97 disabled:opacity-70 hover:dark:bg-secondary"
            >
              <Paperclip />
            </Button>
          </PromptInputAction>
        </PromptInputActionGroup>

        <PromptInputActionGroup>
          <PromptInputAction asChild>
            <Button
              type="button"
              size="icon-sm"
              className="cursor-pointer rounded-full active:scale-97 disabled:opacity-70"
            >
              <ArrowUp />
            </Button>
          </PromptInputAction>
        </PromptInputActionGroup>
      </PromptInputActions>
    </PromptInput>
  )
}
```

See individual component pages for detailed usage and examples.