Pro

Changelog

New components, blocks and rules, newest first.

  1. Three Pro templates, one edge, new empty states

    • Agent workspace, a third Pro template: a working Next.js app for coding with agents, in three calm panes. Sessions open as tabs over a conversation whose tool calls fold to one line, with the files each turn changed as chips; the pull request's merge status, files, checks and diff sit beside it, with a run panel and a team sidebar with presence. A scripted agent edits, tests and opens the pull request until a model or your own agent plugs in.
    • File changes, Diff stat, Merge status and Turn summary, four Pro agent-kit components: a changed-files list with folders cut from the start and names whole, “+12 −3” in the type around it, a pull request's one line with Merge in the success color once checks pass, and an agent's work folded to “17 tool calls, 3 messages” with the files it changed under the answer.
    • Sidebar: recent rows take a time or faces at their end, and items a status word (“Away”). Icons: app chrome (home, compose, settings, help, clock, share, folder, paperclip, at, list, terminal, branch, gauge, panel) and four change marks for files.
    • Chat app is a template only: the separate Chat app block is folded into it, so there is one chat app to pick, a whole working app.
    • Markdown, a free agent-kit component: renders a model's reply as it streams, with headings, lists, task lists, tables, quotes and code blocks, and no flash of raw ** or backticks while a line is still arriving. HTML in a reply shows as text.
    • The AI components are now part of UI Polish Pro: Reasoning, Tool steps, Tool approval, Plan approval, Sources, Research progress, Pipeline, Batch progress, Background run and Voice input. Their demos and guides stay open to everyone; the buttons, fields, menus and chat basics stay free.
    • Chat app, the first Pro template: a working Next.js AI chat app, with sign-in, a sidebar of chats and workspaces, replies streaming from Claude (or a mock until there's a key), and settings for the assistant, billing and members. One prompt or one shadcn command installs it.
    • Agent console, a second Pro template: a working Next.js app for running AI agents, with live runs and their traces, an approvals inbox that holds a run until someone decides, a knowledge base the agents search, per-agent model, tools, permissions and limits, usage and workspace settings. A mock runner plays real-looking runs until yours plugs in.
    • Pricing, a Pro block: the public pricing page of an AI product, with a monthly/yearly switch whose prices roll in place, per-seat and per-credit notes, a featured plan, an Enterprise row, a comparison table with a sticky plan header (a plan picker on phones) and questions.
    • Settings, a Pro block: workspace name, URL and logo, API keys whose secret shows once and that are flagged when stale, models and spend limits, and notification switches, with one save bar that rolls back if a save fails.
    • Approvals inbox is now a review queue for any sign-off, from people or agents: expenses, time off, discounts, access, refunds and posts, with requester notes, due dates, optional priority and grouping, and the raw call folded under Technical details. Old agent, reasoning and risk fields still work.
    • Empty states: seven redrawn isometric drawings, including search, calendar and a didn't-load plug. No more icons on tiles.
    • Pipeline: one stroke per stage, even gaps on every connector, and a clean vertical timeline on phones.
    • Every box at rest shares the controls' edge, and the lines inside it sit one step lighter. Menus and dialogs draw a single ring.
    • Disclosure chevrons morph between down and up everywhere, the way Accordion's do, instead of spinning.
    • Nav rail's tooltip glides between items every time, at any pointer speed.
    • Guide tables stack on narrow screens, avatars are always round, and single keys are short pills.

  2. Five Pro blocks for AI products

    • Approvals inbox: review what your agents want to do before they do it, with keyboard triage, undo and bulk approve.
    • Run history: every agent run, with a trace of each step, its cost and what failed.
    • Knowledge base: the documents an agent answers from, with live ingest, failures and a test panel.
    • Onboarding: the first run of an AI product, from connecting tools to the agent doing its first real task.
    • Voice session: a live voice call with an agent, transcript, interruptions and a summary.
    • Sidebar: a workspace switcher, items, folding sections, recent chats with rename, pin and delete, and an account menu. ⌘B folds it to an icon rail; on phones it's a drawer.
    • Every border, ring and divider now comes from one small set of edge colors, and shadows share their ink.

  3. The UI kit for AI products

    • Agent task, a Pro block: a coding agent's run with a color per phase, steps, tools, usage, pause and stop.
    • Plan approval: review an agent's plan step by step, approve or skip each step, then run it.
    • Pipeline: stages whose connectors fill as work moves, over the live log of the stage you're watching.
    • Nav rail: an icon rail or bottom bar with one tooltip that glides between items and shows each shortcut.
    • Theme toggle: a sun that turns into a moon, a Light / Dark / System select, and a script that applies a stored theme before paint.
    • Code input folds into a Verifying pill, then Verified, or opens back up with the error.
    • Date picker months slide in the direction you're moving, at a constant height.
    • Softer, larger isometric drawings in empty states.
    • Install steps show each agent's mark; Select options take an icon.
    • Calmer page transitions, a numbered list of the rules on the home page, and many smaller fixes.

  4. Authorize

  5. Lighter code

    • Shipped code carries fewer comments, so it costs your agent fewer tokens.
    • Shadows follow the theme; a dialog never opens over another.

  6. More components, Tailwind CSS and Markdown docs

    • Data table: a keyboard-first virtualized grid.
    • Drawer, skeleton, pagination, breadcrumbs, search field, copy field, inline edit, badge, chip, kbd, list and avatar.
    • Tailwind CSS v4: utility classes override the components, and a theme bridge maps the tokens.
    • Every docs page copies itself as Markdown.

  7. UI Polish