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.

Empty state

What an empty list says: a title, one line, and the one thing to do next.

No public rooms yet

Start the first one: public, or private to the people you invite.

Start a room

Parts and their tokens

  • icon optionalcolorcolor.accent.base
  • titleweighttype.weight.bold
  • text optionalcolorcolor.text.muted
  • action optionala primary button

How it behaves

Role
status
Props
title* text icon action * required
States
default
Name
its title and line
Keys
the action is one Tab stop
Target
44 px
Phone
centred in the space
Computer
the same

Code

The same component as data: a server sends this, the web renders it with kit.empty, 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.empty(…)
{
  "type": "empty",
  "props": {
    "title": "No public rooms yet",
    "text": "Start the first one: public, or private to the people you invite.",
    "icon": "chat",
    "action": {
      "href": "/components?c=empty",
      "label": "Start a room"
    }
  }
}

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