# UI Polish

> UI Polish is polished UI for AI products: React components, complete screens and design rules that coding agents install over MCP, with every state, transition and edge case already designed.

Last updated: 2026-11-05

UI Polish is polished UI for AI products: React components, complete screens and design rules that coding agents install over MCP, with every state, transition and edge case already designed. Its remote MCP server gives a coding agent two things: finished React components (CSS modules) with every state, transition and edge case built in, and design rules it follows for the UI it writes itself. The components and the rules are free (MIT), with no account or key; UI Polish Pro adds the AI components (reasoning, tool steps, approvals, research progress) and Pro blocks, whole product screens, with a license key. It is not an npm package: the agent writes the component files into the project. The interactive components use Base UI (@base-ui/react) for focus, keyboard and positioning, installed alongside them.

## When to use UI Polish

Reach for it when you're writing React UI and a user would notice the details: a form field's error and hint states, a dialog's focus and scroll lock, a menu's keyboard model, a toast stack, a streaming chat or code view. Use it in these cases:
- The user asks for a component it has (see Components below): add it with `get_component` instead of writing one from scratch.
- You're about to write UI it has no component for: call `get_rules` for the topic first (motion, states, spacing, typography, surfaces, foundations) and follow its values.
- You're reviewing UI before calling it done: run the checklist (`get_rules` with topic `checklist`).
Don't use it for non-React stacks (only React with CSS modules is supported), for a full theme or brand (it brings none; map its `--ui-*` tokens onto the project's variables), or for charts, maps and rich-text editors.

## How to call it

Prefer MCP: connect https://uipolish.com/mcp (setup per client below) and call `list_components`, `get_component` and `get_rules`. Without MCP, the same content is a read-only REST API described by https://uipolish.com/openapi.json: `GET /api/components`, `GET /api/components/{name}`, `GET /api/rules/{topic}`. Errors are JSON with a code, a message and a hint. Any page on this site is also available as Markdown: send `Accept: text/markdown` or add `.md` to the path.

## Links

