88 components, one list, one name each: the Figma name, the code name and the doc name are the same string and npm test proves it. 88 at Beta.
Every one of them is CSS you can use today — a class on markup, @pepperui/css. 35 are also React components on Base UI, installed from this repo’s registry. Each name below opens its own page on this site: the component rendered, what to use it for and what not to, the markup to copy with its modifiers, the rules, and the accessibility results measured for it — 65 pages.
Four statuses, each with its version promise in Releasing §4: Draft — being designed; do not build on it · Beta — usable; the API may still move, in a minor · Ready — stable; the API changes only in a major, with a migration note · Deprecated — has a replacement and a date: the major that removes it. Nothing is at Ready yet: none has been held against the bar, and Ready does not wait for a release.
| Component |
Status |
Use when |
Figma |
Stylesheet |
| Button |
Beta |
the one action a view exists for — submit, save, create |
4 sets |
button.css |
| Button group |
Beta |
several actions belong to one object or one step — a toolbar over a chart, the actions of a form or dialog, export / view controls |
1 set |
button-group.css |
| Icon |
Beta |
a component needs an icon slot and the glyph is the consumer’s choice |
1 set |
base.css (.pui-icon) |
| Icon button |
Beta |
a toolbar, a table row’s actions, a dialog’s close, a topbar’s notifications — an action whose icon is universally read (close, edit, delete, search, more) |
3 sets |
icon-button.css |
| Link |
Beta |
a link that stands alone leads on — to a case study, a hub, all the posts; the last line of a card |
1 set |
link.css |
| Media control |
Beta |
a control has to sit on a picture or a video — sound on a muted hero, a pause, a fullscreen |
1 set |
media-control.css |
| Toggle |
Beta |
a filter or a mode that is on or off and shows it — a chart type, All | Charts | Images, a blog category — alone or in a Toggle group |
2 sets |
toggle.css |
| Toggle group |
Beta |
a set of filters or modes that sit together and share one answer (chart type, a category) or several (tags) |
1 set |
toggle-group.css |
| Component |
Status |
Use when |
Figma |
Stylesheet |
| Calendar |
Beta |
under a Date picker’s field, or two side by side for a range — never on its own in a form (the field carries the value) |
2 sets |
calendar.css |
| Checkbox |
Beta |
the user can pick any number of options, or must confirm one thing — the privacy line on every site lead form |
1 set |
checkbox.css |
| Combobox |
Beta |
one choice from a list long enough to search — accounts, offers, people, countries — roughly twenty or more, or any list the user knows by name |
2 sets |
combobox.css |
| Date picker |
Beta |
a form or a filter needs one date — a start, a deadline, a report day — or a range of them |
1 set |
date-picker.css |
| Field |
Beta |
any control that needs a visible label — one Field per control, stacked in a form with the form’s own gap |
1 set |
field.css |
| Form |
Beta |
a page or a screen asks for something and sends it — a contact form, a demo request, an application, a settings form |
1 set |
form.css |
| Input |
Beta |
free text, one line |
1 set |
input.css |
| Input group |
Beta |
an input needs a unit, a scheme or a domain beside its text (prefix / suffix), an icon in front of it, or one action attached to it — subscribe, search, copy, apply a code |
1 set |
input-group.css |
| Label |
Beta |
a control needs a visible name without the Field wrapper — a checkbox or switch row, a radio group’s items, an inline control in a toolbar or a dialog |
1 set |
label.css |
| Native select |
Beta |
a form must work without JavaScript — a server-rendered admin page, a form embedded where scripts do not run, an email-safe page |
1 set |
native-select.css |
| Questionnaire |
Beta |
a lead or intake form has more than four or five fields, or asks things that belong to different subjects — one subject per step, three to six steps |
1 set |
questionnaire.css |
| Radio group |
Beta |
exactly one option from two to about six, all visible at once |
1 set |
radio.css |
| Select |
Beta |
one option from a list too long to show as radios — about seven or more — or when space is tight |
3 sets |
select.css |
| Slider |
Beta |
a number within known bounds where the rough position matters more than the exact digit — a bid ceiling, a daily budget, opacity, a scale — and the bounds fit on a track |
1 set |
slider.css |
| Switch |
Beta |
turning a setting on or off with immediate effect — no submit, no confirmation |
1 set |
switch.css |
| Textarea |
Beta |
free text longer than a line — a message, a description, a note |
1 set |
textarea.css |
| Component |
Status |
Use when |
Figma |
Stylesheet |
| Alert / Banner |
Beta |
a message that must stay until the user acts or the state changes — a failed sync, a plan limit, a saved confirmation that should remain, a data warning above a table |
1 set |
alert.css |
| Alert dialog |
Beta |
an action cannot be undone or costs something (delete, leave, overwrite, spend) and the person must confirm it knowingly |
1 set |
alert-dialog.css |
| Badge / Chip |
Beta |
a status word on a KPI tile or a table row, a category tag on a card, a small count |
2 sets |
badge.css |
| Empty |
Beta |
a container that will hold things holds none yet, or a query returns nothing — say what belongs here and offer the way to put it there |
1 set |
empty.css |
| Form result |
Beta |
a form has been sent and the page says so in place of the form — contact, apply, subscribe |
1 set |
form-result.css |
| Hover card |
Beta |
a row or a link names a thing the user may want a glance at without leaving — a publisher’s standing, a campaign’s numbers, a teammate’s role |
1 set |
popover.css |
| Kbd |
Beta |
a shortcut is worth showing — a menu row’s right edge, a toast’s hint (‘Undo ⌘Z’), the Command palette’s rows, a help page |
1 set |
kbd.css |
| Popover |
Beta |
a click on a control opens a few related controls — a filter’s fields, a colour, a small settings group — that close when done |
2 sets |
popover.css |
| Progress |
Beta |
a task has a known share done — an upload, an import, a generation with steps, a questionnaire’s position (step n of m) |
1 set |
progress.css |
| Skeleton |
Beta |
a region whose layout is known is loading — a table, a card grid, a profile header — and the wait is longer than a blink |
1 set |
skeleton.css |
| Spinner |
Beta |
a wait under a few seconds with no known layout — a button submitting, a panel refreshing |
1 set |
spinner.css |
| Toast |
Beta |
an action the user just took needs a word of confirmation and maybe a way back — duplicated, copied, saved, deleted with Undo — on an editor or a product screen |
2 sets |
toast.css |
| Tooltip |
Beta |
an icon button needs its name, a truncated cell needs its full value, a control needs one line of help |
1 set |
tooltip.css |
| Component |
Status |
Use when |
Figma |
Stylesheet |
| Accordion |
Beta |
three or more questions or groups that share a place and are read one at a time — an FAQ, a settings page, a long form’s sections |
2 sets |
collapsible.css |
| Aspect ratio |
Beta |
an image or a video sits in a layout that must not jump when it loads — a Card’s media, a gallery, a hero’s figure |
1 set |
layout-utilities.css |
| Breadcrumb |
Beta |
a page is two or more levels deep and the person may want to go back a level |
2 sets |
breadcrumb.css |
| Collapsible |
Beta |
one section of a screen is optional to see — advanced fields, a long description, a nav group’s children |
1 set |
collapsible.css |
| Command |
Beta |
a product has more places and actions than a rail shows — MAFO’s search across campaigns, offers and publishers; jumping to a setting; running an action by name. Opens with ⌘K and from the Topbar’s search |
1 set |
command.css |
| Context menu |
Beta |
three or more actions hang off one control — a row’s ⋯, a File or Export button, the user pill, a right-click on a table row (Context menu: the same menu at the pointer) |
2 sets |
dropdown-menu.css |
| Dialog |
Beta |
the user must answer before going on — confirm, name, choose, send |
2 sets |
dialog.css |
| Drawer |
Beta |
on a phone, a choice or a short form that belongs to the screen — move to a folder, share, a filter, confirm with context |
1 set |
sheet.css |
| Dropdown menu |
Beta |
three or more actions hang off one control — a row’s ⋯, a File or Export button, the user pill, a right-click on a table row (Context menu: the same menu at the pointer) |
2 sets |
dropdown-menu.css |
| Navigation menu |
Beta |
the top of every site page — mobupps.com and the product marketing pages |
4 sets |
navigation-menu.css |
| Pagination |
Beta |
a table or a list is longer than one page and the person needs to know where they are |
1 set |
pagination.css |
| Resizable |
Beta |
two panes share a screen and the user’s balance between them matters — a chat and its context, a list and its detail, an editor and its preview |
1 set |
layout-utilities.css |
| Scroll area |
Beta |
a panel, a sheet, a menu or a card holds more than its height and must not grow — Command’s list, a Sheet’s content, a long Select menu |
1 set |
layout-utilities.css |
| Separator |
Beta |
two regions touch and spacing alone does not separate them — a menu’s groups (Dropdown menu’s separator is this), a toolbar’s clusters (vertical), a footer above its content |
1 set |
layout-utilities.css |
| Sheet |
Beta |
a task belongs beside the page and returns to it — filters on a Data table, a row’s detail with its fields, a settings group longer than a Popover holds |
1 set |
sheet.css |
| Stepper |
Beta |
a flow has three to six named steps a user may look back at — add a client, set up an account, onboard a publisher |
2 sets |
stepper.css |
| Tabs |
Beta |
one of several views must be open — sections of a page (line), or a two-to-four-way mode (segment) |
3 sets |
tabs.css |
| Component |
Status |
Use when |
Figma |
Stylesheet |
| Avatar |
Beta |
a person is shown — the current user in the shell, an author, a row’s owner, a chat participant (square) |
2 sets |
avatar.css |
| Blob |
Beta |
a slide wants depth behind its content — a cover, a section divider, a statement slide; at most one per slide, in the slide’s accent |
4 sets |
slide-only — an SVG decoration |
| Bullet list |
Beta |
three to six parallel points with no natural glyph each — what is included, what happened, what to do next |
2 sets |
bullet-list.css |
| Card |
Beta |
content needs its own edges — a feature on a slide, a dashboard panel, a stat, a form, a post preview |
3 sets |
card.css |
| Carousel |
Beta |
a site section with more cards than the row holds — reviews, case studies, a logo strip that scrolls |
3 sets |
logo-grid.css |
| Case study card |
Beta |
each block of a case-study slide — Task · Approach · Results; a metric story with its chart; under a Case study header |
1 set |
slide-only — a part of the case study layouts |
| Case study header |
Beta |
the first thing on a case-study slide or a client one-pager — every card under it belongs to this client |
2 sets |
slide-only — a part of the case study layouts |
| Data table |
Beta |
more rows than fit — a report, a search result, an admin list — and the person needs to filter, page, sort, pick columns or select |
1 set |
table.css |
| Device frame |
Beta |
a product page or a slide shows the product as it runs — inside a window, not as a bare screenshot |
1 set |
device-frame.css |
| Heading pair |
Beta |
a slide or a page section opens — one title, one line that frames it |
1 set |
heading-pair.css |
| Icon list |
Beta |
three to six points that each deserve a glyph — features, capabilities, what happened; a success / failure pair |
1 set |
icon-list.css |
| Insight block |
Beta |
a chart, a KPI row or a table needs its one-line conclusion; a slide states the point before the evidence; a case study’s headline result |
1 set |
insight-block.css |
| Item |
Beta |
a list of things with a face and a line — publishers, campaigns, templates, people with access, search results — where a Table’s columns would be empty and a Card’s box too much |
1 set |
item.css |
| KPI tile |
Beta |
a dashboard opens with its headline numbers; a case study or a deck states a result in one figure; a stat needs a period-over-period movement next to it |
1 set |
kpi-tile.css |
| Logo grid |
Beta |
a set of partner or client marks shown together — a deck’s partners slide, the site’s ‘trusted by’ band |
2 sets |
logo-grid.css |
| Socials |
Beta |
a page links to the company’s profiles or offers to share itself — the footer, the end of an article |
1 set |
socials.css |
| Table |
Beta |
rows of records with the same fields — publishers, campaigns, offers, users; a SWOT or a quarter plan on a slide |
3 sets |
table.css |
| Typography |
Beta |
long-form text on the site or in the docs — an article, a case study, a help page, a policy |
1 set |
typography.css |
| Component |
Status |
Use when |
Figma |
Stylesheet |
| Empty / loading / error states |
Beta |
any table, list, card or panel that loads data — every data container carries all three |
1 set |
states.css |
| Footer |
Beta |
the bottom of every site page — 128 above it, 24 below (the site’s margins), the blob behind its right edge on the pages that have one |
1 set |
footer.css |
| Nav item |
Beta |
composing Sidebar; a link in any dark rail |
1 set |
sidebar.css |
| Sidebar |
Beta |
a product screen — MAFO and the Cabinet open with it, and iRTB and MobuppsX as designed |
2 sets |
sidebar.css |
| Topbar |
Beta |
a product screen — under the page’s top inset, beside the Sidebar |
1 set |
topbar.css |
| Component |
Status |
Use when |
Figma |
Stylesheet |
| Attachment |
Beta |
a file or an image travels with a message — in the Composer’s files row, and echoed in the sent Message |
1 set |
chat.css |
| Bubble |
Beta |
a turn of a conversation needs a surface |
1 set |
chat.css |
| Chat pattern |
Beta |
a chat accepts a message |
2 sets |
chat.css |
| Marker |
Beta |
the thread changes state — a new day, an attachment read, a context change, a handover to a person |
1 set |
chat.css |
| Message |
Beta |
a conversation is rendered turn by turn |
1 set |
chat.css |
| Message scroller |
Beta |
turns need to scroll under a fixed composer |
1 set |
chat.css |
| Projection |
Beta |
an answer promises numbers worth restating |
1 set |
chat.css |
| Suggestion row |
Beta |
a row of Suggestions is needed |
1 set |
chat.css |
| Suggestions |
Beta |
the assistant proposes a ranked set a person can apply |
1 set |
chat.css |
| Component |
Status |
Use when |
Figma |
Stylesheet |
| Chart recipes |
Beta |
any chart on a product screen, a dashboard or a slide layout — the only container for a Plot |
10 sets |
not CSS — the chart theme is @pepperui/charts |
| Component |
Status |
Use when |
Figma |
Stylesheet |
| Utils |
Beta |
— |
— |
not a component — the configured cn() merge for the React side (registry:lib) |
These have no page of their own, each for its reason. They are the six names above that carry no link.
| Component |
Why not |
| blob |
slide-only — an SVG decoration |
| case-study-card |
slide-only — a part of the case study layouts |
| case-study-header |
slide-only — a part of the case study layouts |
| chart |
not CSS — the chart theme is @pepperui/charts |
| icon |
base.css (.pui-icon) |
| utils |
not a component — the configured cn() merge for the React side (registry:lib) |
