Introduction
What Notra UI is and how the site is organized.
Notra UI is the showcase for @notra/ui, the component package behind the Notra dashboard. Components shown here are built with the same tokens and styles, as site examples you can copy into your app.
Every component and block is published to the official shadcn registry directory under @notra, so you can install them by name.
$ bunx --bun shadcn@latest add @notra/google-ai-overviewDuotone Tooltip
The duotone tooltip with a muted header band tucked behind its content.
Google AI Overview
Google’s AI Overview with highlights, citation chips and Show more.
Perplexity
A Perplexity answer thread with the search step, citation pills, a sources sheet and the composer.
ChatGPT
A ChatGPT conversation with reasoning, web search, an Activity sheet and the model picker.
Gemini
The Gemini chat with its animated sparkle, streamed replies and the model picker.
Claude
The claude.ai chat with a live search timeline, serif replies and the effort picker.
Claude Code
A Claude Code terminal session with tool calls, todos, the spinner and the prompt.
Codex
A Codex CLI session with Ran and Explored cells, a working line and the composer.
OpenCode
The OpenCode workspace with activity, cited sources and the sidebar.