What ships today
These 45 component contracts are available now, grouped by category from the catalog. Each contract defines the component's role, surface, states, parts, tokens and target coverage.
Button
Action primitive that emits one canonical press event from pointer, keyboard, and assistive activation.
IconButton
Square icon-only action primitive named by an explicit accessible label.
Checkbox
Boolean choice control with required, disabled, checked, indeterminate, and one canonical checked-change event.
Alert
Non-dismissible status message surface with optional title and icon slots.
AspectRatio
Content primitive that reserves a fixed media ratio around slotted content.
Avatar
Circular identity image with deterministic initials fallback.
Badge
Inline styled text for compact status or metadata without adding standalone semantics.
Card
Styled surface that frames related content while preserving child semantics.
Comment
Presentational comment leaf with host-owned author, timestamp, body, decision marker, and edit/delete events.
CommentAnchor
Compact anchored comment marker that opens an inline threaded discussion surface.
CommentThread
Threaded review discussion with flat host-supplied comments, reply submission, and resolve/reopen events.
Divider
Visual separation primitive with horizontal and vertical orientation.
FlowEditor
React-only structural graph editor for typed, positioned flow documents.
GraphViewer
Read-only pan and zoom graph canvas for typed, positioned graph documents.
ProgressBar
Linear progress indicator; value is determinate from 0..100 and absent value means indeterminate.
Section
Structural sectioning landmark with a consumer-provided accessible label.
Skeleton
Decorative placeholder shape used while loading content; loading announcements belong to status/live-region components.
Spinner
Indeterminate loading indicator with a localized default status announcement.
Tag
Compact inline label that can optionally expose a localized dismiss affordance.
VisuallyHidden
Utility primitive that hides content visually while preserving it for assistive technology.
Accordion
Disclosure collection with index-matched content panels.
CheckboxGroup
Multi-choice form control group with option items, field text, and one canonical values-change event.
Combobox
Single-select autocomplete field with popup suggestions, canonical selected value, and component-owned empty-state localization.
FormField
Form control wrapper that provides reusable label, description, required, invalid, and error association semantics.
RadioGroup
Single-choice form control group with option items, field text, and one canonical value-change event.
Select
Native single-choice select field with label, description, validation state, options, optional placeholder, and one canonical value-change event.
Slider
Numeric range input with label, description, disabled state, clamped value behavior, and one canonical value-change event.
Switch
Binary form control that exposes checked state and emits one canonical checked-change event.
Textarea
Multiline text input field with label, description, validation state, and one canonical value-change event. Flutter ignores the web-only resize affordance.
TextField
Text input field with label, description, validation state, and one canonical value-change event.
Container
Layout primitive that constrains content width and applies inline padding using the normative Layout DSL scales.
Grid
Layout primitive that arranges child content into a fixed number of equal-width columns using the normative Layout DSL spacing scale.
Split
Resizable two-pane workbench splitter with controlled ratio support and keyboard-accessible divider semantics.
Stack
Layout primitive that arranges child content along one flex axis using the normative Layout DSL spacing scale.
Breadcrumbs
Navigation trail where the final item identifies the current page.
Link
Inline navigation primitive that uses native web anchors and emits a canonical press event for host runtimes without native navigation.
Menu
Popup command collection with a trigger label, canonical open state, collection navigation, and one select event.
Pagination
Paged navigation control with deterministic page-window rendering.
Tabs
Horizontal tab collection with index-matched content panels.
TreeView
Single-select hierarchical tree derived from flat ordered item data.
Dialog
Overlay surface with canonical open state, dismissal policy, focus management, and reduced-motion behavior.
Drawer
Side-anchored dialog surface with canonical open state, dismissal policy, focus management, and reduced-motion behavior.
Popover
Non-modal anchored overlay with a trigger slot, open state, dismissal, and collision-aware positioning.
Toast
Presentational toast surface with variant styling and localized dismiss affordance.
Tooltip
Text-only tooltip shown from a trigger on hover or focus.
Catalog coverage
Use this list when you need the exact contract inventory and target coverage. The visual previews above come from the web catalog; the table shows where each contract is generated today.
| Category | Component | Contract summary | Targets |
|---|---|---|---|
| Action | Button | Action primitive that emits one canonical press event from pointer, keyboard, and assistive activation. | React + Flutter + Lit |
| Action | IconButton | Square icon-only action primitive named by an explicit accessible label. | React + Flutter + Lit |
| Choice | Checkbox | Boolean choice control with required, disabled, checked, indeterminate, and one canonical checked-change event. | React + Flutter + Lit |
| Content | Alert | Non-dismissible status message surface with optional title and icon slots. | React + Flutter + Lit |
| Content | AspectRatio | Content primitive that reserves a fixed media ratio around slotted content. | React + Flutter + Lit |
| Content | Avatar | Circular identity image with deterministic initials fallback. | React + Flutter + Lit |
| Content | Badge | Inline styled text for compact status or metadata without adding standalone semantics. | React + Flutter + Lit |
| Content | Card | Styled surface that frames related content while preserving child semantics. | React + Flutter + Lit |
| Content | Comment | Presentational comment leaf with host-owned author, timestamp, body, decision marker, and edit/delete events. | React + Flutter + Lit |
| Content | CommentAnchor | Compact anchored comment marker that opens an inline threaded discussion surface. | React + Flutter + Lit |
| Content | CommentThread | Threaded review discussion with flat host-supplied comments, reply submission, and resolve/reopen events. | React + Flutter + Lit |
| Content | Divider | Visual separation primitive with horizontal and vertical orientation. | React + Flutter + Lit |
| Content | FlowEditor | React-only structural graph editor for typed, positioned flow documents. | React |
| Content | GraphViewer | Read-only pan and zoom graph canvas for typed, positioned graph documents. | React + Flutter |
| Content | ProgressBar | Linear progress indicator; value is determinate from 0..100 and absent value means indeterminate. | React + Flutter + Lit |
| Content | Section | Structural sectioning landmark with a consumer-provided accessible label. | React + Flutter + Lit |
| Content | Skeleton | Decorative placeholder shape used while loading content; loading announcements belong to status/live-region components. | React + Flutter + Lit |
| Content | Spinner | Indeterminate loading indicator with a localized default status announcement. | React + Flutter + Lit |
| Content | Tag | Compact inline label that can optionally expose a localized dismiss affordance. | React + Flutter + Lit |
| Content | VisuallyHidden | Utility primitive that hides content visually while preserving it for assistive technology. | React + Flutter + Lit |
| Disclosure | Accordion | Disclosure collection with index-matched content panels. | React + Flutter + Lit |
| Form field | CheckboxGroup | Multi-choice form control group with option items, field text, and one canonical values-change event. | React + Flutter + Lit |
| Form field | Combobox | Single-select autocomplete field with popup suggestions, canonical selected value, and component-owned empty-state localization. | React + Flutter + Lit |
| Form field | FormField | Form control wrapper that provides reusable label, description, required, invalid, and error association semantics. | React + Flutter + Lit |
| Form field | RadioGroup | Single-choice form control group with option items, field text, and one canonical value-change event. | React + Flutter + Lit |
| Form field | Select | Native single-choice select field with label, description, validation state, options, optional placeholder, and one canonical value-change event. | React + Flutter + Lit |
| Form field | Slider | Numeric range input with label, description, disabled state, clamped value behavior, and one canonical value-change event. | React + Flutter + Lit |
| Form field | Switch | Binary form control that exposes checked state and emits one canonical checked-change event. | React + Flutter + Lit |
| Form field | Textarea | Multiline text input field with label, description, validation state, and one canonical value-change event. Flutter ignores the web-only resize affordance. | React + Flutter + Lit |
| Form field | TextField | Text input field with label, description, validation state, and one canonical value-change event. | React + Flutter + Lit |
| Layout | Container | Layout primitive that constrains content width and applies inline padding using the normative Layout DSL scales. | React + Flutter + Lit |
| Layout | Grid | Layout primitive that arranges child content into a fixed number of equal-width columns using the normative Layout DSL spacing scale. | React + Flutter + Lit |
| Layout | Split | Resizable two-pane workbench splitter with controlled ratio support and keyboard-accessible divider semantics. | React + Flutter + Lit |
| Layout | Stack | Layout primitive that arranges child content along one flex axis using the normative Layout DSL spacing scale. | React + Flutter + Lit |
| Navigation | Breadcrumbs | Navigation trail where the final item identifies the current page. | React + Flutter + Lit |
| Navigation | Link | Inline navigation primitive that uses native web anchors and emits a canonical press event for host runtimes without native navigation. | React + Flutter + Lit |
| Navigation | Menu | Popup command collection with a trigger label, canonical open state, collection navigation, and one select event. | React + Flutter + Lit |
| Navigation | Pagination | Paged navigation control with deterministic page-window rendering. | React + Flutter + Lit |
| Navigation | Tabs | Horizontal tab collection with index-matched content panels. | React + Flutter + Lit |
| Navigation | TreeView | Single-select hierarchical tree derived from flat ordered item data. | React + Flutter + Lit |
| Overlay | Dialog | Overlay surface with canonical open state, dismissal policy, focus management, and reduced-motion behavior. | React + Flutter + Lit |
| Overlay | Drawer | Side-anchored dialog surface with canonical open state, dismissal policy, focus management, and reduced-motion behavior. | React + Flutter + Lit |
| Overlay | Popover | Non-modal anchored overlay with a trigger slot, open state, dismissal, and collision-aware positioning. | React + Flutter + Lit |
| Overlay | Toast | Presentational toast surface with variant styling and localized dismiss affordance. | React + Flutter + Lit |
| Overlay | Tooltip | Text-only tooltip shown from a trigger on hover or focus. | React + Flutter + Lit |
Add your own component
- Write your React component and its prop interface in packages/react/src.
- Export it from packages/react/src/index.ts.
- Run the contract build to generate the matching Flutter contract.
- Implement the Flutter widget against that generated contract.
- Add a Storybook story and a Widgetbook use case so it shows up in both catalogs.
- Confirm the two catalogs stay in step.
pnpm build:contracts
pnpm catalog-symmetryYour props are the contract
Your React TypeScript props are the single source of truth for a component's shape. When you change a prop, the build fails until the Flutter side is regenerated — run pnpm build:contracts to bring it back in line. You never hand-edit the Flutter contract.
export interface WyrdBadgeProps {
children: React.ReactNode;
tone?: "neutral" | "success" | "warning" | "danger";
size?: "sm" | "md";
}abstract class WyrdBadgeContract extends StatelessWidget {
const WyrdBadgeContract({
required this.children,
this.tone = WyrdBadgeTone.neutral,
this.size = WyrdBadgeSize.md,
super.key,
});
final Widget children;
final WyrdBadgeTone tone;
final WyrdBadgeSize size;
}Keep components clean
- Keep components presentation-only — no data fetching, routing, or global side effects.
- Consume tokens; don't hard-code colors, timings, or sizes.
- Prefer children and composition over piling on boolean props.
- Give every component matching catalog coverage so drift shows up early.