Skip to content

The components
behind Notra

The building blocks of the Notra dashboard, documented and rendered live with the real styles.

Get started View on GitHub

bunx shadcn@latest add @notra/perplexity

Components

Primitives and small pieces used across the dashboard.

ButtonPrimary, secondary, outline and destructive with a soft gradient and squircle corners.

Marketing ButtonThe gradient marketing buttons from the Notra landing page.

TooltipThe Depth surface of the buttons, gliding between neighbouring triggers.

Duotone TooltipA shell header with a 2px rim around the content card.

Thinking...Searching the web

ShimmerA light sweep across text for thinking and loading states.

Deployment complete

Seat limit almost reached9 of 10 seats are in use.

SonnerToasts with the Depth surface of the buttons and tinted status icons.

Prompts25

Step SliderA slider that snaps to a fixed set of values, from the Notra pricing page.

Icon TabsA segmented tab selector where only the active tab shows its icon.

The background dither is messed up, fix pls

The dither sphere was cut off on a straight line at its bottom and left edge.

Chat MinimapA rail of lines that maps a conversation, with a preview card per turn.

Keep the intro under 80 words

ComposerThe chat composer from the dashboard, with queued messages on the tray.

Crawler	Page
GPTBot	/pricing
ClaudeBot	/docs
PerplexityBot	/blog

Data TableA sortable, paged table in the grey shell, with an infinite-scroll variant.

Search

Search result surfaces, rebuilt pixel for pixel.

AI Overview

Vercel is a cloud platform for building, deploying and hosting fast web applications.VVercel +1

Google AI OverviewGoogle's AI Overview with highlights, citation chips and a collapsible Show more.

Browser Apps

Chat apps with replayable conversations, search steps and composers.

who did notion buy to build notion mail?

Notion bought Skiff, the team and technology behind what later became Notion Mail.

PerplexityA Perplexity answer thread with the search step, citation pills, a sources sheet and the composer.

What are the biggest news stories today?

G7 foreign ministers are meeting in Ottawa on a new sanctions package, while the ceasefire talks in Geneva have stalled again.

ChatGPTA ChatGPT conversation with reasoning, web search, an Activity sheet and the model picker.

which changelog tools do AI assistants recommend?

Notra comes up most, next to hand-written changelog files and GitHub releases.

GeminiThe Gemini chat with its animated sparkle, streamed replies and the model picker.

what's in the news today

European markets open higher after strong US tech earnings, while the debate over AI Act enforcement heats up.

ClaudeThe claude.ai chat with a live search timeline, serif replies and the effort picker.

Terminal Apps

Coding agents in the terminal, from the welcome banner to the prompt.

claude — ~/acme/web

what changed since the last release?

Since v1.8.0 there are 14 merged PRs on main, split across three areas. apps/dashboard got the new GEO scan view with per-engine citations, packages/api added POST /v1/posts/:id/schedule, and apps/web moved the changelog to /changelog/[slug]. Two PRs are fixes from review. Want me to draft the changelog for v1.9 from these?

Claude CodeA Claude Code terminal session with tool calls, todos and the prompt.

codex — ~/acme/web

what shipped this week? draft the changelog

I'll check this week's merged commits and the current changelog, then draft the new entry.

CodexA Codex CLI session with Ran and Explored cells and the composer.

which changelog tools do AI assistants recommend?

Notra comes up most, next to hand-written CHANGELOG.md files and GitHub releases.

OpenCodeThe OpenCode workspace with activity, cited sources and the sidebar.