UI Components

Every component in @avihq/ui, rendered live on this page — the same library Avi's dashboard and built-in apps use. In app panels, import components from @avihq/ui/panel (it injects the stylesheet into the sandboxed iframe); everything is styled through Avi's design tokens, so it all follows the host theme automatically. See App React UI for how panels are built.

Buttons

Variants map to the token color groups; icon sizes are square.

import { Button } from "@avihq/ui/panel"

Text fields

Inputs render bare when label-less (safe in flex rows) and grow label, error, and helper slots when you need them.

import { Input, Textarea, TagInput } from "@avihq/ui/panel"

Lowercase, kebab-case.

designtokens

Enter or comma commits; Backspace on empty removes the last tag.

Selection controls

Select supports groups, descriptions, disabled options, rich rows, and a borderless ghost trigger; the listbox portals above any container.

import { Select, Checkbox, Switch, RadioGroup, Slider, ToggleGroup } from "@avihq/ui/panel"

Dates

String-in, string-out (YYYY-MM-DD) — no Date objects to juggle.

import { DatePicker, DateRangePicker } from "@avihq/ui/panel"

Reporting window
—

Feedback

Alerts in three visual variants across four semantic colors; badges for statuses; menus and modals for actions.

import { Alert, Badge, Menu, Modal, Spinner } from "@avihq/ui/panel"

SecondaryInfoActivePendingFailedInverseOutline

Compound tabs — controlled or uncontrolled — with panels, roving arrow-key focus, and a scrollable row.

import { Tabs } from "@avihq/ui/panel"

Panels mount only while their tab is active.

Data display

Cards for grouping, the compound Table with a sticky-header scroll shadow, typography primitives, and a syntax-highlighted CodeBlock.

import { Card, Table, Heading, Text, Divider, CodeBlock } from "@avihq/ui/panel"

Default card

Primary border.

Secondary

Lighter border.

Ghost

No border at all.

DeployStatusWhen
api@4.2.1Live2m ago
web@1.9.0Rollingjust now

Heading 3xl — 36px

Heading 2xl — 30px

Heading xl — 24px

Heading lg — 20px

Heading md — 16px

Heading sm — 14px

Heading xs — 12px

Body text, primary.

Secondary, small.

Tertiary, extra small.

tsx
import { Button } from "@avihq/ui/panel";

export default function Panel() {
  return <Button onClick={save}>Save</Button>;
}

Panel chrome

The standard shape of an app panel. PanelShell is the unpadded root — header, toolbar, and tables sit directly inside it so their borders run edge to edge; padding lives only in PanelBody. Never pad the panel's outer element.

import { PanelShell, PanelHeader, Toolbar, PanelBody, EmptyState } from "@avihq/ui/panel"

Customers

Everyone in this project

PanelBody — the scrollable content region, and the only place padding belongs. Full-bleed rows like tables skip it (or use its flush prop) so row borders reach the edges.

No customers yet

Records your app creates show up here.

Charts

Themed recharts wrappers — a separate entry so panels that don't chart never pay for it (~480 KB minified).

import { LineChart, BarChart, … } from "@avihq/ui/charts"

DataTable

A virtualized TanStack-powered table with sorting, filtering, and pagination for big datasets — separate entry. Inside an already-bordered host (a panel, a card) pass flush: the table drops its own border so borders never double up, and the filter and pagination rows take padding instead.

import { DataTable } from "@avihq/ui/data-table"

Editor

Avi's rich markdown editor — toolbar, GFM, markdown strings in and out. Separate entry.

import { Editor } from "@avihq/ui/editor"