UI Components Overview

Pre-built component library included with every plugin scaffolded by whatalo init, designed to match the admin look and feel with automatic dark/light theme support.

Plugins scaffolded with whatalo init include a pre-built UI component library located at src/components/whatalo-ui/. These components are designed to match the admin's look and feel, with automatic dark/light theme support and zero external dependencies.

Design System

The library uses CSS custom properties with a consistent prefix:

Concept	Details
Token prefix	`--wui-*`
Class prefix	`.wui-*`
Theme switching	`[data-theme="dark"]` attribute on `document.documentElement`
Dependencies	Pure React + CSS — no external packages required

Available Components

Seventeen components across three categories:

Category	Components
Layout	`Page`, `PageHeader`, `Layout`, `Layout.Section`, `Card`, `Box`, `BlockStack`, `InlineStack`, `Divider`
Content	`Text`, `Badge`, `Banner`, `List`, `List.Item`, `Spinner`
Actions	`Button`, `Link`, `Accordion`

Available Hooks

Hook	Purpose
`useAutoResize()`	Automatically reports iframe height to the admin host
`useThemeSync()`	Syncs the admin theme (light/dark) to your plugin

Importing Components

import {
  Page,
  PageHeader,
  Card,
  Text,
  Button,
  Banner,
  useAutoResize,
  useThemeSync,
} from "./components/whatalo-ui";

Customization

These components live inside your project, not in an npm package. You can modify any component or extend the design tokens freely. The styles.css file contains all token definitions.

Theme Tokens

/* Light theme (default) */
:root {
  --wui-bg: #ffffff;
  --wui-bg-secondary: #f8f9fa;
  --wui-text: #1a1a2e;
  --wui-text-secondary: #64748b;
  --wui-border: #e2e8f0;
  --wui-primary: #6366f1;
  --wui-radius: 8px;
  --wui-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Dark theme — applied when admin switches to dark mode */
[data-theme="dark"] {
  --wui-bg: #1a1a2e;
  --wui-bg-secondary: #252540;
  --wui-text: #e8e8e8;
  --wui-text-secondary: #94a3b8;
  --wui-border: #334155;
  --wui-primary: #818cf8;
}

Scrolling Behavior

The admin manages scrolling for the iframe container. Your plugin's base CSS sets:

html,
body {
  overflow: hidden;
  background: transparent;
}

Your plugin's background inherits from the admin. The useAutoResize() hook reports your content height so the admin can resize the iframe accordingly.