@notra

The AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.

The sparkle icon and AI Overview heading.

Paragraph, heading, list and link styles for AI Overview answers.

A mark that sweeps in Google's blue highlight.

A source chip built on shadcn Badge and HoverCard.

A loading state built on shadcn Skeleton.

A full recreation of Google's AI Overview built from the AI Overview components on shadcn Base UI.

The gradient marketing buttons from the Notra landing page, built on the Base UI Button.

A Base UI button with Depth primary, secondary, outline and destructive variants, squircle corners, and loading and progress states.

A Base UI menu with Depth surfaces, squircle corners, submenus, checkbox and radio items.

A Base UI select with a Depth button trigger and a scrollable popup below it.

A Base UI tooltip with the Depth surface of the buttons that glides between neighbouring triggers.

A Sonner toaster with the Depth surface of the buttons and tinted status icons.

shadcn table primitives in a grey shell with a 2px rim around a lifted body card.

A sortable, selectable table with a sticky header, virtualized rows, pagination with a page-size select, and an infinite-scroll variant.

The shadcn sidebar on Base UI with a fading icon rail, a resizable rail, collapsible sub-rows and gliding Notra tooltips.

The Notra dashboard sidebar: project switcher, search, grouped navigation with sub-rows and a rail flyout, and the account menu.

A light sweep across text for thinking and loading states.

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.

A segmented tab selector where only the active tab shows its icon, sliding in beside the label. Built on the Base UI Tabs.

The chat composer from the Notra dashboard: a muted tray around the input card, with queued messages and attachments as chips. Built on the Notra Button and To…

A rail of lines that maps a conversation, built on shadcn Button, Card, HoverCard and Tooltip.

User pill and assistant answer turn with search and action slots.

The globe search step with queries, source rows and a +N more expander, built on shadcn Collapsible.

An inline source pill with favicon, label and +N count, built on shadcn Badge.

A site favicon on shadcn Avatar with a gray fallback.

The mode and model list with a Rewrite button.

The answer action bar with share, copy, rewrite, feedback and a sources button, built on shadcn Button and Tooltip.

The time, edit and copy controls beside a user message.

Stacked favicons and the source count next to the answer actions.

The follow-up input with Search/Research focus menu, model selector, voice and send/stop buttons.

The Model chip and its provider list with Max/New badges and locks, built on shadcn DropdownMenu.

Grayscale provider logos for the model list.

The shimmering Thinking... status shown before a search.

A full recreation of a Perplexity thread with search steps, citations, sources sheet, composer and a replayable playback, built on shadcn Base UI.

The ChatGPT conversation column with auto-scroll, a scroll-to-bottom button and a pinned footer.

User bubbles and bubble-less assistant turns with reasoning and hover actions.

The collapsible "Worked for Ns" trace, built on shadcn Collapsible.

An inline citation pill with a hover card.

The "Searched N websites" line, built on shadcn Button.

The search activity and sources side sheet, built on shadcn Sheet, Badge and Avatar.

The shimmering Thinking placeholder.

Copy, share, redo and more buttons, built on shadcn Button and Tooltip.

The hover-to-open effort chip with Model and Effort submenus, built on shadcn DropdownMenu.

The pill-shaped Ask anything input with model picker and send button.

A full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn Base UI.

The "Show thinking" step with thoughts and searches.

An inline source pill with a hover card.

Gemini's user pill and bubble-less assistant turn.

The animated Gemini sparkle with a shimmering status label.

Gemini's three-dot mark that bounces and folds into a triangle.

Feedback, share, copy and more buttons built on shadcn Button and Tooltip.

Gemini's pill input with a model picker and a morphing send button.

The Gemini model chip and menu built on shadcn DropdownMenu.

A full recreation of the Gemini chat built from the Gemini components on shadcn Base UI.

The claude.ai message box with model picker, dictation and a morphing send button, built on shadcn Button and DropdownMenu.

The composer's + menu with files, skills, connectors, design system, plugins and research.

A hover-open model and effort picker built on shadcn DropdownMenu.

User bubbles and serif assistant replies with slots for search, sources and actions.

Copy, feedback and retry actions built on shadcn Button and Tooltip.

Claude's web search timeline with queries, result cards and status steps.

Source pills under an assistant reply, built on shadcn Badge.

The animated spinner and rotating verb Claude shows before replying.

Claude's animated starburst spinner.

A full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker, built on shadcn Base UI.

The terminal window with traffic lights and a title bar for Claude Code sessions.

Claude Code's compact header: the pixel mascot next to version, model and working directory, with notices below.

User turns on a full-width bar and assistant turns behind a white bullet, with inline code and bold.

The Update Todos tool call with done, active and pending items.

The dim "∴ Thinking…" line that expands to the thoughts.

Tool calls with a status bullet and a ⎿ result line, plus the collapsed "Ran 3 shell commands" summary.

The orange spinner line while Claude works and the dim "✻ Worked for 19s" summary after a turn.

The input between two rules with the permission mode, PR link and effort below.

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.

The Codex window: a title bar, a scrolling transcript and a pinned footer for the prompt.

The OpenAI Codex banner with version, working directory and greeting.

User turns on a full-width band and assistant turns behind a dim bullet.

The dim italic summary Codex shows while it reasons.

A Ran cell with shell syntax colors and output folded behind + N lines.

Grouped Read, Search and List calls with a + Show details fold.

The shimmering Working (13s • esc to interrupt) status line.

Bullet lists, tables with yellow headers and green inline code, styled like Codex answers.

The prompt band with a block cursor, the model and directory status line and shortcut hints.

A full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI.

The OpenCode terminal surface that sets the background, monospace font and line grid.

The block-letter OpenCode wordmark drawn on a cell grid and themed with tokens.

User prompts on a blue-ruled panel and indented assistant replies with OpenCode's markdown colors.

The blue square, agent, model and duration line that closes an assistant turn.

Orange thoughts with a live Thinking spinner, plus muted read, web search and tool lines.

Web search lines and a collapsible cited-sources list with an optional sequenced reveal.

The prompt panel with agent, model, provider and effort, over a status row with the busy scanner, context and shortcuts.

Session title, context usage, a collapsible MCP list, LSP state, cwd with branch and version.

A recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.