# NiceUI

> NiceUI is a free, open-source library of premium React and Tailwind CSS components, blocks and templates. Copy the code or install with the shadcn CLI. MIT licensed, no account required.

NiceUI components are plain React + Tailwind CSS source files with no runtime dependencies. Install any item with `npx shadcn@latest add https://niceui.dev/r/<name>.json`, or copy the source from its page. Every page has a Markdown twin at the same URL plus `.md`.

## Docs

- [Installation](https://niceui.dev/docs/installation.md): How to add NiceUI components to a React project.
- [Registry index](https://niceui.dev/r/registry.json): shadcn-compatible registry of all ready items.
- [Full library](https://niceui.dev/library/): Interactive app with landing pages, AI agent interfaces, motion components, blocks and dashboard templates.

## AI agent UI

### Chat & composers

- [Chat App](https://niceui.dev/c/ai-agents/chat-app): A complete chat experience with a conversation sidebar, streaming replies and a rich composer.
- [Message Bubble](https://niceui.dev/c/ai-agents/message-bubble): User and assistant chat bubbles with timestamps, read receipts and hover actions.
- [Prompt Input](https://niceui.dev/c/ai-agents/prompt-input): An auto-growing composer with attachments, a model picker and a send button that morphs into stop.
- [Command Composer](https://niceui.dev/c/ai-agents/command-composer): A composer with a / command menu and @ mentions for files, people and docs, keyboard driven, with selections as chips.
- [Prompt Suggestions](https://niceui.dev/c/ai-agents/prompt-suggestions): Starter prompts in category tabs for an empty chat, plus follow-up chips that cascade in after a reply.
- [Streaming Response](https://niceui.dev/c/ai-agents/streaming-response): Assistant text that streams in word by word with a blinking caret and lightweight markdown.
- [Response Branches](https://niceui.dev/c/ai-agents/response-branches): Regenerated replies you can page through, with copy, rate, feedback, share and read-aloud actions.
- [Code Block](https://niceui.dev/c/ai-agents/code-block): Syntax-highlighted code for assistant answers, with highlighted lines and multi-file tabs.
- [Chat Widget](https://niceui.dev/c/ai-agents/chat-widget): A support assistant launcher with an unread badge, quick replies, streamed answers and a hand-off to a human.
- [AI Sidebar](https://niceui.dev/c/ai-agents/ai-sidebar): A collapsible copilot panel beside a document, with suggestions that apply directly to the text.
- [AI Command Palette](https://niceui.dev/c/ai-agents/ai-command-palette): A ⌘K palette that runs commands and turns any question into a streamed AI answer with insert and copy actions.
- [Inline AI Edit](https://niceui.dev/c/ai-agents/inline-ai-edit): Press ⌘K on selected lines to describe a change, watch the diff stream in, then accept, reject or retry.
- [Ghost Text](https://niceui.dev/c/ai-agents/ghost-autocomplete): Inline AI autocomplete: a grey continuation appears as you pause; Tab accepts it, → takes one word, Esc dismisses.
- [Ask AI Toolbar](https://niceui.dev/c/ai-agents/ask-ai-toolbar): Select text in a document to get a floating toolbar — improve, shorten, translate, explain or ask — with replace and insert.
- [Attachments](https://niceui.dev/c/ai-agents/attachment-dropzone): A composer that takes files by drag and drop, paste or picker, with upload progress, image thumbnails and page or row counts.

### Thinking & status

- [Grid Flicker](https://niceui.dev/c/ai-agents/grid-flicker): A tiny dot grid that flickers in waves, snakes, ripples or random sparks while the agent thinks.
- [Thinking Orbs](https://niceui.dev/c/ai-agents/thinking-orbs): Four small orbs for agent status: breathing, glass with a travelling highlight, dithered and a morphing blob.
- [Thinking Rings](https://niceui.dev/c/ai-agents/thinking-rings): Ring spinners for tool calls and searches: gradient arc, orbiting dots, pulsing halo and a radar sweep, with a done check.
- [Dot Wave](https://niceui.dev/c/ai-agents/dot-wave): Typing-style dots and bars that wave, bounce, fade or pulse like an equaliser.
- [Scan Line](https://niceui.dev/c/ai-agents/scan-line): A soft light that scans across whatever the agent is reading: a document, a card or a skeleton.
- [Terminal Spinners](https://niceui.dev/c/ai-agents/braille-spinner): Unicode spinners in the style of command-line coding agents, with labels, elapsed time and done ticks.
- [Thinking Text](https://niceui.dev/c/ai-agents/thinking-text): A "Thinking…" label with a shimmer sweep, a letter-by-letter glint or a gentle wave.
- [Scramble Status](https://niceui.dev/c/ai-agents/scramble-status): A status label that scramble-decodes into place each time its text changes.
- [Rotating Status](https://niceui.dev/c/ai-agents/rotating-status): Cycles through what the agent is doing with an icon per step, a soft slide-and-blur and an elapsed timer.
- [Agent Avatar Status](https://niceui.dev/c/ai-agents/agent-status-ring): An agent avatar with a ring that spins, breathes or settles for idle, thinking, tool use, waiting, done and error.
- [Thinking → Done](https://niceui.dev/c/ai-agents/thinking-states): One indicator that morphs from a resting dot to a sweeping arc, orbiting dots, a drawn check or a cross.
- [Gradient Blob](https://niceui.dev/c/ai-agents/gradient-blob): A soft morphing gradient blob that speeds up while thinking and settles when done, from 16 to 160px.
- [Agent Loading States](https://niceui.dev/c/ai-agents/agent-loading): Six loading indicators for agents: shimmer text, dot pulse, equalizer, orbit, skeleton and typing.

### Reasoning, models & sources

- [Reasoning](https://niceui.dev/c/ai-agents/reasoning): A collapsible thinking panel that streams the model’s reasoning with a live timer, then folds into “Thought for 6 seconds”.
- [Model Selector](https://niceui.dev/c/ai-agents/model-selector): A command-menu model picker with search, favorites, capability badges, context and price, and a detail pane.
- [Model Compare](https://niceui.dev/c/ai-agents/model-compare): A blind side-by-side: two models stream the same prompt with live speed and cost, you vote, then their names are revealed.
- [Context Usage](https://niceui.dev/c/ai-agents/context-usage): A context-window meter with a segmented ring and bar, running cost, a warning near the limit and a compact action.
- [Citations](https://niceui.dev/c/ai-agents/citations): Inline numbered citation chips with hover source previews and a linked source list.
- [Answer Engine](https://niceui.dev/c/ai-agents/answer-engine): A search-style answer: source cards first, then a streamed answer with inline citations and related questions.

### Tools & approvals

- [Tool Result](https://niceui.dev/c/ai-agents/tool-result): Collapsible cards that summarize tool output with a status icon and live duration.
- [Tool Approval](https://niceui.dev/c/ai-agents/tool-approval): A human-in-the-loop card that shows tool arguments and morphs into its resolved state.
- [Clarifying Question](https://niceui.dev/c/ai-agents/clarifying-question): The agent stops to ask: options with descriptions, an “Other” answer, number-key shortcuts and an auto-continue countdown.
- [MCP Tool Picker](https://niceui.dev/c/ai-agents/mcp-tool-picker): A searchable list of MCP servers with one-click install toggles and a live installed count.
- [Generative UI](https://niceui.dev/c/ai-agents/generative-ui): Tool calls that render interactive cards instead of text: weather, a stock chart, flight options and a calendar event.
- [Code Interpreter](https://niceui.dev/c/ai-agents/code-interpreter): A notebook-style run cell: highlighted Python, a live timer, stdout, a rendered chart and a downloadable CSV.
- [File Diff](https://niceui.dev/c/ai-agents/file-diff): A unified diff with collapsible hunks, change stats and accept or reject actions.
- [Diff Suggestion](https://niceui.dev/c/ai-agents/diff-suggestion): An inline review suggestion: removed lines swap for added lines with one Apply click, and back with Undo.
- [Tool Permissions](https://niceui.dev/c/ai-agents/tool-permissions): A permission matrix for agent tools — Always, Ask or Never per tool — grouped by files, web, shell and MCP servers, with presets.
- [Sandbox Allowlist](https://niceui.dev/c/ai-agents/sandbox-allowlist): Folders and domains an agent may touch, with wildcard validation and a live checker that says whether a path or URL is allowed.

### Errors & recovery

- [Rate Limit](https://niceui.dev/c/ai-agents/rate-limit-notice): A usage-limit notice with a live reset countdown, a usage meter, and options to switch model or upgrade.
- [Tool Failure](https://niceui.dev/c/ai-agents/tool-failure-retry): A failed tool call with collapsible error details, retry with exponential backoff, editable arguments and skip.
- [Connection Status](https://niceui.dev/c/ai-agents/connection-status): An offline → reconnecting → back-online bar above the composer, with messages that queue and send on reconnect.
- [Context Full](https://niceui.dev/c/ai-agents/context-full): A context-window warning that compacts the chat into a summary, or starts a new chat carrying that summary.
- [Polite Refusal](https://niceui.dev/c/ai-agents/refusal-message): A calm way to decline a request: a plain reason, alternatives the assistant can do instead, and a learn-more link.
- [Spend Cap](https://niceui.dev/c/ai-agents/spend-cap): An agent run paused at its budget cap, with a cost breakdown, a raise-cap control that asks to confirm, and stop.

### Agents at work

- [Agent Activity](https://niceui.dev/c/ai-agents/agent-activity): A live vertical timeline of what the agent is doing, with per-step elapsed timers.
- [Todo List](https://niceui.dev/c/ai-agents/todo-list): An agent plan checklist that progresses from pending to running to done with a live progress bar.
- [Plan Review](https://niceui.dev/c/ai-agents/plan-review): An editable agent plan: rewrite, reorder, skip or add steps, request changes, then approve and watch it run.
- [Browser Agent](https://niceui.dev/c/ai-agents/browser-agent): A computer-use view where an agent drives a browser, with a moving cursor, labelled targets and a synced step log.
- [Deep Research](https://niceui.dev/c/ai-agents/research-progress): A research run that plans, searches, reads and writes, with a climbing source count and a report card at the end.
- [Agent Terminal](https://niceui.dev/c/ai-agents/agent-terminal): A terminal that types out an agent run log line by line when it scrolls into view, with replay.
- [Parallel Agents](https://niceui.dev/c/ai-agents/parallel-agents): Agents on a shared timeline that slide in and fill their progress bars as they scroll into view.
- [Agent Handoff](https://niceui.dev/c/ai-agents/agent-handoff): A multi-agent thread where a triage agent hands the conversation to specialists, showing the context each handoff carries.
- [Agent Task Queue](https://niceui.dev/c/ai-agents/agent-queue): An inbox for background agents with queued, running, review, merged and failed tasks, plus review and merge.
- [Background Task Dock](https://niceui.dev/c/ai-agents/task-dock): A downloads-tray style dock for background agents: progress rings, the current step, expandable details, cancel and a completed list.
- [Task Done Toast](https://niceui.dev/c/ai-agents/done-toast): Toasts that announce finished agent runs, with a progress state that turns into success in place, plus open and undo.
- [Run History](https://niceui.dev/c/ai-agents/run-history): Past agent runs with status, duration, tokens and cost, a seven-day spend sparkline, status filters and per-step timings.

### Build, trace & memory

- [Agent Builder](https://niceui.dev/c/ai-agents/agent-builder): A no-code agent builder with identity, instructions, model, tools, knowledge and creativity, beside a live test chat.
- [Agent Flow](https://niceui.dev/c/ai-agents/agent-flow): A workflow canvas of agents and tools where you can drag nodes and run the flow to watch data move along the edges.
- [Agent Trace](https://niceui.dev/c/ai-agents/agent-trace): A run inspector with a collapsible span tree, a timing waterfall, and the input, output, tokens and cost of each span.
- [Knowledge Base](https://niceui.dev/c/ai-agents/knowledge-base): Sources that index through upload, parse, chunk and embed, with a retrieval tester that scores and highlights matching chunks.
- [Memory](https://niceui.dev/c/ai-agents/memory-panel): What the assistant remembers, grouped and editable: edit inline, forget with undo, add a memory or switch memory off.
- [Checkpoints](https://niceui.dev/c/ai-agents/checkpoints): A timeline of the checkpoints an agent saves before each edit, with files changed and a confirm-to-restore rewind.
- [Artifact Panel](https://niceui.dev/c/ai-agents/artifact-panel): Chat beside a live artifact: the latest version streams in, Preview and Code views, versions with changed lines and copy or download.

### Voice, media & motion

- [Voice Orb](https://niceui.dev/c/ai-agents/voice-orb): A living gradient orb that breathes, listens, thinks and speaks with simulated voice amplitude.
- [Voice Conversation](https://niceui.dev/c/ai-agents/voice-conversation): Realtime voice mode with an orb, live captions for both sides, interrupt, mute, end call and a latency badge.
- [Push to Talk](https://niceui.dev/c/ai-agents/push-to-talk): Hold the mic or Space to talk, with a live waveform, timer and slide-to-cancel, while the transcript streams into the composer.
- [Audio Note](https://niceui.dev/c/ai-agents/audio-recorder): Record a voice note, scrub it on a waveform with mouse, touch or arrow keys, then send or re-record.
- [Image Generation](https://niceui.dev/c/ai-agents/image-generation): A prompt-to-image flow with progressive blur-to-sharp reveals and a 2×2 variation grid.
- [Network Pulse](https://niceui.dev/c/ai-agents/network-pulse): A hub-and-spoke constellation with pulses travelling from the core to breathing nodes. Pure SVG.
- [Auto Feature Tabs](https://niceui.dev/c/ai-agents/feature-tabs): Auto-advancing feature tabs with a glowing progress underline; each tab swaps in its own live content.

## CRM UI

- [CRM App template](https://niceui.dev/c/templates/crm-app): A complete CRM workspace with people and company tables, a deal pipeline, record pages with a timeline, tasks, notes, workflows, a dashboard and a command menu.

### Records & tables

- [Record Table](https://niceui.dev/c/crm/record-table): A spreadsheet-style record grid with sticky columns, typed cells, inline editing, keyboard navigation and bulk actions.
- [Filter & Sort Bar](https://niceui.dev/c/crm/filter-bar): Saved views, a step-by-step filter builder, sort chips and search over a list that filters live, with a save-view state.
- [CSV Import](https://niceui.dev/c/crm/csv-import): A four-step importer: drop a file, preview rows, map columns with confidence scores, review duplicates and invalid rows, then import.
- [Relation Picker](https://niceui.dev/c/crm/relation-picker): A searchable multi-select for linking people, companies and deals to a record, grouped with avatars, create-new and full keyboard control.

### Pipeline & deals

- [Pipeline Board](https://niceui.dev/c/crm/pipeline-board): An opportunities kanban with drag and drop between stages, column totals and weighted pipeline, and a celebration on Won.
- [Deal Card](https://niceui.dev/c/crm/deal-card): An opportunity summary with a clickable stage stepper, win-probability ring, health, next step, buying group and an AI next action.
- [Lead Score](https://niceui.dev/c/crm/lead-score): A lead score gauge with a hot, warm or cold label, the factors behind it, an AI explanation and a 30-day trend.
- [Sales Dashboard](https://niceui.dev/c/crm/sales-dashboard): KPI tiles with sparklines, revenue against quota, a pipeline funnel and a rep leaderboard, switchable by period.

### Profiles & activity

- [Person Profile](https://niceui.dev/c/crm/person-profile): A contact record header with quick email and call actions, plus a field list you edit inline: email, phone, title, city, tags and owner.
- [Company Card](https://niceui.dev/c/crm/company-card): A company record with domain, firmographics, an ICP-fit ring, people and open deals, and an Enrich action that fills empty fields with sourced AI data.
- [Activity Timeline](https://niceui.dev/c/crm/activity-timeline): Everything that happened on a record, grouped by day: emails, calls, meetings, notes, stage changes and field updates, with filters and load more.
- [Tasks](https://niceui.dev/c/crm/crm-tasks): Tasks grouped into overdue, today and upcoming, with assignees and linked records, an animated complete, and quick add that reads dates like “tomorrow 3pm”.

### Email & outreach

- [Email Composer](https://niceui.dev/c/crm/email-composer): A sales email composer with recipient chips, templates, highlighted merge fields, AI rewrites, scheduled send and open tracking.
- [Email Threads](https://niceui.dev/c/crm/email-threads): A CRM inbox: threads linked to companies, people and deals, with unread states, search, a thread view and quick reply.
- [Sequence](https://niceui.dev/c/crm/sequence-builder): An outreach sequence over days: email, LinkedIn, call and wait steps with live sent, open and reply rates.

## Components

- [Avatar Group](https://niceui.dev/components/avatar-group.md): Overlapping avatars with initials fallback, hover lift and a +N overflow counter.
- [Badge](https://niceui.dev/components/badge.md): Compact status labels in neutral, sky and outline variants, with an optional glowing status dot.
- [Button](https://niceui.dev/components/button.md): A pill-shaped button with primary, outline and ghost variants in three sizes. Accessible focus ring, forwarded ref.
- [Command Palette](https://niceui.dev/components/command-palette.md): A ⌘K search palette with live filtering, arrow-key navigation and an Enter action per item.
- [Floating Input](https://niceui.dev/components/floating-input.md): A text input whose label floats above the value on focus. Pure CSS peer states, no JavaScript needed for the animation.
- [Marquee](https://niceui.dev/components/marquee.md): An infinite, edge-faded horizontal scroller for logos, tags or testimonials. Pauses on hover.
- [Segmented Control](https://niceui.dev/components/segmented-control.md): A pill tab switcher with a sliding sky indicator that springs between options.
- [Shimmer Button](https://niceui.dev/components/shimmer-button.md): A dark button with a sweeping sky-blue shimmer and a glowing bottom edge. Zero dependencies, keyframes included.
- [Slider](https://niceui.dev/components/slider.md): A minimal range slider with a sky fill, soft halo thumb and a live value readout.
- [Stat Card](https://niceui.dev/components/stat-card.md): A KPI card with label, value, delta and an inline sparkline generated from your data points.
- [Switch](https://niceui.dev/components/switch.md): An accessible toggle with a springy thumb. Works controlled or uncontrolled and uses role="switch".

## Blocks

- [Hero — Horizon](https://niceui.dev/blocks/hero-horizon.md): A cinematic landing hero with serif-italic accent, dual CTAs and the signature glowing horizon arc.
- [Pricing — Minimal](https://niceui.dev/blocks/pricing-minimal.md): Three-tier pricing with a monthly/yearly toggle, featured plan glow and checkmark feature lists.

## Optional

- [Full source](https://niceui.dev/llms-full.txt): Every component's full source and usage in one file.
- Coming soon: Accordion, Alert, Dialog, Dropdown Menu, Tooltip, Tabs, Toast, Checkbox, Radio Group, Select, Textarea, OTP Input, File Upload, Data Table, Pagination, Calendar, Date Picker, Carousel, Spotlight Card, Number Ticker, Text Reveal, Kanban Board, AI Prompt Input, Chat Bubble, Navbar — Floating, Feature Grid, Bento Grid, Testimonials, Logo Cloud, FAQ, CTA — Horizon, Footer — Minimal, Sign In, Dashboard Shell, Horizon, Console, Relay, Folio.