Components
Every component @w6w/ui exports, grouped by what it’s for. Each group page lists the key props
and a short example. Unless a page says otherwise, import from @w6w/ui and load
@w6w/ui/styles.css once.
Most components are props in, callbacks out: they never fetch, so you can feed them from
@w6w/react, your own client or fixtures. The five marked “provider” below read the API client
from W6WUIProvider and call your W6W server themselves.
| Group | Components |
|---|---|
| Providers and the API client | W6WUIProvider, createW6WApi, useW6WApi, ExpressionOptionsProvider |
| Buttons and icons | IconButton, Icon, EditButton, DeleteButton |
| Data display | AppIcon, ListItem, Copyable, CopyableText |
| Forms | AppPicker (provider), ActionTestForm (provider), ParamsForm, PropertyEntryForm, AuthFieldsForm, ExpressionInput, NodeConfigForm, RetryPolicyFields |
| Editors | CodeBlock, CodeEditor, JsonEditor, YamlEditor |
| Workflow canvas | WorkflowFlowEditor (provider, from @w6w/ui/flow) |
| Modals | Modal, ConfirmModal, AddConnectionModal (provider), StepBuilderModal (provider) |
| Status and health | HealthStatusPill, StepStatusPill, UptimeStrip, HistoryTimeline, RepoSyncIndicator |
| Executions | ExecutionList, ExecutionFilters, ExecutionStats, ExecutionDetail, ExecutionLogPanel, ApiCallsPanel |
| Server resources | ServerResourcesCard, ServerResourcesCardSmall, ServerResourcesRail, ServerResourcesBadge |
What you compose yourself
There’s no ready-made table of workflows, functions or connections. Build those lists from your own
components (or ListItem) with data from @w6w/react or your own client. @w6w/ui supplies the
interactive pieces around them: the pickers, modals, forms, the canvas and the run views.
Types and helpers
The root entrypoint also exports the wire types these components take, so you can type your own
data: AppSummary, ActionDef, ActionParam, AuthDef, AuthField, ConnectionSummary,
ApiCallRecord, FunctionSummary, FunctionDetail, WorkflowSummary, WorkflowDetail,
TriggerSummary, SubscriptionSummary, ThemeMode ("light" | "dark"), and the expression
envelopes ExprValue, ExprPart, ExprPartKind and SecretValue, with the type guards
isExprValue(v) and isSecretValue(v).
Where to next
- Overview: install, stylesheet and provider setup.
- Providers and the API client: start here before using a provider component.