Components and blocks for building modern dashboards, straight from the design system behind Notra.
The AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
A source chip built on shadcn Badge and HoverCard.
Paragraph, heading, list and link styles for AI Overview answers.
The sparkle icon and AI Overview heading.
A mark that sweeps in Google's blue highlight.
A loading state built on shadcn Skeleton.
The Notra dashboard sidebar: project switcher, search, grouped navigation with sub-rows and a rail flyout, and the account menu.
A Base UI button with Depth primary, secondary, outline and destructive variants, squircle corners, and loading and progress states.
The dualtone card from the Notra dashboard: a grey shell with a lifted body, an eyebrow title with an optional hint, a readout and an action slot, plus a flat variant, a section heading and an empty state.
A full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker, built on shadcn Base UI.
Copy, share, redo and more buttons, built on shadcn Button and Tooltip.
The search activity and sources side sheet, built on shadcn Sheet, Badge and Avatar.
The "Used Notra" line with the app logo, shown when ChatGPT calls an app.
The pill-shaped Ask anything input with model picker and send button.
User bubbles and bubble-less assistant turns with reasoning and hover actions.
The hover-to-open effort chip with Model and Effort submenus, built on shadcn DropdownMenu.
The collapsible "Worked for Ns" trace, built on shadcn Collapsible.
The "Searched N websites" line, built on shadcn Button.
An inline citation pill with a hover card.
The shimmering Thinking placeholder.
The ChatGPT conversation column with auto-scroll, a scroll-to-bottom button and a pinned footer.
A rail of lines that maps a conversation, built on shadcn Button, Card, HoverCard and Tooltip.
A full recreation of the claude.ai chat with web search, serif replies, message actions and the model picker, built on shadcn Base UI.
Copy, feedback and retry actions built on shadcn Button and Tooltip.
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.
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 input between two rules with the permission mode, PR link and effort below.
The orange spinner line while Claude works and the dim "✻ Worked for 19s" summary after a turn.
The terminal window with traffic lights and a title bar for Claude Code sessions.
The dim "∴ Thinking…" line that expands to the thoughts.
The Update Todos tool call with done, active and pending items.
Tool calls with a status bullet and a ⎿ result line, plus the collapsed "Ran 3 shell commands" summary.
The claude.ai message box with model picker, dictation and a morphing send button, built on shadcn Button and DropdownMenu.
User bubbles and serif assistant replies with slots for search, sources and actions.
A hover-open model and effort picker built on shadcn DropdownMenu.
The composer's + menu with files, skills, connectors, design system, plugins and research.
Claude's web search timeline with queries, result cards and status steps.
Source pills under an assistant reply, built on shadcn Badge.
Claude's animated starburst spinner.
The animated spinner and rotating verb Claude shows before replying.
A full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI.
The prompt band with a block cursor, the model and directory status line and shortcut hints.
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 OpenAI Codex banner with version, working directory and greeting.
Bullet lists, tables with yellow headers and green inline code, styled like Codex answers.
User turns on a full-width band and assistant turns behind a dim bullet.