- [Full reference](https://uipolish.com/llms-full.txt): everything below plus every component guide, in one file
- [Introduction](https://uipolish.com/docs): connect your agent, and the tools it gets
- [Tailwind CSS](https://uipolish.com/docs/tailwind): use the components in a Tailwind v4 project
- [Design rules](https://uipolish.com/docs/rules): the rules as one file: a Claude Code skill (https://uipolish.com/skill.md) or for AGENTS.md (https://uipolish.com/rules.md)
- [Theme](https://uipolish.com/docs/theme): every component in one brand color, contrast-checked (MCP `get_theme`, or https://uipolish.com/api/theme?hue=262)
- [shadcn/ui](https://uipolish.com/docs/shadcn): install with `npx shadcn add` (registry at https://uipolish.com/r/registry.json)
- [Articles](https://uipolish.com/articles): designing MCP consent screens, tool approval and other agent UI
- [OpenAPI spec](https://uipolish.com/openapi.json): the REST API, for agents without MCP
- [About](https://uipolish.com/about), [Contact](https://uipolish.com/contact), [Privacy](https://uipolish.com/privacy)

## Questions

### What is UI Polish?
UI Polish is polished UI for AI products: React components, complete screens and design rules that coding agents install over MCP, with every state, transition and edge case already designed. It lives at uipolish.com and is made by Joseph Cortez. The components and the rules are free under the MIT license; UI Polish Pro adds the AI components and complete product screens for $149 one-time.

### What’s free, and what’s Pro?
The components are free, from buttons and fields to the chat basics (message thread, prompt input, markdown, model picker), along with the design rules, the theme builder and the free blocks: MIT-licensed, for personal, commercial and client work, with no account or key. Pro adds the AI components that show a model thinking, acting and asking (reasoning, tool steps, tool and plan approval, sources, research progress, pipelines, batch and background runs, voice input) and the Pro blocks: whole product screens like billing, team members, an approvals inbox and an agent task view, wired with every state. It costs $149 one time, includes every Pro component, block and template added later, and covers unlimited projects.

### What’s a block?
A whole screen or section, built from the components the way a real product needs it: empty, loading, error and permission-denied states, realistic data, keyboard and screen reader support, light and dark. It takes your data and callbacks as props and fetches nothing, so it drops into your app as it is. Every block has a live demo and its full guide in the docs, Pro or not.

### What’s the agent kit?
The components an AI product needs and other libraries don’t have: agent settings, authorize, background run, batch progress and code block and more. What an MCP consent screen should say, how a tool call asks permission, how a long run reports back. Every one of them is free.

### What if I disagree with one of the opinions?
Change it. Every opinion is a token in tokens.css or a line in a component’s CSS module: set --ui-dur-fast to 0ms, round the corners differently, swap the accent with get_theme, and every component follows. The code is in your project, so nothing stops you from editing a component itself, and every component takes a className for your own styles.

### Who maintains it?
Joseph Cortez, who uses it in everything he ships, including Typesheet and his own site. A component gets fixed when it falls short in one of those products or when someone reports it, and every change bumps the version list_components reports, so your agent can tell when there’s something newer.

### How do I update a component?
Ask your agent for the newer version and it writes the new files over the old ones, or run the shadcn command again with --overwrite. The code is in your project, so commit first and read the diff: anything you changed by hand shows up there, and you decide what to keep.

### Can I ask for a component or a block?
Yes. Write to support@uipolish.com with what you’re building and what’s missing. Blocks come from real products, so the ones people ask for go first.

### Are the components accessible?
Yes. The interactive ones are built on Base UI, the rest on native elements. Each one works fully from the keyboard, tells screen readers what changed, has targets of at least 24px for a mouse and 40px for touch, and respects reduced motion. Every guide lists its accessibility details.

### Do they work in dark mode?
Yes. The color tokens carry a light and a dark value, each tuned for its theme, and switch with the page's color scheme or a data-theme attribute, which the theme toggle sets for you. Map them onto your own palette and the components follow it in both.

### Is there a package to install?
One: @base-ui/react. The interactive components (menus, selects, dialogs, tabs, sliders) use Base UI for focus, keyboard, positioning and screen reader support, and your agent or the shadcn CLI installs it with them. Everything you see, from the styles and motion to the states, is in files written into your project, so you own and can change them. Ask for a newer version and the agent writes the new files over the old ones.

### Which coding agents does it work with?
Claude Code, Codex, Cursor, VS Code, Antigravity, Gemini CLI, ChatGPT and any other agent that supports remote MCP servers. The docs have the setup for each. An agent without MCP can read the same components and rules from the REST API described at /openapi.json, or ask for any docs page as Markdown by adding .md to its address.

### What does my project need?
React and CSS modules. The components read --ui-* tokens that you map onto the variables you already have. UI Polish doesn’t bring a theme, so it fits alongside whatever styling and design system you already use. With Tailwind CSS v4, the components come in Tailwind’s components layer, so your utility classes override them.

## Connect over MCP

Server URL: https://uipolish.com/mcp (Streamable HTTP, JSON-RPC 2.0). No account, sign-in or key.

### Claude Code
Run this in your project:
```
claude mcp add --transport http uipolish https://uipolish.com/mcp
```
Then run `/mcp` in Claude Code to check that UI Polish is connected.

### Codex
Run this once:
```
codex mcp add uipolish --url https://uipolish.com/mcp
```
Codex picks up UI Polish the next time it starts.

### Cursor
Add this to `.cursor/mcp.json` in your project, or `~/.cursor/mcp.json` for every project:
```
{ "mcpServers": { "uipolish": { "url": "https://uipolish.com/mcp" } } }
```
Cursor shows UI Polish under Settings → MCP.

### VS Code
Run this once:
```
code --add-mcp '{"name":"uipolish","type":"http","url":"https://uipolish.com/mcp"}'
```
Then start UI Polish from the MCP list in VS Code.

### Antigravity
Add this to `~/.gemini/config/mcp_config.json`, or `.agents/mcp_config.json` in your project:
```
{ "mcpServers": { "uipolish": { "serverUrl": "https://uipolish.com/mcp" } } }
```
Antigravity loads it the next time it starts.

### Gemini CLI
Run this in your project:
```
gemini mcp add --transport http uipolish https://uipolish.com/mcp
```
Gemini CLI connects the next time it starts.

### ChatGPT
In ChatGPT settings, add a custom connector (developer mode) with this server URL and no authentication:
```
https://uipolish.com/mcp
```
Then turn the connector on in a chat.

### Any MCP client
Add a remote MCP server over Streamable HTTP with this URL:
```
https://uipolish.com/mcp
```
No sign-in. Everything works right away.

## MCP tools

- `get_rules(topic)`: Foundation rules: concrete values for motion, states, typography, spacing, surfaces, focus and anti-patterns. Pass a topic for one file; omit it for the token roles, the finished? checklist and the list of topics.
- `list_components()`: Every UI Polish template, block and component with a one-line summary and version. Templates are whole working apps (a chat app, an agent console, an agent workspace for coding); blocks are whole screens (sign-in, billing, team members, an approvals inbox, an agent task). Those marked pro need a UI Polish Pro license key.
- `get_component(name, stack, tailwind)`: The code and guide for one component, block or template: when and when not to use it, every state, motion specs, accessibility notes, before/after. Includes the components it depends on and the npm packages to install. A template's own files come with the project path to write each one at (app/(app)/chat/page.tsx). Pro blocks and templates need a license key on the connection; without one they return a summary and how to get one.
- `get_theme(hue, tint, brand)`: A color theme from one hue: the --ui-* accent, the text on it and in it, optionally tinted grays and accent primary buttons, light and dark, with every text color solved for 4.5:1 contrast. Returns CSS to paste after tokens.css. Use it when the project has a brand color.

## Rules topics
Fetch with `get_rules(topic)`. `tokens` returns the --ui-* token roles; `checklist` returns the finished? checklist; `tailwind` returns the setup for Tailwind CSS v4 projects.

- `antipatterns`: Anti-patterns: the rules nobody writes down. Check these before anything cosmetic.
- `foundations`: Foundations. One system for everything downstream.
- `motion`: Motion & microinteractions. The interface responds to the user.
- `spacing`: Spacing & layout. Spacing that encodes relationships.
- `states`: States. The interface has an answer for every moment — loading, empty, error, disabled, success — not just the happy path with data.
- `surfaces`: Surfaces & depth. Surfaces that read as physical without shouting.
- `typography`: Typography. Hierarchy you can feel without reading.

## Components
Add one by asking the agent, which calls `get_component(name)`.

- [Agent console](https://uipolish.com/docs/agent-console) (`agent-console`, ): A working console for running AI agents, for the Next.js App Router: emailed-code sign-in, a sidebar with workspaces, live runs with their full traces, an approvals inbox that pauses a run until someone decides, a knowledge base the agents search, per-agent model, tools, permissions and limits, usage against a monthly limit, and workspace settings. Runs come from a mock runner until a model is set (Anthropic, OpenAI or any OpenAI-compatible API), or until you plug yours in; the runner, auth and storage each sit behind one small file you swap.
- [Agent workspace](https://uipolish.com/docs/agent-workspace) (`agent-workspace`, ): A working Next.js app for coding with agents, in three calm panes: a sidebar with workspaces, pinned and recent sessions (shared ones with their faces) and the team's presence; open sessions as tabs over a conversation whose tool calls fold to one line, with the files each turn changed as chips; and a changes pane with the pull request's merge status, all files, changes with diff stats, checks, review and a run panel. A scripted mock agent edits, tests, opens the pull request and runs its checks until you connect a model (Anthropic, OpenAI or any OpenAI-compatible API) or your own agent; the agent, sign-in and storage each sit behind one small file.
- [Chat app](https://uipolish.com/docs/ai-chat-app) (`ai-chat-app`, ): A working AI chat app for the Next.js App Router: sign-in with an emailed code, a sidebar with workspaces and chat history, chats that stream from Claude, OpenAI or any OpenAI-compatible API (or a mock until one is set) with reasoning, tool steps and sources, and settings for the assistant, billing and members. Auth, storage and the model each sit behind one small file you swap.
- [Agent task](https://uipolish.com/docs/agent-task) (`agent-task`, ): The live view of an agent doing a multi-step task: a phase whose color runs through the card, a checklist, a panel that shows what it's reading, searching, weighing, writing or revising, the tool in use, the model, and tokens, cost and time that never shift. Pause, stop, and run again.
- [Approvals inbox](https://uipolish.com/docs/approvals-inbox) (`approvals-inbox`, ): A review queue for anything that needs a sign-off: expenses, time off, discounts, access, refunds, payments, posts and config changes, asked for by people or by agents. A list on the left, filtered by status and searchable, optionally grouped by requester or due date; the request in full on the right, drawn as the payment, message, post, diff, deletion, key/value change or code it is (or your own preview), with the requester's note and who it reaches. Approve, decline with a note, or edit then approve, from the keyboard too, with due dates, bulk approve and an undo window before anything is sent.
- [Billing](https://uipolish.com/docs/billing) (`billing`, ): The billing settings page of a SaaS product: current plan, usage meters that warn at 80% and say what to do at 100%, plan changes with proration and what a downgrade loses, payment method, billing details, invoices and cancel. Trial, past-due and canceled states included.
- [Knowledge base](https://uipolish.com/docs/knowledge-base) (`knowledge-base`, ): The screen where a team gives its AI agent documents to answer from: upload files, add a site or sitemap, or connect Google Drive, Notion or Dropbox; watch each source move through reading, chunking and indexing with counts that never shift; retry failures, re-sync, remove, see usage against the plan, and test which passages a question retrieves.
- [Onboarding](https://uipolish.com/docs/onboarding) (`onboarding`, ): The first-run setup for an AI product, in four steps: the workspace, the tools the agent may use (each with its own consent and a connect that can fail or stall), what the agent may do without asking, and a first task it streams in front of you. The panel's height glides between steps, steps slide the way you're going, and every answer is handed back to save and resume.
- [Pricing](https://uipolish.com/docs/pricing) (`pricing`, ): The public pricing page of an AI SaaS product: a monthly/yearly switch with the saving said quietly, plan cards whose prices roll between the two without moving anything, per-seat and usage-based notes ("then $4 per 1,000 credits"), one featured plan, an Enterprise row, a full comparison table with a sticky plan header and a plan picker on phones, and questions in an accordion. Choosing a plan waits on your async callback and says what went wrong if it fails.
- [Run history](https://uipolish.com/docs/run-history) (`run-history`, ): The screen where a team inspects past AI agent runs: a filterable, paged table of runs with live ones counting up in place, and a run's trace as a calm waterfall of model and tool calls, with retries and the failing step called out, collapsed long outputs, a token and cost breakdown, the final output, and Re-run, Copy ID and Share link.
- [Settings](https://uipolish.com/docs/settings) (`settings`, ): The settings screen of an AI product's workspace: name, URL, logo, time zone and deleting the workspace; API keys with scopes and expiry, the secret shown once, revoke and flags for expired or unused keys; the default model, per-feature models, a monthly spend limit with an alert threshold, rate limits and usage against them; and notification switches per channel with a test send. One save bar holds unsaved changes, with inline validation, optimistic saves that roll back, a leave guard, a read-only viewer state and loading skeletons.
- [Sign in](https://uipolish.com/docs/sign-in) (`sign-in`, ): A passwordless sign-in and sign-up screen: work email, then a one-time code with a resend countdown, plus optional OAuth providers and SSO by work domain. Wrong, expired and rate-limited codes, blocked domains and failed providers each say what to do next.
- [Team members](https://uipolish.com/docs/team-members) (`team-members`, ): The members section of a workspace's settings: everyone's role and last activity, invites by pasting a list of addresses with seat limits enforced, pending invites to resend or revoke, and guards so the last owner can't be removed. Optimistic role changes roll back with an inline error.
- [Voice session](https://uipolish.com/docs/voice-session) (`voice-session`, ): A live voice call with an AI agent: a calm visual of who's speaking, a state label that morphs in place, a transcript where the agent's words appear as they're said and lookups show inline, mute, device and captions controls, and a summary of what was decided when you hang up. Covers a blocked or missing mic, slow connections, network drops and agent errors.
- [Agent settings](https://uipolish.com/docs/agent-settings) (`agent-settings`, agent kit): A whole settings screen for an AI agent, built from the kit: model, MCP connections, what it may do without asking, a daily spending limit and memory. Every change saves in its row, and a sticky section nav follows you down the page.
- [Authorize](https://uipolish.com/docs/authorize) (`authorize`, agent kit): The consent screen an MCP server shows when an agent asks to connect: who's asking, what it will be able to do, and where you go back to. Risky permissions start off.
- [Background run](https://uipolish.com/docs/background-run) (`background-run`, agent kit): An agent task that keeps going while the person is elsewhere. One calm row says how it’s going in a glyph and one line, marks what finished while they were away, and opens to its progress, what changed and up to two actions.
- [Batch progress](https://uipolish.com/docs/batch-progress) (`batch-progress`, agent kit): An agent working through many items at once: a header with done of total, the clock and time left over a segmented track, then every item as a row with its status, result and time. Filter to what's running, failed or done; pause, resume or stop; retry one failure or all of them. Windowed, so 1,000 items scroll like 10.
- [Code block](https://uipolish.com/docs/code-block) (`code-block`, agent kit): Code block for AI apps that streams in without flashing or jumping. Copy, line wrap and calm token-colored highlighting are built in, with no highlighter library.
- [Connections](https://uipolish.com/docs/connections) (`connections`, agent kit): The agent app's list of MCP servers: one quiet row each, a switch, and a status line that says what's wrong and the one thing that fixes it. Adds a server by URL and hands sign-in to the browser.
- [Diff stat](https://uipolish.com/docs/diff-stat) (`diff-stat`, agent kit): Lines added and removed, “+12 −3”, in the type around it: added in green, removed in red, figures of equal width, and one sentence for screen readers.
- [Diff view](https://uipolish.com/docs/diff-view) (`diff-view`, agent kit): Unified diff with the changed part of each line marked and unchanged stretches folded. In streaming mode, new lines fade in as they arrive.
- [File changes](https://uipolish.com/docs/file-changes) (`file-changes`, agent kit): The files an agent changed, one 32px row each: what happened to the file, its folder muted and cut from the start so the name stays whole, and lines added and removed. A totals line, selection that follows the arrow keys, loading and empty states, and a chip for naming a file inline.
- [Markdown](https://uipolish.com/docs/markdown) (`markdown`, agent kit): Renders a model's markdown reply while it streams: no flash of raw asterisks, backticks or half-typed tables, code fences open as live code blocks, and HTML in the reply shows as text.
- [Merge status](https://uipolish.com/docs/merge-status) (`merge-status`, agent kit): A pull request in one line: its number linking out, where it stands (draft, checks running, a check failed, conflicts, ready, merged) in its status color, and the move it's waiting for: a Merge button in the success color once it's ready, busy until the merge lands.
- [Message thread](https://uipolish.com/docs/message-thread) (`message-thread`, agent kit): Chat transcript that fades in only the newly streamed words. It stays pinned to the bottom until you scroll up and announces each reply once it ends.
- [Model picker](https://uipolish.com/docs/model-picker) (`model-picker`, agent kit): Compact trigger that resizes to fit the current model’s name. It opens a list of models with one-line descriptions and a drawn check on the selection.
- [Pipeline](https://uipolish.com/docs/pipeline) (`pipeline`, agent kit): A multi-stage run (a deploy, an import, a sync) as a row of nodes whose connectors fill as each stage finishes, over the live output of the stage you’re looking at. A failure stops where it happened, says why, and offers Retry.
- [Plan approval](https://uipolish.com/docs/plan-approval) (`plan-approval`, agent kit): The moment an agent proposes a multi-step plan and the person reviews it before anything runs. Approve or skip each step from the keyboard, then watch the steps check in as the plan runs.
- [Reasoning](https://uipolish.com/docs/reasoning) (`reasoning`, agent kit): The thinking block of an AI reply: the current step as a label that rises to each new one, a live timer and a short window of reasoning. It folds to “Thought for 8s” when the answer starts.
- [Research progress](https://uipolish.com/docs/research-progress) (`research-progress`, agent kit): The live view of an agent researching the web, as one quiet line: “Reading 4 of 9 sources”, a few of the sites’ marks and the elapsed time. Open it for the searches and every source, each with its status, and the reason any couldn’t be read.
- [Sources](https://uipolish.com/docs/sources) (`sources`, agent kit): Numbered citation markers for AI answers, each with a preview card on hover, focus or tap. Markers and the source list highlight each other.
- [Tool approval](https://uipolish.com/docs/tool-approval) (`tool-approval`, agent kit): The card an agent shows when a tool call needs your OK. Says what will happen in words, weighs sends, deletes and payments, and settles into one line once you answer.
- [Tool steps](https://uipolish.com/docs/tool-steps) (`tool-steps`, agent kit): An agent’s actions as a quiet timeline. Each step opens to its raw input and output, and the list folds to “Ran 5 steps in 12s” when the run ends.
- [Turn summary](https://uipolish.com/docs/turn-summary) (`turn-summary`, agent kit): The work behind an agent's answer, folded to one quiet line, “17 tool calls, 3 messages”, that opens to its notes and tool calls; and the footer under the answer, with the files it changed and their diff stats, how long it took, Copy and More.
- [Usage meter](https://uipolish.com/docs/usage-meter) (`usage-meter`, agent kit): How much of an agent’s context window or spending budget is used, as a ring and a percentage in the composer toolbar. Opens to a breakdown, warns before the limit and offers to compact.
- [Voice input](https://uipolish.com/docs/voice-input) (`voice-input`, agent kit): Mic button whose circle opens into a recording bar with a scrolling waveform, a timer and Stop. A blocked mic gets a plain explanation.
- [Accordion](https://uipolish.com/docs/accordion) (`accordion`, ): Disclosure sections that open on a grid-row transition, one or several at a time. An item named in the URL hash is already open on first paint.
- [Alert](https://uipolish.com/docs/alert) (`alert`, ): Inline banner for info, success, warning and error. It reserves its space up front or opens on a press, so a late status never pushes the page.
- [Avatar](https://uipolish.com/docs/avatar) (`avatar`, ): Photo with initials on an opaque quiet fill behind it, or a head and shoulders with no name. A quick photo never flashes initials, a broken one never shows its broken mark, and groups overlap with a +N that says how many.
- [Badge](https://uipolish.com/docs/badge) (`badge`, ): A static label for a status or a count, exactly as tall as the line it sits in. Counts are round for one digit and set in equal-width figures.
- [Breadcrumbs](https://uipolish.com/docs/breadcrumbs) (`breadcrumbs`, ): Trail of links to the current page. A long middle folds into a … that opens in place, long labels fade instead of wrapping, and any router’s link fits.
- [Button](https://uipolish.com/docs/button) (`button`, ): Pill button that presses instantly and springs back. The busy state keeps its width, and the label morphs when its text changes.
- [Checkbox](https://uipolish.com/docs/checkbox) (`checkbox`, ): Base UI checkbox whose tick draws on and off. The mixed-state dash morphs into the tick, and the box aligns to the first line of its label.
- [Chip](https://uipolish.com/docs/chip) (`chip`, ): Filter chips that stay pressed, and removable chips with their own named remove button. A plus swings into a check without changing the width, and removed chips fade before the rest slide into place.
- [Code input](https://uipolish.com/docs/code-input) (`code-input`, ): One-time code boxes that fill from a paste or platform autofill and step back on Backspace. The active box shows a dark edge and a caret, invalid shows in the edges; an optional status folds the boxes into a centered, edgeless Verifying pill that turns to Verified, or opens back up on a wrong code.
- [Combobox](https://uipolish.com/docs/combobox) (`combobox`, ): Type-to-filter autocomplete for local or async results. Each match marks the typed text, and stale results stay in place while new ones load.
- [Command palette](https://uipolish.com/docs/command-palette) (`command-palette`, ): ⌘K palette with fuzzy matching, recents and grouped results. Async sources never flash a loading state, and the height follows the results.
- [Copy field](https://uipolish.com/docs/copy-field) (`copy-field`, ): Read-only value with a Copy button whose icon turns into a check and says “Copied” to screen readers. A secret masks as a fixed row of dots that gives away nothing about its length.
- [Data table](https://uipolish.com/docs/data-table) (`data-table`, ): Keyboard-first grid for real data: one tab stop, arrow keys between cells, a stable sort whose arrow flips its head, columns resized by pointer or keys, range selection, and thousands of rows virtualized without a dependency.
- [Date picker](https://uipolish.com/docs/date-picker) (`date-picker`, ): Date field that opens a calendar dialog with full grid keyboard support. Months slide a short way in the direction you moved, crossfading inside a soft-edged panel, and ranges are optional.
- [Dialog](https://uipolish.com/docs/dialog) (`dialog`, ): Modal that grows out of its trigger and eases to fit its content as steps change. It locks scroll without a shift and asks before discarding edits.
- [Drawer](https://uipolish.com/docs/drawer) (`drawer`, ): Modal panel that slides in from the end edge, and on phones rises as a sheet you drag down to dismiss, at the speed of your flick. The body scrolls between a header and footer that stay put.
- [Dropdown menu](https://uipolish.com/docs/dropdown-menu) (`dropdown-menu`, ): Menu button with checkbox, radio and submenu items. Submenus forgive a diagonal pointer path, and pointer and keyboard share one highlight.
- [Empty state](https://uipolish.com/docs/empty-state) (`empty-state`, ): The message for an empty list or view: a clean isometric line drawing with crisp corners (a stack, a box, a folder, a tray, a magnifier, a calendar or an unplugged cord), drawn once as it comes into view, with a title, one sentence and one action.
- [File upload](https://uipolish.com/docs/file-upload) (`file-upload`, ): Drop zone with a fixed-height file list. Each row fills with its upload progress, and the list scrolls inside its height, so the page never moves.
- [Inline edit](https://uipolish.com/docs/inline-edit) (`inline-edit`, ): Text that becomes an input where it stands, in the same font and the same place, so not a letter moves. Enter saves, Escape restores, and an error keeps you editing.
- [Kbd](https://uipolish.com/docs/kbd) (`kbd`, ): A key or a shortcut as the reader’s keyboard labels it: ⌘K on Apple, Ctrl K elsewhere. Decided before the first paint, so the server and the browser agree and nothing moves.
- [List](https://uipolish.com/docs/list) (`list`, ): Rows of peers, static, links or buttons, each row one tab stop with nothing nested inside it. Secondary actions show on hover or focus without moving anything, and every row keeps its height in every state.
- [Nav rail](https://uipolish.com/docs/nav-rail) (`nav-rail`, ): A compact app rail of icon items. One tooltip glides from item to item, easing to each label’s width with the shortcut beside it, and a raised capsule glides to the current page.
- [Number input](https://uipolish.com/docs/number-input) (`number-input`, ): Spinbutton whose − and + buttons speed up while held. A typed value outside min or max is pulled into range, with a note that says so.
- [Pagination](https://uipolish.com/docs/pagination) (`pagination`, ): Page numbers in a fixed number of slots, so the control never changes width as you page. Numbers slide under one moving pill, and Next stays focusable at the end.
- [Phone input](https://uipolish.com/docs/phone-input) (`phone-input`, ): Phone field with a country picker. The number groups as you type without moving the caret, a pasted +44 number picks its country, and the form gets E.164.
- [Popover](https://uipolish.com/docs/popover) (`popover`, ): Click-triggered panel anchored to its trigger. It moves focus into forms, leaves it on the trigger for explanations, and returns it on close.
- [Progress](https://uipolish.com/docs/progress) (`progress`, ): Linear progress whose fill moves on a spring. The indeterminate state sweeps a band of light through the track, and a segmented variant shows named steps.
- [Prompt input](https://uipolish.com/docs/prompt-input) (`prompt-input`, AI): Chat composer that grows with its text and sends on Enter, never mid-IME. Send turns into Stop while a reply streams, and dropped files become chips.
- [Radio group](https://uipolish.com/docs/radio-group) (`radio-group`, ): Base UI radios in a fieldset, as a list or as cards. The mark opens from its center, arrow keys choose, and the whole group takes one tab stop.
- [Response actions](https://uipolish.com/docs/response-actions) (`response-actions`, AI): The row under an assistant reply: copy, thumbs up and down, and retry. A thumbs down can open a “What went wrong?” field in place.
- [Scroll area](https://uipolish.com/docs/scroll-area) (`scroll-area`, ): Scroll container whose edges fade with a mask only where more content remains. It works on any background and scrolls by keyboard.
- [Search field](https://uipolish.com/docs/search-field) (`search-field`, ): Search input whose clear button fades in over room it already holds, so the text never moves. Escape clears, then leaves, and the magnifier breathes while results load.
- [Segmented control](https://uipolish.com/docs/segmented-control) (`segmented-control`, ): Base UI radio group with the Tabs' look: a clear hairline track and one flat pill that glides to the checked option. Arrow keys and form values come with the group.
- [Select](https://uipolish.com/docs/select) (`select`, ): Select-only combobox whose trigger fits the chosen label and morphs to the next one. Touch screens get the native picker instead.
- [Sidebar](https://uipolish.com/docs/sidebar) (`sidebar`, ): The app sidebar for an AI product: a workspace switcher, items with counts and shortcuts, folding sections, a recent chats list with rename, pin and delete, and an account menu. Collapses to an icon rail with one gliding tooltip, and becomes a drawer on phones.
- [Skeleton](https://uipolish.com/docs/skeleton) (`skeleton`, ): Placeholders shaped like the content on its way, with text lines exactly as tall as the text, so the swap moves nothing. One element per bone; one soft diagonal sheen crosses every skeleton on the page together, and nothing shows for loads under 300ms.
- [Slider](https://uipolish.com/docs/slider) (`slider`, ): A label row with a steady-width value over a sunken track, an accent range and a raised capsule thumb that glides to place. Base UI's slider underneath handles pointer, keyboard and touch.
- [Stat](https://uipolish.com/docs/stat) (`stat`, ): A figure with its label and a change stated by both an arrow and words. The hint always takes two lines, so tiles in a row stay level.
- [Switch](https://uipolish.com/docs/switch) (`switch`, ): Base UI switch with role="switch": the segmented control in miniature, a sunken track with a raised pill that glides across. Two sizes on the control scale and a busy state for saves.
- [Tabs](https://uipolish.com/docs/tabs) (`tabs`, ): Tabs built on Base UI, with a pill that stretches from one tab to the next. Optional URL sync supports back and forward, and panels crossfade in place.
- [Text field](https://uipolish.com/docs/text-field) (`text-field`, ): Labeled input that validates when you leave it and clears the error as soon as the value is fixed. The error takes the hint’s line, so nothing shifts.
- [Theme toggle](https://uipolish.com/docs/theme-toggle) (`theme-toggle`, ): Icon capsule that switches light and dark: one drawing where the sun's disc grows into a crescent as a second circle slides over it. Stores the choice, follows the system until there is one, and paints the right theme before the first frame.
- [Toast](https://uipolish.com/docs/toast) (`toast`, ): Imperative toasts in a collapsed stack that fans out on hover. Timers pause while you read, and a flick swipes a toast away.
- [Tooltip](https://uipolish.com/docs/tooltip) (`tooltip`, ): Short hint that opens after a pause, then instantly as you move between triggers. Keyboard focus opens it at once.