Component registry
Every part of OpenVibe, defined once
53 components from the shared kit, each with its props, states, tokens, behaviour, accessibility and how it is built on the web, Android and iOS.
The interface pages · What shipped · All of it as JSON · The kit
Actions
Buttons and the things a tap does.
- ActionA button that posts, with an optional confirm: leave, remove, stop.
- Ask your agentThe chip that asks: a tap hands the question to your own agent in the Dock, with this page's context, and it never sends for you.
- ButtonOne clear action: primary, quiet, ghost or danger. A link with href, a form button without.
- Icon buttonAn action that is only an icon. Its label is what a screen reader says and what the tooltip shows.
- More menuThe rest of a row's actions, behind one button. Dangerous ones confirm.
- ShareThe one Share button: it opens the network's Share sheet, or copies the link where there is no sheet.
Marks and status
Small signs that say what something is or how it is.
- BadgeA word beside a title: live, new, a state. Five tones.
- Unread dotHow many are new. Nothing at zero; 9+ past nine.
- LabelsWhat a stream, recording, picture or post carries (nudity, strong language, graphic, 18+, flashing lights, spoilers), in words. Only the labels in force: a suggestion is the creator's to confirm. The page marks the thing itself with kit.labelsAttr so each viewer's own choice (show, blur, hide) applies.
- MarkA person or a place: their picture, or up to two letters on a colour that comes from the name.
- NoticeA sentence about what just happened: ok, info, warn or error. Errors are announced.
Page and layout
The frame of a page: heads, sections, sidebars, rails and tabs.
- FoldA card that opens: setup, extras, the danger zone. It says what is inside and how much.
- HeadThe top of an app page: back, the title, one muted line, icon actions and the tabs. It sticks under the navbar.
- PageThe whole shape of an app page in one call; the side column sits beside the content from 1024 px, under it below.
- Page headThe top of a page: the way back, the page's icon and title, its actions, and one line saying what it is for.
- RailA row of cards that scrolls sideways on a phone and wraps on a computer when asked. A long list never makes a long page.
- SectionA titled block of a page, with its count and one quiet note.
- SidebarNavigation down the left on a computer, a drawer on a phone.
- StepsA flow of a few steps. Done steps link back; later ones never link ahead.
- TabsLinks, so they work without JavaScript. For settings and explainers, never to hide content.
Lists and content
Rows, cards and what shows while there is nothing yet.
- CardA stream, a clip, a room or a place: picture first, the title, who, and one line.
- Empty stateWhat a page says when there is nothing yet, and the one thing to do about it.
- ListRows under a title, with a link to all of them.
- RowA mark, the title with a badge and the time on one line, one muted line under it. The whole row is the link.
- SkeletonThe shape of what is coming, so nothing jumps when it arrives. It never spins.
- SnippetCode to copy, with a copy button in the corner.
Choosing and settings
Switches, ranges, selects, segmented controls, chips and saving.
- ChipsFilters you can turn on and off, or one of a few.
- DropWhere a file goes: a real file input, plus drag and drop, paste and the phone's camera.
- FindA search, or "add by name": a pill with an icon, the field and a round button.
- Range rowAn amount: the label, the slider and its value.
- Save barThe save button of a settings form, kept in reach above the phone's app bar.
- SegmentedTwo to four choices you can see at once.
- Segmented, full widthThree or four equal choices filling the row, each with an icon; the radios post without JavaScript.
- Select rowOne choice of several, as a row.
- Switch rowAn on/off setting: the label and a hint on the left, the switch on the right.
Surfaces
What opens over the page.
- ComposerThe one thing you type, pinned at the bottom. Enter sends; it grows as you write.
- Floating panelA box that can be dragged anywhere: docked in its frame or floating over the page, tucked into a side, sized and kept where you left it.
- SheetMore choices without leaving the page: up from the bottom on a phone, a dialog on a computer.
Numbers and data
Stats, tables, charts and receipts.
- ChartLine, area, bar or scatter. Text stays its real size at every width, and a table with the same numbers sits behind it.
- MeterHow full something is. With tone auto, a limit turns amber from 75 % and red from 90 %.
- NumberA number the way a reader wants it: money, compact, percent, time. Missing is "–", never 0.
- RankingA leaderboard: the place, the name, the value with its interval, the change, a bar in proportion.
- ReceiptA result and what it took: the answer first, then one quiet line of facts.
- NumbersA strip of numbers that matter. Zero and unknown are left out; it scrolls sideways on a phone.
- TablePlans, prices, endpoints: anything compared across columns. On a phone each row becomes a card.
Tools
The parts of an OpenVibe tool page.
- AnswerThe answer first, then its rows, then what to do next.
- FamilyThe tools next to this one.
- Tool frameOne order for every tool page: head, input, answer, family, folds, related.
- Tool headWhat the tool does, in its colour, with the facts that matter (free, no sign-in, what is kept).
- Tool inputThe one field a tool needs, its button, and examples to try.
- TriesExamples a person can run with one tap.
Home
The menu's Home screen.