edit_note
Live answer
Answers that stream in with numbered sources and next steps.
Hover a source number, pick a follow-up
Where are people dropping off in onboarding?
Components for agent-powered products
107 free components in HTML or React, designed and built by DesignMe.
Need expert design and dev support?
Book a callarrow_forwardNo components match
01
Conversation
Everything for asking, answering and replying, by text or by voice.
terminal
Composer
Message input with attachments, what to work on, a mode and dictation.
Attach a frame, pick a mode, send
Listening0:00
Working on
The agent may
chat_bubble
Thread panel
Switch between agent threads and reply in place.
Switch threads, send a reply
description
Artifact card
A file the agent made, with its versions, Open, Copy and Download.
edit_note
Rich text editor
A minimal editor with an inline AI menu that streams a suggestion to accept or discard.
Select a sentence, ask AI to shorten it, accept it
0 wordsSelect text to ask AI
terminal
Tool call
Each tool the agent calls, with its input and output.
Open a call to see what went in and out
Checking which plans changed this month before I update the pricing page.
Two plans changed. I updated their prices and the yearly saving on the page.
mic
Voice capture
Talk to the agent, then fix what it misheard before sending.
Tap a highlighted word to fix it
Listening0:00
graphic_eq
Voice orb
A hands-free voice chat, with an orb that shows who is talking.
Start, mute and end. It never uses your microphone
Ready0:00
Talk to the agent about Pricing v4
{warn}You're muted. Unmute so the agent can hear you.
thumb_up
Answer action bar
Copy, regenerate, rate and listen to an answer from one row under it.
Listen, rate it down, pick why, then copy the fix
How much do people save on the yearly Pro plan?
What was off?
refresh
Response versions
Regenerate an answer and flip between versions.
Regenerate, then page through versions
Write a headline for the pricing page
tune
Model picker
Pick a model by speed, quality and cost, and how hard it thinks.
Hover a meter, pick a model, set the thinking
Model for this chat
{brain}Thinking
stars
Prompt starters
Suggested tasks that fill the composer in one click.
Pick a starter, or shuffle
Pick a starter or type your own
edit_note
Prompt library
Saved prompts with blanks to fill in before they go to the agent.
Open a prompt and fill in its blanks
Prompt libraryShared with DesignMe Studio
Fills in as you go
attach_file
Attachment tray
Drop files for the agent and watch each one upload.
Drop real files, or add samples
thumb_up
Feedback sheet
Rate an answer and tell the agent what missed.
Thumbs down opens the reasons
I tightened the hero spacing to 24px and swapped the CTA to the accent blue. The card grid now wraps at 720px.
What went wrong?
Shared with the agent for this project
02
Agent status
Show what the agent is doing, how far along it is, and what it is working with.
stars
Thinking
The live trace, written as the agent works, then folded away.
Click the header to open it again
stars
Reasoning trail
The agent's plan, notes, sources and edits, after it thinks.
group
Agent lanes
Several agents working in parallel, each with its own lane and hand-offs.
Pause all, or open a lane
{users}3 agents working0:000 of 9 steps
group
Agent tree
An orchestrator and its sub-agents, with cost rolled up per branch.
Fold a branch, hover a cost
Redesign the pricing page3 agents working
$0.00
group
Agent inbox
Every run that needs you, is running or is done, in one list.
Approve a run, retry a failure
Inbox
filter_list
Trace view
One agent run as a waterfall of spans, with latency and tokens.
Open a span to see its input and output
Pricing research
0.00s
search
Browser session
The agent browsing for you, step by step, with Pause and Take over.
Allow it past the banner, or take over
Pricing research
check_circle
Run summary
What the agent did, what changed and what needs you.
Review the open item, try Undo all
{ok}
Run complete
Finished in 12m 40s
Pricing cards now use spacing tokens
0 files
0 steps
0 tokens
0 cost
What changed
PricingCard.tsx+24 β18
tokens.css+9 β2
Pricing.test.tsx+31 β0
Needs you
The yearly badge overlaps the price on mobile
graphic_eq
Agent run timeline
Every model and tool step of a run on one time axis.
Hover a bar for its time and cost
Run 4821, update the pricing page
Starting
bolt
Action log
Every read, search, edit and command, logged as it runs.
Click any step for the detail
Agent activityRunning
dashboard
Context meter
How full the context is and what fills it, with Compact to free room.
Hover a part, then compact
In context0k of 200k tokens
Summarises older turns
nearby_error
Error and recovery
A failed step with retry, skip or hand over to a person.
Pick a way forward and continue
Sync the pipeline to SheetsStopped at step 2
How should the agent continue?
readiness_score
Run queue
Grouped tasks with live progress, retries and a compact view.
Retry the failed step, try Compact
0 of 3 done
bolt
Run cost
Live credit and token spend, with a cap that pauses the run.
Start a run and watch the cap
Credits usedIdle
0 / 2,000
Input tokens0
Output tokens0
Tool calls0
notifications
Toast stack
Agent notifications that stack and fan out on hover.
Hover the stack, send another
check_circle
Toast
One notification that changes shape with its state.
readiness_score
Status pill
One live line for what the agent is doing right now.
graphic_eq
Step loader
Named steps with a progress track and four loaders.
03
Review and approve
Moments where a person checks, steers or signs off on the agent's work.
grid_on
Change review
Accept or reject each change the agent made, file by file.
Keep or undo each change, comment on a line
3 files changed
account_tree
Plan review
Check the agent's plan, edit steps, then let it run.
Edit or skip a step, then approve
Plan: redesign the pricing page5 steps, about 4 min
Click a step to edit it
lock
Permission gate
The agent asks before it touches something new.
Choose scopes and how long, then allow
{figma}
Allow the agent to edit Figma?It needs this to apply the pricing fixes
lock
Hand-off to a person
The agent hands a conversation to a person, with what they need to pick it up.
Reassign it, or edit what the customer was told
{user}
Handed off to a personRefund over $500 needs a person
Assigned to
Finding someoneBilling team
{clock}Reply due in 14 min15 min target
Sent to Dana
Thanks, Dana. A refund this size needs someone on our billing team, so I've passed your conversation to them. They'll reply here within 15 minutes.
Context passed along
Dana was charged twice for her annual plan on Oct 21 and wants one charge back. The agent confirmed the duplicate, but can't refund more than $500.
Amount$588.00
CustomerDana Lee Β· Pro since 2023
Order#48213 Β· charged twice
Handing off to BillingThe agent has stopped replying to Dana
Reassign to
nearby_error
Decision prompt
The agent asks a few quick questions before it starts.
Pick with 1, 2, 3 or click
Question 1 of 3
stars
Proposal card
A suggested change with confidence, alternatives and undo.
Compare options, then accept
{wand}
Raise contrast on the secondary buttonPricing, frame 2 of 3
#C9CFD82.1 : 1
{right}#5B64725.9 : 1
Confidence
0%
tune
Design tuner
Tweak a component by hand or let the agent tune it.
Drag the sliders or tune with the agent
Pro
$24per editor, monthly
{c}Unlimited frames{c}Agent reviews{c}Shared tokens
Pricing cardEdited by you
edit_note
Rewrite toolbar
Select a sentence and let the agent rewrite it in place.
Click a sentence, then pick a rewrite
DOCOnboarding introClick a sentence
checklist
Launch checklist
The agent checks a design before it ships, and fixes what fails.
Run the checks, then fix the failures
Ready to ship pricing?6 checks
spellcheck
Inline text diff
The agent's edits to a piece of copy, accepted or rejected one by one.
Click an edit to accept or reject it
Pricing intro4 edits to review
alternate_email
Draft review
An email the agent drafted, to check and edit before it sends.
Edit the draft, then send, schedule or discard it
{spark}
Draft from the agentAfter the pricing review with Maya
Not sentTo{av}Maya Kim
Hi Maya,
Here's what changed on the pricing page: one button per plan, the yearly price first, and the FAQ under the comparison table. The full list is in the attached summary.
Ready for your sign-off when you are.
Here's what changed on the pricing page: one button per plan, the yearly price first, and the FAQ under the comparison table. The full list is in the attached summary.
Ready for your sign-off when you are.
{warn}You mention an attachment, but nothing is attached.
shuffle
Steering
Change the agent's course while it works, without starting over.
Send a change mid-run
Redesign the pricing pageStep 2 of 4 Β· 0:00
readiness_score
Eval results
An eval run case by case, against the run before.
Run the evals, open a failed case
Pricing copy evalsCopy agent Β· 8 cases Β· run 2h ago
No failed cases
group
Design review
Checks run, a teammate asks for a change, the agent makes it, and you ship.
Watch the review, then choose how it ships
{palette}
Pricing page v46 screens Β· sent for review by the design agent
In reviewChecks
Review
Maya reviews once the checks pass
Waiting on checks
04
Sources and output
What the agent read, what it produced and where each answer came from.
code
Code viewer
Code the agent wrote, with line notes you can ask about.
Switch files, click a line to ask
terminal
Terminal stream
Shell commands the agent runs, with their output as it streams in.
Open the folded output, stop a command or copy it all
{term}~/acme/webStarting
link
Citation hover card
Hover a citation to see the exact passage it came from.
Hover or click a citation
Teams that show the annual price first see higher paid conversion, and the effect is stronger when the monthly price stays visible beside it. Your own data shows the same pattern since the September update.
description
Source stack
Everything the agent read, folded into one quiet pill.
Open the stack, filter by type
Annual plans convert about 18% better when the monthly price is shown crossed out next to them.
document_scanner
Field extraction
The agent pulls fields out of a document and shows where each came from.
Hover a field to find it, fix the unsure one
Northwind StudioInvoice
Invoice no. NW-2041
Issued 3 Oct 2026
Design system audit$4,800.00
Pricing page redesign$6,200.00
Agent setup, 2 seats$480.00
Total due$11,480.00
Due by 1? Nov 2026
Extracted fieldsReading page 1
trending_up
Metric insight
A number, its trend, and the agent's read on why it moved.
Hover the chart, ask why it moved
Trial to paid
0%+0.0 pts
{spark}Sep 18
{spark}Jumped after the pricing page update on Sep 18.
dashboard
Details panel
Properties of a run you can change in place.
Change status, owner or model inline
RUNPricing page redesign
Status
Owner
Model
DueOct 24
Labels
Tokens0
Cost$0.00
Run time4m 12s
filter_list
Task table
Agent tasks in a sortable table with bulk actions.
Sort a column, select rows
Agent tasks6 tasks, 2 running
2 selected
05
Workspace
Navigation, search, settings, models and automations around the agent.
account_tree
Automation canvas
A trigger, a few agent steps, and a run you can watch flow through.
Click + to add a step, drag them around, then run
Weekly design QAOn
{search}
tune
Canvas toolbar
A floating toolbar for a workflow canvas: run, pick a tool, comment, fit and zoom.
Pan with the hand, zoom in, fit, then run
V, H and L pick a tool, C adds a comment, Shift 1 fits the workflow to the screen, minus and plus zoom, and the arrow keys move the view.
search
Command palette
Jump anywhere or hand a task to the agent from one box.
Type to filter, arrows and Enter to run
{search}esc
ββ moveβ΅ run
history
Memory panel
What the agent remembers about your team, editable and removable.
Edit or forget a memory, watch it learn and get used
{book}
Team memory7 memories
Used in 14 answers this week
splitscreen
Model compare
Run one prompt on three models side by side and keep the best.
Run the prompt, swap a model, use the best answer
settings
Agent settings
How much the agent may do alone, with a save bar for changes.
Change anything to see the save bar
AutonomyAsks before edits to shared files
Use team memoryBrand rules and past decisions
Post a summary in Slack#design, after each run
Spend cap per runPauses and asks when reached
$5
Instructions
link
Tools and connections
The tools the agent can reach, and how much it may do with each.
Set Ask or Allow, test a connection
Tools and connections5 connected
description
Knowledge sources
The files, sites and folders the agent knows, and how far each is indexed.
Add a website, retry the file that failed
Knowledge sources
schedule
Scheduled runs
Tasks the agent runs on a schedule, with their last result and a switch.
Run one now, pause one, make a new one
Scheduled runs
folder
File explorer
Project files, with the ones the agent touched marked.
Open folders, filter to changed files
{search}
view_sidebar
Workspace rail
A slim app rail that opens into a labelled sidebar.
Hover icons, pin it open
06
Harness
A live agent conversation built only from the components above. Pick a starter and watch them work together.
stars
Agent harness
Every component working together in one agent app.
Pick a suggestion, open a chat, or type your own
Hello
What should the agent work on?
App basics
01
Charts and tables
Lightweight charts and tables for dashboards and reports, drawn in plain SVG and HTML.
trending_up
Line chart
Two series over time with a hover readout and toggles.
Hover the chart, toggle a series
Active editors0
JanMarMayJulSepNov
bar_chart
Bar chart
Weekly agent runs, split by outcome, with a range switch.
Hover a bar, switch the range
Agent runs0
ShippedNeeded reviewFailed
donut
Donut chart
Where the agent's time went, by kind of task.
Hover a slice or a row
0hAgent time
grid_view
Funnel chart
Signup to paid, with the biggest drop called out by the agent.
Hover a step, switch the segment
Signup to paid
{spark}
grid_view
Top pages
Most visited pages with share of traffic and a quick sort.
Sort by views or change, hover a page
Top pages0 views, last 30 days
readiness_score
Health score
A design system score made of a few checks you can open.
Open a check, let the agent fix it
0of 100
Design system healthGood, 2 checks need work
grid_on
Activity heatmap
When the agent and the team were busy, by day and hour.
Hover a cell, switch who
ActivityLast 4 weeks
MonWedFriSun
12am6am12pm6pm
LessMore
dashboard
Stat cards
Four headline numbers with sparklines and a period switch.
Switch the period, hover a card
person
Account table
Customer accounts with health, plan and an agent note per row.
Search, filter by plan, open a row
{search}
| Account | Plan | Seats | Health | MRR |
|---|
02
Dates
Pickers for single dates and date ranges.
calendar
Date picker
A field that opens a calendar, with quick picks and natural language.
Open it, type βnext fridayβ or pick a day
MTWTFSS
splitscreen
Segmented control
Switch between views of the same thing, with a sliding indicator.
Pick a view, step through dates, or open a day
Pricing launch
calendar
Date range picker
Pick a start and end across two months, or use a preset.
Click two days, or pick a preset
Fromβ
{right}Toβ
calendar
Event calendar
A week view where the agent finds a free slot for you.
Open or drag an event, click a free slot to add one
Oct 19 β 23, 2026
schedule
Agenda
Today's schedule with a live now line and agent prep notes.
Open an event to see the agent's prep
TodayMonday, Oct 19
4 events03
Forms and inputs
Buttons, fields, pickers and sign-in flows for any product.
bolt
Buttons
Every button style, with loading, success and hold-to-confirm states.
Click them all, hold the delete button
Styles
With icon
States
Sizes
tag
Badge
Small labels for plans, environments and status, with a dot, an icon or a remove button.
Remove a badge, then undo it
Tones
DraftBetaLiveDegradedFailed
Colours
SearchReasoningDataBillingUrgentReviewDesignOps
Sizes
ProPro
Dot or icon
RunningIdle{lock}Private{spark}Agent
Removable
ProductionStagingPreview
help
Tooltip
Quiet labels on hover, with shortcuts and a richer preview card.
Hover each control
Labels wait a moment, then follow you instantly between buttons.
search
Search input
Search with scoped filters, recent queries and an agent answer.
Focus it, type, add a filter with @
{search}βK
filter_list
Country select
A searchable select with country codes, currency and keyboard support.
Open it, type to filter, use the arrows
Used for tax and currency
tag
Multi-select
A combobox that filters as you type and keeps your picks as chips.
Type, pick with the arrows and Enter
Type to filter. Backspace removes the last tag.
person
Social sign-in
One-tap providers that remember the last one you used.
Pick a provider
Sign in to DesignMe
or
lock
Sign in
Email first, then the one-time code from the email, copied or typed in.
Enter any email, then copy the code from the email
Sign inWe will email you a code
{mail}Designme nowYour sign-in code is 482 157
lock
OTP field
A one-time code, one box per digit, that fills from a paste.
Paste or type the code
edit_note
Form
A project brief with inline checks and an agent that drafts the rest.
Fill a field, or let the agent draft
lock
Payment form
Card details with live formatting, brand detection and a clear total.
Type a card number, switch billing period
Demo only. Nothing is charged.
04
Collaboration
Threads, inboxes and boards for teams working alongside an agent.
chat_bubble
Comments
A design thread where you can @mention the agent and it replies.
Reply, or mention @agent
Pricing, frame 2
notifications
Notifications
An inbox where agent updates and mentions arrive live.
Mark read, switch tabs, watch new ones arrive
Inbox0
stars
Banner
An announcement on a tint of its tone, with its own line drawing.
New
Memory that carries across threads
Agents keep what they learn about your project, so you only explain things once.
person_add
Invite to collaborate
Add teammates by email as chips, set their role, send.
Type emails, press Enter or comma
Invite to Pricing refreshThey can see frames, the brief and agent runs
Suggested
thumb_up
Reactions
Quick reactions on an agent update, with counts that pop.
React, open the picker, hover a count
{spark}
Design agent10:42
Shipped the pricing update to staging. Trial to paid preview is up 8.1 points against last month.
person
Profile menu
The account menu behind an avatar: switch workspace, theme, shortcuts and sign out.
Open the menu, switch workspace, flip the theme
MKMaya Kim[email protected]
Workspaces
Keyboard shortcuts
- ββ
- Move through the menu
- HomeEnd
- First or last item
- Esc
- Close the menu
- ?
- Show these shortcuts
account_tree
Context switcher
The organisation, project and environment you are in, each part a searchable switcher.
Open a part, type to filter, pick one
{search}
filter_list
Filter menu
Add filters from a menu, see them as chips, and watch the count change.
Add a filter, flip is to is not, remove a chip
Filter by
grid_view
Ticket list
Support tickets the agent has triaged, with suggested replies.
Open a ticket, send the suggested reply
Support
grid_view
Kanban board
A board where you and the agent move cards, with drag and drop.
Drag a card, or let the agent pick one up
05
Product
Pricing, onboarding, setup flows and spending limits for the rest of your product.
bolt
Pricing cards
Three plans with a billing switch and a seat slider.
Switch billing, drag the seats
checklist
Onboarding checklist
First steps with a progress ring, and the agent can do some for you.
Tick steps, or hand one to the agent
{check}
Get set up0 of 5 done
account_tree
Stepper
A multi-step setup with a progress track that fills as you go.
Go next and back, click a finished step
tune
Set limit
A monthly agent budget with a draggable cap and a forecast.
Drag the cap, pick what happens at the limit
Monthly agent budgetResets Nov 1
Spent $128Forecast $184
At the limit
trending_up
Currency converter
Show plan prices in local currency, with a swap and live rate.
Type an amount, swap, change currency
You pay
They see0
Stay in the loop
Sign up for our newsletter and new components land in your inbox every week.
The Figma library is on its way, and you can vote on what comes next on the roadmap.
Get new components every week. Unsubscribe any time. Read the privacy notice.
Questions
What people usually ask before they start using the library.
Yes. Every component is free for personal and commercial projects under the MIT licence, so you can use, change and ship it in client work.
The HTML, CSS and JavaScript for that component. It needs the shared core once, which holds the tokens, icons and small helpers, and you can copy that from the code view, or run npx designme add with the component name and both land in your project.
Yes. Every component has a React version for Next.js, React and Astro: run npx designme add with the component name and --react, and the component lands in your project with its styles. A Tailwind version is in progress on the roadmap.
It's coming. The Figma library is in progress on the roadmap, with every component in Blueprint and Soft, light and dark mode and five accent colours, all built on variables so you can restyle it in one place. Sign up and you'll get it as soon as it lands.
Webflow and Framer exports are coming soon. Until then the HTML version works in a Webflow embed or a Framer code component.
Two visual styles for the same components. Blueprint is technical and square with an orange accent, Soft is rounded with pastel colours, and both work in light and dark mode.
They use proper roles and labels and respect reduced motion, and most work fully with a keyboard. A few, like Kanban and File explorer, are still getting their keyboard support. Test them in your own product too, since accessibility depends on how they are used.
Often. Each release is listed in the changelog, and subscribers get it first.
Yes. Suggest it on the roadmap and upvote the ones you want, and we build the most wanted first.
The team at DesignMe, a design and development studio working with startups and enterprises. If you need help building your product, you can book a call with us.