https://github.com/victorcodess/nexus-ui
Beautiful, customizable components for modern AI experiences.
https://github.com/victorcodess/nexus-ui
Last synced: 3 months ago
JSON representation
Beautiful, customizable components for modern AI experiences.
- Host: GitHub
- URL: https://github.com/victorcodess/nexus-ui
- Owner: victorcodess
- License: mit
- Created: 2026-02-20T16:50:48.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-05-11T11:01:30.000Z (3 months ago)
- Last Synced: 2026-05-11T12:38:36.416Z (3 months ago)
- Language: TypeScript
- Homepage: https://nexus-ui.dev
- Size: 1.2 MB
- Stars: 65
- Watchers: 0
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
Nexus UI
Beautiful, customizable components for modern AI experiences.
Documentation ·
Prompt Input ·
Model Selector ·
Suggestions ·
Attachments ·
Message ·
Thread ·
Citation ·
Reasoning ·
Text Shimmer ·
Image ·
Feedback Bar ·
Toaster
---
## About
Nexus UI is a design-first component library for building AI-powered applications. It provides a set of composable primitives that integrate seamlessly with the [Vercel AI SDK](https://sdk.vercel.ai), [ElevenLabs](https://elevenlabs.io), 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 items |
| `Suggestions` | Prompt suggestion chips for guiding user input |
| `Attachments` | File-attachment UI for inputs and messages (compact, inline, detailed, pasted) |
| `Message` | Chat message layout with markdown body, optional avatar, actions, and attachments |
| `Thread` | Chat thread viewport with stick-to-bottom scrolling and scroll-to-bottom control |
| `Citation` | Inline citations with hover preview, favicons, and multi-source carousel |
| `Reasoning` | Collapsible reasoning trace with streaming labels and markdown content |
| `TextShimmer` | Animated shimmer text for loading and in-progress states |
| `Image` | AI image UI for URLs, base64, and bytes with preview, loader, lightbox, and actions |
| `FeedbackBar` | Feedback prompt bar with composable info, actions, tooltips, and close section |
| `Toaster` | Headless toast notifications powered by Sonner, with variant-aware styling and custom action/cancel controls |
## Quick Start
Make sure you have [shadcn/ui](https://ui.shadcn.com) initialized in your project:
```bash
npx shadcn@latest init
```
Add components using any of these methods:
**Option 1: shadcn CLI (recommended)**
Nexus UI is in the [shadcn registry](https://ui.shadcn.com/registry). No config needed:
```bash
npx shadcn@latest add @nexus-ui/prompt-input
npx shadcn@latest add @nexus-ui/model-selector
npx shadcn@latest add @nexus-ui/suggestions
npx shadcn@latest add @nexus-ui/attachments
npx shadcn@latest add @nexus-ui/message
npx shadcn@latest add @nexus-ui/thread
npx shadcn@latest add @nexus-ui/citation
npx shadcn@latest add @nexus-ui/reasoning
npx shadcn@latest add @nexus-ui/text-shimmer
npx shadcn@latest add @nexus-ui/image
npx shadcn@latest add @nexus-ui/feedback-bar
npx shadcn@latest add @nexus-ui/toaster
```
**Option 2: Direct URL**
```bash
npx shadcn@latest add https://nexus-ui.dev/r/prompt-input.json
```
**Option 3: Nexus UI CLI**
```bash
npx nexus-ui-cli@latest
# or add specific components
npx nexus-ui-cli@latest add prompt-input model-selector suggestions attachments message thread citation reasoning text-shimmer image feedback-bar toaster
```
To use the `@nexus-ui` scope with a custom registry, add to your `components.json`:
```json
{
"registries": {
"@nexus-ui": "https://nexus-ui.dev/r/{name}.json"
}
}
```
## Usage
```tsx
import { Button } from "@/components/ui/button";
import {
PromptInput,
PromptInputActions,
PromptInputAction,
PromptInputActionGroup,
PromptInputTextarea,
} from "@/components/nexus-ui/prompt-input";
import { ArrowUp02Icon, PlusSignIcon } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
const ChatInput = () => {
return (
);
};
```
## Tech Stack
- React 19
- TypeScript
- Tailwind CSS v4
- Radix UI Primitives
- Next.js
- Fumadocs
## Development
```bash
npm install
npm run dev
```
## License
MIT