Components

Zebflow includes a built-in UI component library under components/ui/.

Using UI components

import Button from "@/components/ui/button";
import Input from "@/components/ui/input";
import Card from "@/components/ui/card";
import { Field, Label } from "@/components/ui/field";

export default function FormPage() {
  return (
    <Card>
      <Field>
        <Label>Name</Label>
        <Input placeholder="Enter your name" />
      </Field>
      <Button>Submit</Button>
    </Card>
  );
}

Available components

• button — buttons with variants and as prop for element type
• input — text inputs
• checkbox — checkboxes with labels
• select — dropdown selects
• field / label — form field wrappers
• card — content cards
• dialog — modal dialogs
• badge — status badges
• separator — visual dividers
• tabs-* — tab navigation
• dropdown-* — dropdown menus
• kbd — keyboard shortcut display
• markdown — markdown renderer
• code-editor — CodeMirror editor

Zeb libraries

Specialized libraries for rich functionality:

Rules

• Always use components/ui/ components — never raw <input>, <button>, etc. with manual classes
• Never use inline style= attributes
• Never use document.* methods in TSX files
• Never build HTML strings in behavior files — all rendering is React JSX