Components

One design system, drawn natively everywhere

Every OpenVibe component is described by what it is: its parts, the tokens they wear, its states, and how it reads to a screen reader. The web draws it with the kit; an Android or iOS app draws the same component with its own views, so an app is never a web page in a frame.

List

Rows in one rounded panel, with a small heading and one link to the whole list; an empty list says so in a line.

Your rooms

All

Parts and their tokens

head optionalcolorcolor.text.mutedsizetype.size.captionweighttype.weight.heavyuppercase, with its link
panelbackgroundcolor.bg.raisedlinecolor.line.baseradiusradius.md

How it behaves

Role: list
Props: title more empty flush * required
States: default · empty · loading
Name: its heading
Keys: Tab row to row
Target: rows 56 px
Phone: full width
Computer: in its column

Code

The same component as data: a server sends this, the web renders it with kit.list, and a native app with its own view.

// A kit document (JSON). The web renders it with openvibe-shared/components:
//   components.render(doc, kit)  →  kit.list(…)
{
  "type": "list",
  "props": {
    "title": "Your rooms",
    "more": {
      "href": "/components?c=list",
      "label": "All"
    }
  },
  "children": [
    {
      "type": "row",
      "props": {
        "href": "/components?c=list",
        "title": "night-owls",
        "sub": "38 here",
        "mark": "Night owls"
      }
    },
    {
      "type": "row",
      "props": {
        "href": "/components?c=list",
        "title": "surf-crew",
        "sub": "jules: in five",
        "mark": "Surf crew",
        "meta": "17:12"
      }
    },
    {
      "type": "row",
      "props": {
        "href": "/components?c=list",
        "title": "builders",
        "sub": "a new world went up",
        "mark": "Builders",
        "meta": "Tue"
      }
    }
  ]
}

Shared interfaces

Web, Android and iOS definitions for the navigation, composer, sheets, settings and motion used across OpenVibe. See the whole registry, or read it as JSON at /api/v1/components.

Kit documents: screens as data

A screen can be sent as a tree of these components, for example { "type": "rail", "children": [{ "type": "card", … }] }. Every OpenVibe client renders the same document with its own views, so a screen can change without an app release (the server-driven UI pattern of Airbnb and DivKit). Documents are checked strictly: known components and props only, typed values, which children each takes, a size limit, and https or same-site links.

The specs as JSON The tokens they wear