--- title: "Component registry: every part of OpenVibe · OpenVibe.Design" canonical: "https://openvibe.design/components" updated: null --- # Component registry: every part of OpenVibe · OpenVibe.Design HTML: [Component registry: every part of OpenVibe · OpenVibe.Design](https://openvibe.design/components) 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](/components/registry) · [What shipped](/changes) · [All of it as JSON](/api/v1/components) · [The kit](/kit) ## Actions Buttons and the things a tap does. - [**Action** A button that posts, with an optional confirm: leave, remove, stop.](/components/action) 13 props · 1 state `kit` - [**Ask your agent** The 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.](/components/ask-agent) 3 props · 1 state `kit` - [**Button** One clear action: primary, quiet, ghost or danger. A link with href, a form button without.](/components/button) 9 props · 5 states `kit` - [**Icon button** An action that is only an icon. Its label is what a screen reader says and what the tooltip shows.](/components/icon-button) 8 props · 1 state `kit` - [**More menu** The rest of a row's actions, behind one button. Dangerous ones confirm.](/components/more) 3 props · 3 states `kit` - [**Share** The one Share button: it opens the network's Share sheet, or copies the link where there is no sheet.](/components/share) 10 props · 6 states `kit` ## Marks and status Small signs that say what something is or how it is. - [**Badge** A word beside a title: live, new, a state. Five tones.](/components/badge) 2 props · 1 state `kit` - [**Unread dot** How many are new. Nothing at zero; 9+ past nine.](/components/dot) 1 prop · 1 state `kit` - [**Labels** What 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.](/components/labels) 2 props · 1 state `kit` - [**Mark** A person or a place: their picture, or up to two letters on a colour that comes from the name.](/components/mark) 5 props · 1 state `kit` - [**Notice** A sentence about what just happened: ok, info, warn or error. Errors are announced.](/components/notice) 3 props · 1 state `kit` ## Page and layout The frame of a page: heads, sections, sidebars, rails and tabs. - [**Fold** A card that opens: setup, extras, the danger zone. It says what is inside and how much.](/components/fold) 7 props · 3 states `kit` - [**Head** The top of an app page: back, the title, one muted line, icon actions and the tabs. It sticks under the navbar.](/components/head) 10 props · 1 state `kit` - [**Page** The whole shape of an app page in one call; the side column sits beside the content from 1024 px, under it below.](/components/page) 6 props · 1 state `kit` - [**Page head** The top of a page: the way back, the page's icon and title, its actions, and one line saying what it is for.](/components/page-head) 5 props · 1 state `kit` - [**Rail** A row of cards that scrolls sideways on a phone and wraps on a computer when asked. A long list never makes a long page.](/components/rail) 8 props · 3 states `kit` - [**Section** A titled block of a page, with its count and one quiet note.](/components/section) 8 props · 1 state `kit` - [**Sidebar** Navigation down the left on a computer, a drawer on a phone.](/components/sidebar) 7 props · 4 states `kit` - [**Steps** A flow of a few steps. Done steps link back; later ones never link ahead.](/components/steps) 3 props · 2 states `kit` - [**Tabs** Links, so they work without JavaScript. For settings and explainers, never to hide content.](/components/tabs) 5 props · 3 states `kit` ## Lists and content Rows, cards and what shows while there is nothing yet. - [**Card** A stream, a clip, a room or a place: picture first, the title, who, and one line.](/components/card) 24 props · 4 states `kit` - [**Empty state** What a page says when there is nothing yet, and the one thing to do about it.](/components/empty) 4 props · 1 state `kit` - [**List** Rows under a title, with a link to all of them.](/components/list) 5 props · 3 states `kit` - [**Row** A mark, the title with a badge and the time on one line, one muted line under it. The whole row is the link.](/components/row) 13 props · 5 states `kit` - [**Skeleton** The shape of what is coming, so nothing jumps when it arrives. It never spins.](/components/skeleton) 3 props · 2 states `kit` - [**Snippet** Code to copy, with a copy button in the corner.](/components/snippet) 3 props · 2 states `kit` ## Choosing and settings Switches, ranges, selects, segmented controls, chips and saving. - [**Chips** Filters you can turn on and off, or one of a few.](/components/chips) 4 props · 1 state `kit` - [**Drop** Where a file goes: a real file input, plus drag and drop, paste and the phone's camera.](/components/drop) 9 props · 1 state `kit` - [**Find** A search, or "add by name": a pill with an icon, the field and a round button.](/components/find) 16 props · 1 state `kit` - [**Range row** An amount: the label, the slider and its value.](/components/range-row) 7 props · 1 state `kit` - [**Save bar** The save button of a settings form, kept in reach above the phone's app bar.](/components/save-bar) 3 props · 1 state `kit` - [**Segmented** Two to four choices you can see at once.](/components/seg) 4 props · 3 states `kit` - [**Segmented, full width** Three or four equal choices filling the row, each with an icon; the radios post without JavaScript.](/components/segmented) 5 props · 3 states `kit` - [**Select row** One choice of several, as a row.](/components/select-row) 5 props · 1 state `kit` - [**Switch row** An on/off setting: the label and a hint on the left, the switch on the right.](/components/switch-row) 9 props · 3 states `kit` ## Surfaces What opens over the page. - [**Composer** The one thing you type, pinned at the bottom. Enter sends; it grows as you write.](/components/dock) 10 props · 1 state `kit` - [**Floating panel** A 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.](/components/float) 12 props · 8 states `ov-float` - [**Sheet** More choices without leaving the page: up from the bottom on a phone, a dialog on a computer.](/components/sheet) 3 props · 3 states `kit` ## Numbers and data Stats, tables, charts and receipts. - [**Chart** Line, area, bar or scatter. Text stays its real size at every width, and a table with the same numbers sits behind it.](/components/chart) 10 props · 2 states `kit` - [**Meter** How full something is. With tone auto, a limit turns amber from 75 % and red from 90 %.](/components/meter) 5 props · 3 states `kit` - [**Number** A number the way a reader wants it: money, compact, percent, time. Missing is "–", never 0.](/components/num) 2 props · 1 state `kit` - [**Ranking** A leaderboard: the place, the name, the value with its interval, the change, a bar in proportion.](/components/rank) 6 props · 1 state `kit` - [**Receipt** A result and what it took: the answer first, then one quiet line of facts.](/components/receipt) 6 props · 1 state `kit` - [**Numbers** A strip of numbers that matter. Zero and unknown are left out; it scrolls sideways on a phone.](/components/stats) 2 props · 1 state `kit` - [**Table** Plans, prices, endpoints: anything compared across columns. On a phone each row becomes a card.](/components/table) 7 props · 2 states `kit` ## Tools The parts of an OpenVibe tool page. - [**Answer** The answer first, then its rows, then what to do next.](/components/answer) 9 props · 1 state `kit` - [**Family** The tools next to this one.](/components/family) 4 props · 2 states `kit` - [**Tool frame** One order for every tool page: head, input, answer, family, folds, related.](/components/tool) 7 props · 1 state `kit` - [**Tool head** What the tool does, in its colour, with the facts that matter (free, no sign-in, what is kept).](/components/tool-head) 9 props · 1 state `kit` - [**Tool input** The one field a tool needs, its button, and examples to try.](/components/tool-input) 17 props · 1 state `kit` - [**Tries** Examples a person can run with one tap.](/components/tries) 5 props · 1 state `kit` ## Home The menu's Home screen. - [**Home Edit button** The menu's Edit button: turns arranging Home on, and says Done while dragging and removing apps is on.](/components/home-edit) 2 props · 3 states `ov-home` - [**Home grid** The menu's Home screen: your apps in a grid you arrange by long-press or Edit, with folders and the app drawer.](/components/home-grid) 19 props · 6 states `ov-home`