Components

Ready-made native components ship with Flow. Each is a real component — but the interaction here (open, close, switch tabs, toggle) is client-side, so it's instant.

Overlays — Modal & Drawer

@expose modalOpen = false;
@expose drawerOpen = false;

<button onClick={() => this.modalOpen = true}>Open modal</button>
<button onClick={() => this.drawerOpen = true}>Open drawer</button>

// bundle visibility, backdrop, close button and Escape — one boolean prop
<Modal show={this.modalOpen} title="Edit contact">…</Modal>
<Drawer show={this.drawerOpen} side="right" title="Your cart">…</Drawer>

Menu — Dropdown

<Dropdown label="Options ▾" align="left">
  <button>Profile</button>
  <button>Settings</button>
  <button class="text-red-600">Sign out</button>
</Dropdown>

Toggle — Switch

@expose notifications = true;

<Switch bind={this.notifications} class="... data-[checked]:bg-orange-500">
  <span class="... group-data-[checked]:translate-x-6" />
</Switch>

Tabs

Client-side tabbed panels with roving arrow-key navigation and the right ARIA roles.

Switching tabs never touches the server — it's pure client state.

Every panel is just JSX you pass in.

<Tabs items={[
  { label: "Overview", content: <p>…</p> },
  { label: "Activity", content: <p>…</p> },
  { label: "Settings", content: <p>…</p> },
]} />