Nexus UI

Beautiful, customizable components for modern AI experiences.

Overview

Nexus UI is an open-source component library for building AI-powered interfaces. It provides a set of composable primitives that integrate seamlessly with the Vercel AI SDK, ElevenLabs, and other AI services.

Think of it as shadcn/ui, but purpose-built for AI apps.

Instead of adapting general-purpose components for AI use cases, Nexus UI is designed from the ground up for streaming, voice, multimodal, and agentic interfaces.

Copy-paste components into your project. You own the code.

Components

Component	Description
PromptInput	Composable chat input with auto-resizing textarea and action slots
ModelSelector	Dropdown for selecting AI models with radio groups, sub-menus, and custom items
Suggestions	Prompt suggestion chips for guiding user input
Attachments	Composable file attachments for chat inputs and messages with preview, variants, and upload wiring
Message	Chat message layout with markdown, optional avatar, actions, and attachments
Thread	Scrollable chat thread with stick-to-bottom scrolling and jump-to-bottom control
Citation	Inline source references with hover preview and multi-source carousel
Reasoning	Collapsible model reasoning trace with streaming-aware labels and markdown body
TextShimmer	Animated shimmer text for loading, tool runs, and other in-progress UI
Image	Image renderer for URLs, base64, and byte payloads with preview, loader, lightbox, and action slots
FeedbackBar	Feedback prompt bar for per-message or thread ratings with action and close slots
Toaster	Headless toast notifications powered by Sonner, with variant-aware styling and custom action/cancel controls
ChainOfThought	Structured multi-step thought timeline with step status, optional expandable output, and auto-close when steps finish
Tool	Status-aware tool call UI with JSON input/output codeblocks
Questions	Follow-up clarification questions with single or multiple choice, carousel navigation, and batch submission

Quick Start

Make sure you have shadcn/ui initialized in your project:

npx shadcn@latest init

Add components using any of these methods:

Option 1: shadcn CLI (recommended)

Nexus UI is in the shadcn registry. No config needed:

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

Option 2: Direct URL

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

Option 3: Nexus UI CLI

npx nexus-ui-cli@latest
# or add specific components
npx nexus-ui-cli@latest add prompt-input

To use the @nexus-ui scope with a custom registry, add to your components.json:

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

Usage

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>
  )
}

Development

npm install
npm run dev

Contributing

See CONTRIBUTING.md for the contribution guidelines.

License

MIT