Zeno docs

Install the package. Initialize from the active theme.

@zenoui/react and @zenoui/react-native give your apps the provider and token-driven primitives. Zeno Cloud serves the published token contract, so web and native UI can update from the active environment without shipping new component code.

Install React

Add the web package to a React app. It includes the hosted-theme provider, pre-hydration helper, runtime CSS utilities, and primitives including `Avatar`, `Badge`, `Button`, `Card`, `Checkbox`, `Input`, `Select`, `Stack`, `Switch`, and `Text`.@zenoui/react on npm

yarn add @zenoui/react

/* app/globals.css */
@import "tailwindcss";
@source "../node_modules/@zenoui/react/dist";

// tailwind.config.ts
export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@zenoui/react/dist/**/*.{js,mjs}"
  ]
};

Install React Native

Add the native package to a React Native app with NativeWind. It exposes the same primitive names and reads the same Zeno token contract through the native provider.@zenoui/react-native on npm

yarn add @zenoui/react-native nativewind tailwindcss

// tailwind.config.ts
export default {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@zenoui/react-native/dist/**/*.{js,mjs}"
  ]
};

Create a theme source

A theme source points the runtime at one project and environment. Consumer apps do not need Supabase keys or authoring credentials; they only need the public Zeno base URL and the project environment they should follow.

export const zenoThemeSource = {
  type: "zeno",
  projectId: "acme-dashboard",
  environment: "production",
  baseUrl: "https://zenoui.in"
} as const;

Pre-hydration CSS

In server-rendered apps, inject the generated script in the document head. It applies the latest cached or fetched theme before React paints, so the first visible frame already has the right CSS variables.

import { createZenoThemeScript } from "@zenoui/react";
import { zenoThemeSource } from "./zeno-theme";

<script
  dangerouslySetInnerHTML={{
    __html: createZenoThemeScript({ source: zenoThemeSource })
  }}
/>

Runtime provider

Wrap the app once near the root. On web, the provider loads the active token JSON and applies CSS variables. On React Native, the provider exposes the same semantic token contract through NativeWind-compatible primitives.

import {
  Avatar,
  Badge,
  Button,
  Card,
  Checkbox,
  Select,
  Stack,
  Switch,
  Text,
  ZenoThemeProvider
} from "@zenoui/react";
import { zenoThemeSource } from "./zeno-theme";

export function App() {
  return (
    <ZenoThemeProvider
      source={zenoThemeSource}
      runtimePolicy="network-first"
    >
      <Card>
        <Stack gap="md">
          <Avatar name="Ada Lovelace" />
          <Badge tone="brand">Live</Badge>
          <Text variant="title">Project settings</Text>
          <Select
            label="Environment"
            placeholder="Choose environment"
            options={[
              { label: "Production", value: "production" },
              { label: "Preview", value: "preview" }
            ]}
          />
          <Checkbox label="Enable runtime theme" defaultChecked />
          <Switch label="Publish changes" />
        </Stack>
        <Button>Ship it</Button>
      </Card>
    </ZenoThemeProvider>
  );
}

Native provider

The React Native package mirrors the web primitive surface so product screens can share theme concepts across platforms.

import {
  Avatar,
  Badge,
  Button,
  Card,
  Checkbox,
  Select,
  Stack,
  Switch,
  Text,
  ZenoThemeProvider
} from "@zenoui/react-native";
import { zenoThemeSource } from "./zeno-theme";

export function App() {
  return (
    <ZenoThemeProvider source={zenoThemeSource}>
      <Card>
        <Stack gap="md">
          <Avatar name="Ada Lovelace" />
          <Badge tone="brand">Live</Badge>
          <Text variant="title">Mobile settings</Text>
          <Select
            label="Environment"
            placeholder="Choose environment"
            options={[
              { label: "Production", value: "production" },
              { label: "Preview", value: "preview" }
            ]}
          />
          <Checkbox label="Enable runtime theme" defaultChecked />
          <Switch label="Publish changes" />
          <Button>Save</Button>
        </Stack>
      </Card>
    </ZenoThemeProvider>
  );
}

Runtime endpointsPublished endpoints are public by design. They expose read-only theme contracts and generated CSS, while authoring, drafts, membership, and publishing stay behind the Zeno console. That keeps runtime apps simple: fetch by project and environment, then let the active alias decide which immutable version is current.

GET /api/themes/:projectId/:environment.jsonGET /api/themes/:projectId/:environment.cssGET /api/themes/:projectId/versions/:version.json

import { createZenoThemeScript } from "@zenoui/react"; import { zenoThemeSource } from "./zeno-theme"; <script dangerouslySetInnerHTML={{ __html: createZenoThemeScript({ source: zenoThemeSource }) }} />

import { Avatar, Badge, Button, Card, Checkbox, Select, Stack, Switch, Text, ZenoThemeProvider } from "@zenoui/react"; import { zenoThemeSource } from "./zeno-theme"; export function App() { return ( <ZenoThemeProvider source={zenoThemeSource} runtimePolicy="network-first" > <Card> <Stack gap="md"> <Avatar name="Ada Lovelace" /> <Badge tone="brand">Live</Badge> <Text variant="title">Project settings</Text> <Select label="Environment" placeholder="Choose environment" options={[ { label: "Production", value: "production" }, { label: "Preview", value: "preview" } ]} /> <Checkbox label="Enable runtime theme" defaultChecked /> <Switch label="Publish changes" /> </Stack> <Button>Ship it</Button> </Card> </ZenoThemeProvider> ); }

import { Avatar, Badge, Button, Card, Checkbox, Select, Stack, Switch, Text, ZenoThemeProvider } from "@zenoui/react-native"; import { zenoThemeSource } from "./zeno-theme"; export function App() { return ( <ZenoThemeProvider source={zenoThemeSource}> <Card> <Stack gap="md"> <Avatar name="Ada Lovelace" /> <Badge tone="brand">Live</Badge> <Text variant="title">Mobile settings</Text> <Select label="Environment" placeholder="Choose environment" options={[ { label: "Production", value: "production" }, { label: "Preview", value: "preview" } ]} /> <Checkbox label="Enable runtime theme" defaultChecked /> <Switch label="Publish changes" /> <Button>Save</Button> </Stack> </Card> </ZenoThemeProvider> ); }