← ReferenceComponent referenceEvery built-in component plus the custom components this site registers (CodeBlock, TableOfContents). Each entry is a small card: name, one-line role, platforms, allowed children, and a link into the underlying spec file. The cards are derived from component spec metadata so the list stays in sync.auto-generated
What's covered~28 built-ins (View, Scroll, Label, Button, Image, TabView, Collection, CodeBlock in core, and so on) plus whatever lives under docs/components/json/ in the consuming project. Per-platform availability is annotated: some components are web-only, some are iOS-only, most are cross-platform. Expect the list to grow with the framework.
Container vs leafEvery component is either a container (can own children) or a leaf (cannot). Container components expose child-slot semantics — some accept any subtree, some accept only a specific cell shape, Collection accepts a CollectionDataSource. Leaf components accept their declared props and nothing else; adding children to a leaf is a build warning.
Custom componentsRegistered in `.jsonui-doc-rules.json` under `componentTypes.screen`. Each custom entry points at a `docs/components/json/<name>.component.json` spec; that spec is what the /guides/custom-components guide walks you through authoring. Once registered, a custom component behaves exactly like a built-in: it shows up here, in MCP's `search_components`, and in the attribute validator.
Jumping to a componentEvery row links back into its spec file (built-ins point at `shared/core/component_metadata.json`, customs at their own component.json). From the spec you get its attribute table (the other /reference/attributes axis) and the layout-authoring examples the spec embeds.
Composition primitivesTwo components in this catalog are not widgets — they are composition primitives, used to *arrange* other layouts or screens rather than to render content of their own. Group them mentally with the spec's `include` directive when picking a tool.• `TabView` — multiple layouts under one parent ViewModel, switched by a tab bar.• `Embed` — hosts a sub-screen with its own ViewModel and lifecycle. The embedded screen is unchanged.See /concepts/screen-composition for the include / TabView / Embed trade-off.
All componentsEvery component with a short one-line hook. Tap a card to see its attributes, code examples, and platform differences.
LabelDisplay component for single-line or multi-line text. Read-only./reference/components/label
IconLabelLabel with a leading or trailing icon glyph./reference/components/icon-label
ButtonInteractive component that triggers a ViewModel event on tap./reference/components/button
TextFieldSingle-line text input with two-way binding./reference/components/text-field
TextViewMulti-line text input that grows with content./reference/components/text-view
EditTextAndroid-flavored alias for TextField (XML compat)./reference/components/edit-text
InputWeb-flavored alias for TextField mirroring HTML <input>./reference/components/input
ViewGeneric container that arranges children vertically or horizontally./reference/components/view
SafeAreaViewView that respects the host platform's safe area (notch, status bar)./reference/components/safe-area-view
ScrollViewScrollable container for content that may overflow the viewport./reference/components/scroll-view
CollectionVirtualized list / grid bound to a dynamic array./reference/components/collection
TabViewMulti-page tab bar with one active child at a time./reference/components/tab-view
SelectBoxPicker for one value from a list; date / time modes supported./reference/components/select-box
SwitchBinary ON/OFF toggle with animated thumb./reference/components/switch
ToggleAlias for Switch with Android-style naming./reference/components/toggle
SegmentMutually exclusive horizontal button group (2–5 options)./reference/components/segment
SliderContinuous numeric input over a min / max range./reference/components/slider
RadioSingle selection within a mutually exclusive group./reference/components/radio
CheckBoxBinary or indeterminate checkbox for zero-or-more selections./reference/components/check-box
CheckShort alias for CheckBox./reference/components/check
ProgressLinear or circular progress indicator (determinate)./reference/components/progress
IndicatorActivity spinner for indefinite short-duration waits./reference/components/indicator
ImageBundled / local image from the resource bundle./reference/components/image
NetworkImageURL-loaded image with caching, placeholder, and error fallback./reference/components/network-image
GradientViewView with a linear gradient background (multi-stop)./reference/components/gradient-view
BlurPlatform-native blur / backdrop filter for glass effects./reference/components/blur
CircleViewCircular container for avatars, badges, and status dots./reference/components/circle-view
WebEmbedded web content via WKWebView / WebView / <iframe>./reference/components/web
EmbedHosts another screen as a region — child owns its own ViewModel./reference/components/embed
Keep reading
Attribute referenceThe other axis./reference/attributes
Building a custom componentHow to add your own./guides/custom-components