---
name: "@notra"
slug: "notra"
description: "Components and blocks for building modern dashboards, straight from the design system behind Notra."
category: "AI/chat UI"
tags: ["ai", "blocks", "buttons", "cards", "dashboard", "design-system", "forms", "icons", "loaders", "maps", "marketing", "navigation", "overlays", "retro", "tables"]
framework: "react"
license: "AGPL-3.0"
author: "usenotra"
website: "https://ui.usenotra.com"
github: "https://github.com/usenotra/notra"
registry: "https://ui.usenotra.com/r/registry.json"
pro: false
pro_url: null
github_stars: 256
component_count: 88
generated_at: "2026-10-10T06:32:55.998Z"
---

# @notra

Components and blocks for building modern dashboards, straight from the design system behind Notra.

## Links

- Website: https://ui.usenotra.com
- GitHub: https://github.com/usenotra/notra
- Registry JSON: https://ui.usenotra.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/notra
- This file: https://sh4dcn.vercel.app/md/notra.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.usenotra.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.usenotra.com/r/registry.json
bunx shadcn@latest add https://ui.usenotra.com/r/registry.json
# clone the source repo
git clone https://github.com/usenotra/notra.git
# fetch the raw registry index
curl -s https://ui.usenotra.com/r/registry.json
```

## Components (88)

| name | type | description | install |
| --- | --- | --- | --- |
| ai-overview | registry:component | The AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more. | `npx shadcn@latest add https://ui.usenotra.com/r/ai-overview.json` |
| ai-overview-header | registry:component | The sparkle icon and AI Overview heading. | `npx shadcn@latest add https://ui.usenotra.com/r/ai-overview-header.json` |
| ai-overview-content | registry:component | Paragraph, heading, list and link styles for AI Overview answers. | `npx shadcn@latest add https://ui.usenotra.com/r/ai-overview-content.json` |
| ai-overview-highlight | registry:component | A mark that sweeps in Google's blue highlight. | `npx shadcn@latest add https://ui.usenotra.com/r/ai-overview-highlight.json` |
| ai-overview-citation | registry:component | A source chip built on shadcn Badge and HoverCard. | `npx shadcn@latest add https://ui.usenotra.com/r/ai-overview-citation.json` |
| ai-overview-skeleton | registry:component | A loading state built on shadcn Skeleton. | `npx shadcn@latest add https://ui.usenotra.com/r/ai-overview-skeleton.json` |
| google-ai-overview | registry:block | A full recreation of Google's AI Overview built from the AI Overview components on shadcn Base UI. | `npx shadcn@latest add https://ui.usenotra.com/r/google-ai-overview.json` |
| marketing-button | registry:component | The gradient marketing buttons from the Notra landing page, built on the Base UI Button. | `npx shadcn@latest add https://ui.usenotra.com/r/marketing-button.json` |
| notra-button | registry:ui | A Base UI button with Depth primary, secondary, outline and destructive variants, squircle corners, and loading and progress states. | `npx shadcn@latest add https://ui.usenotra.com/r/notra-button.json` |
| notra-tooltip | registry:ui | A Base UI tooltip with the Depth surface of the buttons that glides between neighbouring triggers. | `npx shadcn@latest add https://ui.usenotra.com/r/notra-tooltip.json` |
| notra-sonner | registry:ui | A Sonner toaster with the Depth surface of the buttons and tinted status icons. | `npx shadcn@latest add https://ui.usenotra.com/r/notra-sonner.json` |
| notra-table | registry:ui | shadcn table primitives in a grey shell with a 2px rim around a lifted body card. | `npx shadcn@latest add https://ui.usenotra.com/r/notra-table.json` |
| data-table | registry:component | A sortable, selectable table with a sticky header, virtualized rows, pagination with a page-size select, and an infinite-scroll variant. | `npx shadcn@latest add https://ui.usenotra.com/r/data-table.json` |
| shimmer | registry:component | A light sweep across text for thinking and loading states. | `npx shadcn@latest add https://ui.usenotra.com/r/shimmer.json` |
| step-slider | registry:component | A slider that snaps to a fixed set of values, with a dotted fill that sweeps on every step. Built on the Base UI Slider. | `npx shadcn@latest add https://ui.usenotra.com/r/step-slider.json` |
| icon-tabs | registry:component | A segmented tab selector where only the active tab shows its icon, sliding in beside the label. Built on the Base UI Tabs. | `npx shadcn@latest add https://ui.usenotra.com/r/icon-tabs.json` |
| chat-minimap | registry:component | A rail of lines that maps a conversation, built on shadcn Button, Card, HoverCard and Tooltip. | `npx shadcn@latest add https://ui.usenotra.com/r/chat-minimap.json` |
| perplexity-message | registry:component | User pill and assistant answer turn with search and action slots. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-message.json` |
| perplexity-search | registry:component | The globe search step with queries, source rows and a +N more expander, built on shadcn Collapsible. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-search.json` |
| perplexity-citation | registry:component | An inline source pill with favicon, label and +N count, built on shadcn Badge. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-citation.json` |
| perplexity-favicon | registry:component | A site favicon on shadcn Avatar with a gray fallback. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-favicon.json` |
| perplexity-rewrite-panel | registry:component | The mode and model list with a Rewrite button. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-rewrite-panel.json` |
| perplexity-actions | registry:component | The answer action bar with share, copy, rewrite, feedback and a sources button, built on shadcn Button and Tooltip. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-actions.json` |
| perplexity-user-actions | registry:component | The time, edit and copy controls beside a user message. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-user-actions.json` |
| perplexity-sources-summary | registry:component | Stacked favicons and the source count next to the answer actions. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-sources-summary.json` |
| perplexity-composer | registry:component | The follow-up input with Search/Research focus menu, model selector, voice and send/stop buttons. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-composer.json` |
| perplexity-model-selector | registry:component | The Model chip and its provider list with Max/New badges and locks, built on shadcn DropdownMenu. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-model-selector.json` |
| perplexity-model-icon | registry:component | Grayscale provider logos for the model list. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-model-icon.json` |
| perplexity-thinking | registry:component | The shimmering Thinking... status shown before a search. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity-thinking.json` |
| perplexity | registry:block | A full recreation of a Perplexity thread with search steps, citations, sources sheet, composer and a replayable playback, built on shadcn Base UI. | `npx shadcn@latest add https://ui.usenotra.com/r/perplexity.json` |
| chatgpt-thread | registry:component | The ChatGPT conversation column with auto-scroll, a scroll-to-bottom button and a pinned footer. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-thread.json` |
| chatgpt-message | registry:component | User bubbles and bubble-less assistant turns with reasoning and hover actions. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-message.json` |
| chatgpt-reasoning | registry:component | The collapsible "Worked for Ns" trace, built on shadcn Collapsible. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-reasoning.json` |
| chatgpt-source-chip | registry:component | An inline citation pill with a hover card. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-source-chip.json` |
| chatgpt-search | registry:component | The "Searched N websites" line, built on shadcn Button. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-search.json` |
| chatgpt-activity | registry:component | The search activity and sources side sheet, built on shadcn Sheet, Badge and Avatar. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-activity.json` |
| chatgpt-thinking | registry:component | The shimmering Thinking placeholder. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-thinking.json` |
| chatgpt-actions | registry:component | Copy, share, redo and more buttons, built on shadcn Button and Tooltip. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-actions.json` |
| chatgpt-model-selector | registry:component | The hover-to-open effort chip with Model and Effort submenus, built on shadcn DropdownMenu. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-model-selector.json` |
| chatgpt-composer | registry:component | The pill-shaped Ask anything input with model picker and send button. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt-composer.json` |
| chatgpt | registry:block | A full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn Base UI. | `npx shadcn@latest add https://ui.usenotra.com/r/chatgpt.json` |
| gemini-thoughts | registry:component | The "Show thinking" step with thoughts and searches. | `npx shadcn@latest add https://ui.usenotra.com/r/gemini-thoughts.json` |
| gemini-source-chip | registry:component | An inline source pill with a hover card. | `npx shadcn@latest add https://ui.usenotra.com/r/gemini-source-chip.json` |
| gemini-message | registry:component | Gemini's user pill and bubble-less assistant turn. | `npx shadcn@latest add https://ui.usenotra.com/r/gemini-message.json` |
| gemini-thinking | registry:component | The animated Gemini sparkle with a shimmering status label. | `npx shadcn@latest add https://ui.usenotra.com/r/gemini-thinking.json` |
| gemini-sparkle | registry:component | Gemini's three-dot mark that bounces and folds into a triangle. | `npx shadcn@latest add https://ui.usenotra.com/r/gemini-sparkle.json` |
| gemini-actions | registry:component | Feedback, share, copy and more buttons built on shadcn Button and Tooltip. | `npx shadcn@latest add https://ui.usenotra.com/r/gemini-actions.json` |
| gemini-composer | registry:component | Gemini's pill input with a model picker and a morphing send button. | `npx shadcn@latest add https://ui.usenotra.com/r/gemini-composer.json` |
| gemini-model-selector | registry:component | The Gemini model chip and menu built on shadcn DropdownMenu. | `npx shadcn@latest add https://ui.usenotra.com/r/gemini-model-selector.json` |
| gemini | registry:block | A full recreation of the Gemini chat built from the Gemini components on shadcn Base UI. | `npx shadcn@latest add https://ui.usenotra.com/r/gemini.json` |
| claude-composer | registry:component | The claude.ai message box with model picker, dictation and a morphing send button, built on shadcn Button and DropdownMenu. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-composer.json` |
| claude-plus-menu | registry:component | The composer's + menu with files, skills, connectors, design system, plugins and research. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-plus-menu.json` |
| claude-model-selector | registry:component | A hover-open model and effort picker built on shadcn DropdownMenu. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-model-selector.json` |
| claude-message | registry:component | User bubbles and serif assistant replies with slots for search, sources and actions. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-message.json` |
| claude-actions | registry:component | Copy, feedback and retry actions built on shadcn Button and Tooltip. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-actions.json` |
| claude-search | registry:component | Claude's web search timeline with queries, result cards and status steps. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-search.json` |
| claude-sources | registry:component | Source pills under an assistant reply, built on shadcn Badge. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-sources.json` |
| claude-thinking | registry:component | The animated spinner and rotating verb Claude shows before replying. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-thinking.json` |
| claude-spinner | registry:component | Claude's animated starburst spinner. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-spinner.json` |
| claude | registry:block | A full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker, built on shadcn Base UI. | `npx shadcn@latest add https://ui.usenotra.com/r/claude.json` |
| claude-code-terminal | registry:component | The terminal window with traffic lights and a title bar for Claude Code sessions. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-code-terminal.json` |
| claude-code-header | registry:component | Claude Code's compact header: the pixel mascot next to version, model and working directory, with notices below. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-code-header.json` |
| claude-code-message | registry:component | User turns on a full-width bar and assistant turns behind a white bullet, with inline code and bold. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-code-message.json` |
| claude-code-todo-list | registry:component | The Update Todos tool call with done, active and pending items. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-code-todo-list.json` |
| claude-code-thinking | registry:component | The dim "∴ Thinking…" line that expands to the thoughts. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-code-thinking.json` |
| claude-code-tool-call | registry:component | Tool calls with a status bullet and a ⎿ result line, plus the collapsed "Ran 3 shell commands" summary. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-code-tool-call.json` |
| claude-code-status | registry:component | The orange spinner line while Claude works and the dim "✻ Worked for 19s" summary after a turn. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-code-status.json` |
| claude-code-prompt | registry:component | The input between two rules with the permission mode, PR link and effort below. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-code-prompt.json` |
| claude-code | registry:block | A Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the Claude Code components on shadcn Base UI. | `npx shadcn@latest add https://ui.usenotra.com/r/claude-code.json` |
| codex-terminal | registry:component | The Codex window: a title bar, a scrolling transcript and a pinned footer for the prompt. | `npx shadcn@latest add https://ui.usenotra.com/r/codex-terminal.json` |
| codex-header | registry:component | The OpenAI Codex banner with version, working directory and greeting. | `npx shadcn@latest add https://ui.usenotra.com/r/codex-header.json` |
| codex-message | registry:component | User turns on a full-width band and assistant turns behind a dim bullet. | `npx shadcn@latest add https://ui.usenotra.com/r/codex-message.json` |
| codex-reasoning | registry:component | The dim italic summary Codex shows while it reasons. | `npx shadcn@latest add https://ui.usenotra.com/r/codex-reasoning.json` |
| codex-exec | registry:component | A Ran cell with shell syntax colors and output folded behind + N lines. | `npx shadcn@latest add https://ui.usenotra.com/r/codex-exec.json` |
| codex-explored | registry:component | Grouped Read, Search and List calls with a + Show details fold. | `npx shadcn@latest add https://ui.usenotra.com/r/codex-explored.json` |
| codex-working | registry:component | The shimmering Working (13s • esc to interrupt) status line. | `npx shadcn@latest add https://ui.usenotra.com/r/codex-working.json` |
| codex-markdown | registry:component | Bullet lists, tables with yellow headers and green inline code, styled like Codex answers. | `npx shadcn@latest add https://ui.usenotra.com/r/codex-markdown.json` |
| codex-composer | registry:component | The prompt band with a block cursor, the model and directory status line and shortcut hints. | `npx shadcn@latest add https://ui.usenotra.com/r/codex-composer.json` |
| codex | registry:block | A full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI. | `npx shadcn@latest add https://ui.usenotra.com/r/codex.json` |
| opencode-window | registry:component | The OpenCode terminal surface that sets the background, monospace font and line grid. | `npx shadcn@latest add https://ui.usenotra.com/r/opencode-window.json` |
| opencode-logo | registry:component | The block-letter OpenCode wordmark drawn on a cell grid and themed with tokens. | `npx shadcn@latest add https://ui.usenotra.com/r/opencode-logo.json` |
| opencode-message | registry:component | User prompts on a blue-ruled panel and indented assistant replies with OpenCode's markdown colors. | `npx shadcn@latest add https://ui.usenotra.com/r/opencode-message.json` |
| opencode-turn-footer | registry:component | The blue square, agent, model and duration line that closes an assistant turn. | `npx shadcn@latest add https://ui.usenotra.com/r/opencode-turn-footer.json` |
| opencode-activity | registry:component | Orange thoughts with a live Thinking spinner, plus muted read, web search and tool lines. | `npx shadcn@latest add https://ui.usenotra.com/r/opencode-activity.json` |
| opencode-sources | registry:component | Web search lines and a collapsible cited-sources list with an optional sequenced reveal. | `npx shadcn@latest add https://ui.usenotra.com/r/opencode-sources.json` |
| opencode-composer | registry:component | The prompt panel with agent, model, provider and effort, over a status row with the busy scanner, context and shortcuts. | `npx shadcn@latest add https://ui.usenotra.com/r/opencode-composer.json` |
| opencode-sidebar | registry:component | Session title, context usage, a collapsible MCP list, LSP state, cwd with branch and version. | `npx shadcn@latest add https://ui.usenotra.com/r/opencode-sidebar.json` |
| opencode | registry:block | A recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar. | `npx shadcn@latest add https://ui.usenotra.com/r/opencode.json` |

## For AI agents

```text
You are adding components from @notra to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/notra.md) for the component list.
2. Fetch the machine-readable index: https://ui.usenotra.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: notra).
```