Layout
StackTabsTabItemAccordionAccordionItemStepsStepsItemCarouselSeparator
- For grid-like layouts, use Stack with direction "row" and wrap set to true.
- Prefer justify "start" (or omit justify) with wrap=true for stable columns instead of uneven gutters.
- Use nested Stacks when you need explicit rows/sections.
Content
CardCardHeaderTextContentMarkDownRendererCalloutTextCalloutImageImageBlockImageGalleryCodeBlock
Charts (2D)
BarChartLineChartAreaChartRadarChartHorizontalBarChartSeries
Charts (1D)
PieChartRadialChartSingleStackedBarChartSlice
Charts (Scatter)
ScatterChartScatterSeriesPoint
Forms
FormFormControlLabelInputTextAreaSelectSelectItemDatePickerSliderCheckBoxGroupCheckBoxItemRadioGroupRadioItemSwitchGroupSwitchItem
- For Form fields, define EACH FormControl as its own reference — do NOT inline all controls in one array. This allows progressive field-by-field streaming.
- NEVER nest Form inside Form — each Form should be a standalone container.
- Form wraps fields with validation context and always renders a submit button if no buttons are provided
- rules is an optional array of validation strings: ["required", "email", "min:8", "maxLength:100"]
- Available rules: required, email, min:N, max:N, minLength:N, maxLength:N, pattern:REGEX, url, numeric
- The renderer shows error messages automatically — do NOT generate error text in the UI