Dev Design Library

Notra components

Notra is a modern GEO tool that asks ChatGPT, Claude and Gemini the questions your buyers ask. See if you show up, who shows up instead and how to fix it.

Components
88
Framework
React
Stack
React, TypeScript, Tailwind
License
AGPL-3.0
GitHub stars
256
Source
https://github.com/usenotra/notra
Website
https://www.usenotra.com

All Notra components

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

Browse by category