# OpenDesigner component library

Free, optional components made only of design tokens. Add them to a kit, try them in ten looks, and copy one prompt for your coding agent.

- [Selectable table](https://opendesigner.dev/library/receipts-table/) (Data, dense): 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.
- [Stat strip](https://opendesigner.dev/library/kpi-strip/) (Data, quiet): Four headline numbers in one band, each with a plain note under it, and a small bar where a share matters.
- [Activity feed](https://opendesigner.dev/library/activity-feed/) (Data, quiet): A record's history: who did what and when, with field changes shown as old value, new value and the difference.
- [Approval panel](https://opendesigner.dev/library/approval-panel/) (Data, quiet): 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](https://opendesigner.dev/library/audit-log/) (Data, technical): Who changed what, from where and when, with risky changes labelled and a switch that shows only the high-risk ones.
- [Calendar day agenda](https://opendesigner.dev/library/calendar-agenda/) (Data, quiet): 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](https://opendesigner.dev/library/comment-thread/) (Data, quiet): Comments on a record with an @mention, a resolved reply, reactions, an edited marker and a composer with a Comment button.
- [Kanban column](https://opendesigner.dev/library/kanban-column/) (Data, dense): 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](https://opendesigner.dev/library/member-list/) (Data, quiet): 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](https://opendesigner.dev/library/notification-inbox/) (Data, quiet): 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](https://opendesigner.dev/library/budget-meters/) (Charts, quiet): 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](https://opendesigner.dev/library/bar-chart/) (Charts, quiet): 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](https://opendesigner.dev/library/service-health/) (Charts, technical): 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](https://opendesigner.dev/library/donut-breakdown/) (Charts, quiet): 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](https://opendesigner.dev/library/date-range-picker/) (Forms, quiet): 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](https://opendesigner.dev/library/filter-bar/) (Forms, dense): 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](https://opendesigner.dev/library/code-input/) (Forms, quiet): 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](https://opendesigner.dev/library/file-dropzone/) (Forms, quiet): 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](https://opendesigner.dev/library/invite-members/) (Forms, quiet): 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](https://opendesigner.dev/library/settings-toggles/) (Forms, quiet): A group of on and off settings, each with a plain explanation, including one that is locked by the organization.
- [Sign-in form](https://opendesigner.dev/library/sign-in-form/) (Forms, quiet): 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](https://opendesigner.dev/library/action-menu/) (Overlays, dense): 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](https://opendesigner.dev/library/confirm-dialog/) (Overlays, quiet): 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](https://opendesigner.dev/library/detail-drawer/) (Overlays, quiet): 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](https://opendesigner.dev/library/page-header-tabs/) (Navigation, quiet): 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](https://opendesigner.dev/library/pagination/) (Navigation, dense): 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](https://opendesigner.dev/library/command-menu/) (Navigation, technical): 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](https://opendesigner.dev/library/setup-steps/) (Navigation, friendly): 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](https://opendesigner.dev/library/sidebar-nav/) (Navigation, quiet): 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](https://opendesigner.dev/library/alert-banners/) (Feedback, quiet): 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](https://opendesigner.dev/library/empty-state/) (Feedback, friendly): 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](https://opendesigner.dev/library/toast-stack/) (Feedback, quiet): 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](https://opendesigner.dev/library/ai-composer/) (AI, editorial): 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](https://opendesigner.dev/library/ai-suggestion/) (AI, quiet): 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](https://opendesigner.dev/library/agent-steps/) (AI, technical): 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](https://opendesigner.dev/library/chat-answer/) (AI, editorial): 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](https://opendesigner.dev/library/plan-picker/) (Commerce, friendly): 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](https://opendesigner.dev/library/order-summary/) (Commerce, quiet): 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](https://opendesigner.dev/library/product-card/) (Commerce, friendly): 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](https://opendesigner.dev/library/article-card/) (Content, editorial): 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](https://opendesigner.dev/library/music-player/) (Content, friendly): 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](https://opendesigner.dev/library/profile-card/) (Content, quiet): 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.