# Designme.dev > 107 free, MIT-licensed UI components for products built around AI agents: status pills, reasoning trails, tool calls, permission gates, plan reviews, run summaries and more, plus the app basics around them (charts, dates, forms, tables). Each one comes as plain HTML, CSS and JS, or as a typed React component with no dependencies beyond React, in two styles (Soft and Blueprint) with light and dark mode. Install with the CLI, which copies each component's source into your project so you own it: - HTML: `npx designme add ` adds the component and the shared core it needs. - React: `npx designme add --react` adds a `.tsx` component and its CSS. Needs React 19, and works with Next.js (App Router), Vite and Astro islands. Every class, CSS variable and animation name starts with `dm-` in the React version, so the components sit beside Tailwind or any other CSS. Each component below links to its page as Markdown: what it is for, how to install and use it, its React props, questions and its React source. The same page with a live demo is at the same address without `.md`, and every component is listed at https://designme.dev/components. ## Docs - [Introduction](https://designme.dev/docs/introduction.md): What designme.dev is: free components for AI agent products, in HTML or React, in two styles with light and dark mode. - [Installation](https://designme.dev/docs/installation.md): Add components to your project with the designme CLI, as HTML, CSS and JavaScript or as React components. - [Theming](https://designme.dev/docs/theming.md): Switch between Soft and Blueprint, light and dark, and set your own accent and its roles. - [Accessibility](https://designme.dev/docs/accessibility.md): The roles, keyboard support, touch tap areas, reduced motion and contrast work built into the components. - [Using with AI](https://designme.dev/docs/using-with-ai.md): Point a coding agent at the Markdown copy of every page and at llms.txt, and prompt it to install components with the CLI. ## Agent components ### Conversation Everything for asking, answering and replying, by text or by voice. - [Live answer](https://designme.dev/components/live-answer.md): Answers that stream in with numbered sources and next steps. Install: `npx designme add live-answer` - [Composer](https://designme.dev/components/composer.md): Message input with attachments, what to work on, a mode and dictation. Install: `npx designme add composer` - [Thread panel](https://designme.dev/components/thread-panel.md): Switch between agent threads and reply in place. Install: `npx designme add thread-panel` - [Artifact card](https://designme.dev/components/artifact-card.md): A file the agent made, with its versions, Open, Copy and Download. Install: `npx designme add artifact-card` - [Rich text editor](https://designme.dev/components/rich-text-editor.md): A minimal editor with an inline AI menu that streams a suggestion to accept or discard. Install: `npx designme add rich-text-editor` - [Tool call](https://designme.dev/components/tool-call.md): Each tool the agent calls, with its input and output. Install: `npx designme add tool-call` - [Voice capture](https://designme.dev/components/voice-capture.md): Talk to the agent, then fix what it misheard before sending. Install: `npx designme add voice-capture` - [Voice orb](https://designme.dev/components/voice-orb.md): A hands-free voice chat, with an orb that shows who is talking. Install: `npx designme add voice-orb` - [Answer action bar](https://designme.dev/components/answer-action-bar.md): Copy, regenerate, rate and listen to an answer from one row under it. Install: `npx designme add answer-action-bar` - [Response versions](https://designme.dev/components/response-versions.md): Regenerate an answer and flip between versions. Install: `npx designme add response-versions` - [Model picker](https://designme.dev/components/model-picker.md): Pick a model by speed, quality and cost, and how hard it thinks. Install: `npx designme add model-picker` - [Prompt starters](https://designme.dev/components/prompt-starters.md): Suggested tasks that fill the composer in one click. Install: `npx designme add prompt-starters` - [Prompt library](https://designme.dev/components/prompt-library.md): Saved prompts with blanks to fill in before they go to the agent. Install: `npx designme add prompt-library` - [Attachment tray](https://designme.dev/components/attachment-tray.md): Drop files for the agent and watch each one upload. Install: `npx designme add attachment-tray` - [Feedback sheet](https://designme.dev/components/feedback-sheet.md): Rate an answer and tell the agent what missed. Install: `npx designme add feedback-sheet` ### Agent status Show what the agent is doing, how far along it is, and what it is working with. - [Thinking](https://designme.dev/components/thinking.md): The live trace, written as the agent works, then folded away. Install: `npx designme add thinking` - [Reasoning trail](https://designme.dev/components/reasoning-trail.md): The agent's plan, notes, sources and edits, after it thinks. Install: `npx designme add reasoning-trail` - [Agent lanes](https://designme.dev/components/agent-lanes.md): Several agents working in parallel, each with its own lane and hand-offs. Install: `npx designme add agent-lanes` - [Agent tree](https://designme.dev/components/agent-tree.md): An orchestrator and its sub-agents, with cost rolled up per branch. Install: `npx designme add agent-tree` - [Agent inbox](https://designme.dev/components/agent-inbox.md): Every run that needs you, is running or is done, in one list. Install: `npx designme add agent-inbox` - [Trace view](https://designme.dev/components/trace-view.md): One agent run as a waterfall of spans, with latency and tokens. Install: `npx designme add trace-view` - [Browser session](https://designme.dev/components/browser-session.md): The agent browsing for you, step by step, with Pause and Take over. Install: `npx designme add browser-session` - [Run summary](https://designme.dev/components/run-summary.md): What the agent did, what changed and what needs you. Install: `npx designme add run-summary` - [Agent run timeline](https://designme.dev/components/agent-run-timeline.md): Every model and tool step of a run on one time axis. Install: `npx designme add agent-run-timeline` - [Action log](https://designme.dev/components/action-log.md): Every read, search, edit and command, logged as it runs. Install: `npx designme add action-log` - [Context meter](https://designme.dev/components/context-meter.md): How full the context is and what fills it, with Compact to free room. Install: `npx designme add context-meter` - [Error and recovery](https://designme.dev/components/error-recovery.md): A failed step with retry, skip or hand over to a person. Install: `npx designme add error-recovery` - [Run queue](https://designme.dev/components/run-queue.md): Grouped tasks with live progress, retries and a compact view. Install: `npx designme add run-queue` - [Run cost](https://designme.dev/components/run-cost.md): Live credit and token spend, with a cap that pauses the run. Install: `npx designme add run-cost` - [Toast stack](https://designme.dev/components/toast-stack.md): Agent notifications that stack and fan out on hover. Install: `npx designme add toast-stack` - [Toast](https://designme.dev/components/toast.md): One notification that changes shape with its state. Install: `npx designme add toast` - [Status pill](https://designme.dev/components/status-pill.md): One live line for what the agent is doing right now. Install: `npx designme add status-pill` - [Step loader](https://designme.dev/components/step-loader.md): Named steps with a progress track and four loaders. Install: `npx designme add step-loader` ### Review and approve Moments where a person checks, steers or signs off on the agent's work. - [Change review](https://designme.dev/components/change-review.md): Accept or reject each change the agent made, file by file. Install: `npx designme add change-review` - [Plan review](https://designme.dev/components/plan-review.md): Check the agent's plan, edit steps, then let it run. Install: `npx designme add plan-review` - [Permission gate](https://designme.dev/components/permission-gate.md): The agent asks before it touches something new. Install: `npx designme add permission-gate` - [Hand-off to a person](https://designme.dev/components/human-handoff.md): The agent hands a conversation to a person, with what they need to pick it up. Install: `npx designme add human-handoff` - [Decision prompt](https://designme.dev/components/decision-prompt.md): The agent asks a few quick questions before it starts. Install: `npx designme add decision-prompt` - [Proposal card](https://designme.dev/components/proposal-card.md): A suggested change with confidence, alternatives and undo. Install: `npx designme add proposal-card` - [Design tuner](https://designme.dev/components/design-tuner.md): Tweak a component by hand or let the agent tune it. Install: `npx designme add design-tuner` - [Rewrite toolbar](https://designme.dev/components/rewrite-toolbar.md): Select a sentence and let the agent rewrite it in place. Install: `npx designme add rewrite-toolbar` - [Launch checklist](https://designme.dev/components/launch-checklist.md): The agent checks a design before it ships, and fixes what fails. Install: `npx designme add launch-checklist` - [Inline text diff](https://designme.dev/components/inline-text-diff.md): The agent's edits to a piece of copy, accepted or rejected one by one. Install: `npx designme add inline-text-diff` - [Draft review](https://designme.dev/components/draft-review.md): An email the agent drafted, to check and edit before it sends. Install: `npx designme add draft-review` - [Steering](https://designme.dev/components/steering.md): Change the agent's course while it works, without starting over. Install: `npx designme add steering` - [Eval results](https://designme.dev/components/eval-results.md): An eval run case by case, against the run before. Install: `npx designme add eval-results` - [Design review](https://designme.dev/components/design-review.md): Checks run, a teammate asks for a change, the agent makes it, and you ship. Install: `npx designme add design-review` ### Sources and output What the agent read, what it produced and where each answer came from. - [Code viewer](https://designme.dev/components/code-viewer.md): Code the agent wrote, with line notes you can ask about. Install: `npx designme add code-viewer` - [Terminal stream](https://designme.dev/components/terminal-stream.md): Shell commands the agent runs, with their output as it streams in. Install: `npx designme add terminal-stream` - [Citation hover card](https://designme.dev/components/citation-hover-card.md): Hover a citation to see the exact passage it came from. Install: `npx designme add citation-hover-card` - [Source stack](https://designme.dev/components/source-stack.md): Everything the agent read, folded into one quiet pill. Install: `npx designme add source-stack` - [Field extraction](https://designme.dev/components/field-extraction.md): The agent pulls fields out of a document and shows where each came from. Install: `npx designme add field-extraction` - [Metric insight](https://designme.dev/components/metric-insight.md): A number, its trend, and the agent's read on why it moved. Install: `npx designme add metric-insight` - [Details panel](https://designme.dev/components/details-panel.md): Properties of a run you can change in place. Install: `npx designme add details-panel` - [Task table](https://designme.dev/components/task-table.md): Agent tasks in a sortable table with bulk actions. Install: `npx designme add task-table` ### Workspace Navigation, search, settings, models and automations around the agent. - [Automation canvas](https://designme.dev/components/automation-canvas.md): A trigger, a few agent steps, and a run you can watch flow through. Install: `npx designme add automation-canvas` - [Canvas toolbar](https://designme.dev/components/canvas-toolbar.md): A floating toolbar for a workflow canvas: run, pick a tool, comment, fit and zoom. Install: `npx designme add canvas-toolbar` - [Command palette](https://designme.dev/components/command-palette.md): Jump anywhere or hand a task to the agent from one box. Install: `npx designme add command-palette` - [Memory panel](https://designme.dev/components/memory-panel.md): What the agent remembers about your team, editable and removable. Install: `npx designme add memory-panel` - [Model compare](https://designme.dev/components/model-compare.md): Run one prompt on three models side by side and keep the best. Install: `npx designme add model-compare` - [Agent settings](https://designme.dev/components/agent-settings.md): How much the agent may do alone, with a save bar for changes. Install: `npx designme add agent-settings` - [Tools and connections](https://designme.dev/components/tool-connections.md): The tools the agent can reach, and how much it may do with each. Install: `npx designme add tool-connections` - [Knowledge sources](https://designme.dev/components/knowledge-sources.md): The files, sites and folders the agent knows, and how far each is indexed. Install: `npx designme add knowledge-sources` - [Scheduled runs](https://designme.dev/components/scheduled-runs.md): Tasks the agent runs on a schedule, with their last result and a switch. Install: `npx designme add scheduled-runs` - [File explorer](https://designme.dev/components/file-explorer.md): Project files, with the ones the agent touched marked. Install: `npx designme add file-explorer` - [Workspace rail](https://designme.dev/components/workspace-rail.md): A slim app rail that opens into a labelled sidebar. Install: `npx designme add workspace-rail` ### Harness A live agent conversation built only from the components above. Pick a starter and watch them work together. - [Agent harness](https://designme.dev/components/agent-harness.md): Every component working together in one agent app. Install: `npx designme add agent-harness` ## App basics ### Charts and tables Lightweight charts and tables for dashboards and reports, drawn in plain SVG and HTML. - [Line chart](https://designme.dev/components/line-chart.md): Two series over time with a hover readout and toggles. Install: `npx designme add line-chart` - [Bar chart](https://designme.dev/components/bar-chart.md): Weekly agent runs, split by outcome, with a range switch. Install: `npx designme add bar-chart` - [Donut chart](https://designme.dev/components/donut-chart.md): Where the agent's time went, by kind of task. Install: `npx designme add donut-chart` - [Funnel chart](https://designme.dev/components/funnel-chart.md): Signup to paid, with the biggest drop called out by the agent. Install: `npx designme add funnel-chart` - [Top pages](https://designme.dev/components/top-pages.md): Most visited pages with share of traffic and a quick sort. Install: `npx designme add top-pages` - [Health score](https://designme.dev/components/health-score.md): A design system score made of a few checks you can open. Install: `npx designme add health-score` - [Activity heatmap](https://designme.dev/components/activity-heatmap.md): When the agent and the team were busy, by day and hour. Install: `npx designme add activity-heatmap` - [Stat cards](https://designme.dev/components/stat-cards.md): Four headline numbers with sparklines and a period switch. Install: `npx designme add stat-cards` - [Account table](https://designme.dev/components/account-table.md): Customer accounts with health, plan and an agent note per row. Install: `npx designme add account-table` ### Dates Pickers for single dates and date ranges. - [Date picker](https://designme.dev/components/date-picker.md): A field that opens a calendar, with quick picks and natural language. Install: `npx designme add date-picker` - [Segmented control](https://designme.dev/components/segmented-control.md): Switch between views of the same thing, with a sliding indicator. Install: `npx designme add segmented-control` - [Date range picker](https://designme.dev/components/date-range-picker.md): Pick a start and end across two months, or use a preset. Install: `npx designme add date-range-picker` - [Event calendar](https://designme.dev/components/event-calendar.md): A week view where the agent finds a free slot for you. Install: `npx designme add event-calendar` - [Agenda](https://designme.dev/components/agenda.md): Today's schedule with a live now line and agent prep notes. Install: `npx designme add agenda` ### Forms and inputs Buttons, fields, pickers and sign-in flows for any product. - [Buttons](https://designme.dev/components/buttons.md): Every button style, with loading, success and hold-to-confirm states. Install: `npx designme add buttons` - [Badge](https://designme.dev/components/badge.md): Small labels for plans, environments and status, with a dot, an icon or a remove button. Install: `npx designme add badge` - [Tooltip](https://designme.dev/components/tooltip.md): Quiet labels on hover, with shortcuts and a richer preview card. Install: `npx designme add tooltip` - [Search input](https://designme.dev/components/search-input.md): Search with scoped filters, recent queries and an agent answer. Install: `npx designme add search-input` - [Country select](https://designme.dev/components/country-select.md): A searchable select with country codes, currency and keyboard support. Install: `npx designme add country-select` - [Multi-select](https://designme.dev/components/multi-select.md): A combobox that filters as you type and keeps your picks as chips. Install: `npx designme add multi-select` - [Social sign-in](https://designme.dev/components/social-sign-in.md): One-tap providers that remember the last one you used. Install: `npx designme add social-sign-in` - [Sign in](https://designme.dev/components/sign-in.md): Email first, then the one-time code from the email, copied or typed in. Install: `npx designme add sign-in` - [OTP field](https://designme.dev/components/otp-field.md): A one-time code, one box per digit, that fills from a paste. Install: `npx designme add otp-field` - [Form](https://designme.dev/components/form.md): A project brief with inline checks and an agent that drafts the rest. Install: `npx designme add form` - [Payment form](https://designme.dev/components/payment-form.md): Card details with live formatting, brand detection and a clear total. Install: `npx designme add payment-form` ### Collaboration Threads, inboxes and boards for teams working alongside an agent. - [Comments](https://designme.dev/components/comments.md): A design thread where you can @mention the agent and it replies. Install: `npx designme add comments` - [Notifications](https://designme.dev/components/notifications.md): An inbox where agent updates and mentions arrive live. Install: `npx designme add notifications` - [Banner](https://designme.dev/components/banner.md): An announcement on a tint of its tone, with its own line drawing. Install: `npx designme add banner` - [Invite to collaborate](https://designme.dev/components/invite-to-collaborate.md): Add teammates by email as chips, set their role, send. Install: `npx designme add invite-to-collaborate` - [Reactions](https://designme.dev/components/reactions.md): Quick reactions on an agent update, with counts that pop. Install: `npx designme add reactions` - [Profile menu](https://designme.dev/components/profile-menu.md): The account menu behind an avatar: switch workspace, theme, shortcuts and sign out. Install: `npx designme add profile-menu` - [Context switcher](https://designme.dev/components/context-switcher.md): The organisation, project and environment you are in, each part a searchable switcher. Install: `npx designme add context-switcher` - [Filter menu](https://designme.dev/components/filter-menu.md): Add filters from a menu, see them as chips, and watch the count change. Install: `npx designme add filter-menu` - [Ticket list](https://designme.dev/components/ticket-list.md): Support tickets the agent has triaged, with suggested replies. Install: `npx designme add ticket-list` - [Kanban board](https://designme.dev/components/kanban-board.md): A board where you and the agent move cards, with drag and drop. Install: `npx designme add kanban-board` ### Product Pricing, onboarding, setup flows and spending limits for the rest of your product. - [Pricing cards](https://designme.dev/components/pricing-cards.md): Three plans with a billing switch and a seat slider. Install: `npx designme add pricing-cards` - [Onboarding checklist](https://designme.dev/components/onboarding-checklist.md): First steps with a progress ring, and the agent can do some for you. Install: `npx designme add onboarding-checklist` - [Stepper](https://designme.dev/components/stepper.md): A multi-step setup with a progress track that fills as you go. Install: `npx designme add stepper` - [Set limit](https://designme.dev/components/set-limit.md): A monthly agent budget with a draggable cap and a forecast. Install: `npx designme add set-limit` - [Currency converter](https://designme.dev/components/currency-converter.md): Show plan prices in local currency, with a swap and live rate. Install: `npx designme add currency-converter` ## Optional - [Component pages](https://designme.dev/components/composer): one page per component, at /components/, with its demo, install, usage, props and code. - [The homepage](https://designme.dev/): every demo on one page, in both styles. - [Registry](https://designme.dev/r/react/composer.json): each component's React source as JSON, at /r/react/.json (HTML at /r/.json).