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:

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

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bunx shadcn@latest init

Add registry

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

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. No config needed—add components directly:

npx shadcn@latest add @nexus-ui/prompt-input

pnpm dlx shadcn@latest add @nexus-ui/prompt-input

yarn dlx shadcn@latest add @nexus-ui/prompt-input

bunx shadcn@latest add @nexus-ui/prompt-input

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

Option 2: Direct URL

Add components by passing the registry URL directly:

npx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json

pnpm dlx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json

yarn dlx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json

bunx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json

Option 3: Nexus UI CLI

Install components using the Nexus UI CLI:

npx nexus-ui-cli@latest add prompt-input

pnpm dlx nexus-ui-cli@latest add prompt-input

yarn dlx nexus-ui-cli@latest add prompt-input

bunx nexus-ui-cli@latest add prompt-input

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:

npm install @radix-ui/react-slot

pnpm add @radix-ui/react-slot

yarn add @radix-ui/react-slot

bun add @radix-ui/react-slot

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:

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.

Installation