Selectable table
A dense table with row checkboxes, status pills and a bar of bulk actions that appears, with a live count, as soon as a row is picked.
Free · MIT42 parts · 10 looks · one prompt
Ready-made parts that take your design tokens.
Pick the parts you need, see them in your look, and give your coding agent one prompt. Nothing to install.
Popular
Browse by aisle
9 kinds of parts. Pick an aisle to see what is in it.
Try them on
Every part re-renders in the look you pick. Each look is a real system from the engine.
All parts
Stat strip
Four headline numbers in one band, each with a plain note under it, and a small bar where a share matters.
Activity feed
A record's history: who did what and when, with field changes shown as old value, new value and the difference.
Approval panel
One bill waiting for approval: the amount, the policy that applies, who has approved so far, and what the balance will be after paying.
Audit log
Who changed what, from where and when, with risky changes labelled and a switch that shows only the high-risk ones.
Calendar day agenda
One day's schedule: a date header with previous, today and next, an all-day event, and timed events on an hour rail with overlaps side by side and a now line.
Comment thread
Comments on a record with an @mention, a resolved reply, reactions, an edited marker and a composer with a Comment button.
Kanban column
One board column with its count and add button, holding task cards with labels, due date, assignee, comments and subtask progress; one card is lifted mid-drag.
Member list
A workspace's members with their email, a role picker per person, last active time, a pending invite you can resend and the owner's locked role.
Notification inbox
A notifications panel with All and Mentions tabs, unread dots, Today and Earlier groups, and one inline action such as Approve or View.
Usage meters
Budget, seats and credit as three meters, with the forecast hatched past what is used and alert thresholds marked on the bar.
Monthly spend chart
Six months of spend as bars, with the current month's forecast hatched on top, a dashed budget line and a tooltip on the bar you point at.
Service health chart
One service metric over a day against its objective, with yesterday for comparison, a deploy marker, a data gap and the moment it went wrong in the warning colour.
Spend breakdown donut
Spend split into four categories as a donut with the total in the middle, and a legend that lists each amount and share.
Date range picker
Pick a start and end day from two months side by side, or one quick range such as last 7 days, then apply it to a report.
Filter bar
The row above a table: search, filter chips with one applied and removable, add a filter, a sort button and the number of results, wrapping cleanly on narrow screens.
Code input
Six boxes for a verification code that move to the next box as you type and fill all at once when you paste, with a resend countdown and a wrong-code error.
File dropzone
A calm drop area for statements or documents, with a browse link, the accepted types, and each file's state: uploaded, uploading with progress, or failed with a retry.
Invite members
Invite several people at once: emails become removable chips, one role applies to all with a line on what it can do, and a seat count shows what the invites use.
Settings switches
A group of on and off settings, each with a plain explanation, including one that is locked by the organization.
Sign-in form
Work email and password with show and hide, remember this device, and a single sign-on option, shown with a wrong-password error.
Action menu
A More button with its dropdown shown open: grouped actions with icons and shortcuts, a submenu, a disabled item and a danger action at the end. Positioning is the project's.
Confirm dialog
A destructive confirmation shown open: what will be deleted, what happens next, and a typed workspace name that unlocks the red Delete button. Placement and the backdrop are the project's.
Detail drawer
A side sheet for one record shown open: name, status, previous and next, the key fields, an attachment and a sticky footer with the two decisions. Where it slides in from is the project's.
Page header with tabs
The top of a record page: breadcrumb, title with a favourite star and summary chips, two actions, and an underline tab bar with counts that scrolls on its own when narrow.
Pagination
The footer under a long table: how many rows are showing, rows per page, and previous, next and page numbers that collapse to "Page 3 of 49" when narrow.
Command menu
A search-first menu for every action and page, grouped, with keyboard shortcuts, live filtering and an empty result that says what to try.
Setup checklist
A short list of first steps with progress: what is done, the one step to do now with its time and a way to skip, and what comes next.
Sidebar navigation
The left rail of a work app: workspace switcher, search with a shortcut, grouped pages with counts, a collapsible group and the signed-in person.
Alert banners
Four inline notices (info, success, warning and danger), each with a bold first phrase, one sentence, an optional action and a dismiss button.
Empty state
What a list shows when there is nothing in it: a small drawing in the system's own colours, what it means, when that changes, and one thing to do.
Toast stack
Short notices that stack in a corner: done with an undo, in progress with a bar, and failed with a retry that keeps the person's work.
AI composer
Where a person asks an assistant something: attached sources (one still reading), a mode switch, and a send button that stays quiet until there is text.
AI suggestion
A suggested rewrite of one sentence inside a text field, shown as a diff with the reason and where it came from, to accept, reject or swap for another.
Agent run steps
An AI agent's run as a timeline: what it has done, what it is doing now, the step waiting for your approval, what it skipped, with times, tool output and a way to stop it.
Answer with citations
One assistant turn: the question, an answer still being written with numbered citations, the sources it cites with page numbers, and copy, retry and rating actions.
Plan picker
Three plans as cards you select, with a monthly or yearly switch that changes the prices and one plan marked as the common choice.
Order summary
A checkout summary: two line items with quantity steppers, a promo code with the applied code shown as a chip, the totals and a Pay button that shows the amount.
Product card
A card for a digital product or plan add-on: a cover drawn from the tokens, name, one-line description, rating, price with the old price struck out, an Add button and a save toggle.
Article card
A card for one article or changelog post: a drawn cover, the category and reading time, a headline, a two-line summary, the author and date, and a button to save it.
Music player
A compact player card: cover art drawn from the tokens, title and artist, a waveform you can seek, elapsed and total time, previous, play and next, and volume.
Profile card
One person at a glance: who they are, where and what time it is for them, three numbers about their work, and buttons to message or follow them.
No part matches. Clear a filter, or ask for one.
How it works
- 1
Fill a kit
Add the parts you need, and a look if you want the whole system.
- 2
Copy one prompt
For Claude, Codex, Cursor or any coding agent. It points to small files, so your agent copies a finished part instead of designing one.
- 3
They take your tokens
Each part uses only
--ds-*variables: in an OpenDesigner project they fit as they are.
Free and MIT, never forced: OpenDesigner suggests a part only when it fits what you are building. Every name and number in the parts is invented. Inspired by how Opensource UI, shadcn/ui and Magic UI present components (all MIT); no code was copied. The format and the rules.
Comments 3
TFB-118204 · $7,418.60
This one is $612 higher than September. @Bettina Marangoni can you check the fuel line before it goes to the CFO?
Resolved by Bettina Marangoni · Oct 10
Includes the fuel surcharge we agreed on Sep 2. Fine to pay.
Approving today so it makes the Oct 20 ACH run. Next month let's get the surcharge on the PO.