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.

Tabs

A long page as a few short ones: each tab is a link (?tab=key), the server builds only the open one, so nothing needs JavaScript.

Parts and their tokens

pillminHeightsize.tapradiusradius.pillcolorcolor.text.mutedthe open one on color.bg.hover with a line, color.text.primary
count optionalsizetype.size.captionweighttype.weight.heavy

How it behaves

Role: navigation; the open tab is aria-current
Props: base items* active param label * required
States: default · current · focused
Name: its label (Sections)
Keys: Tab between links; Enter opens
Target: 44 px on touch
Phone: one strip that scrolls sideways
Computer: in a row

Code

The same component as data: a server sends this, the web renders it with kit.tabs, 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.tabs(…)
{
  "type": "tabs",
  "props": {
    "base": "/components?c=tabs",
    "param": "tab",
    "active": "live",
    "items": [
      {
        "key": "live",
        "label": "Live",
        "count": 12
      },
      {
        "key": "clips",
        "label": "Clips"
      },
      {
        "key": "about",
        "label": "About"
      }
    ]
  }
}

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