Themed Component Properties

Every component type the Create Themed Component dialog itself offers, and every property it exposes for each — a deliberately narrower set than the general component registry. 51 themeable component types · 6 universal Style properties · 13 universal Layout properties Not themeable: Carousel, Video exist as ordinary components in Studio (see the general Component Reference) but have no themed-component schema at all — they can’t be turned into a reusable preset via Create Themed Component. See Create Themed Component for how to actually use these to build a preset, and the general Component Reference for what each component can do elsewhere in Studio, beyond theming. A note on colors and other themeable values: Any color-type prop or style value (backgroundColor/color/borderColor/*Color props) may be a raw value OR a $token reference resolved against the active theme mode. Namespace is inferred from the token string.

Token kind	Pattern	Example
colors	`$<tokenName>`	`$primary`
typography	`$typography.<scale\|weight\|fontFamily>[.<key>]`	`$typography.scale.md`
spacing	`$spacing.<key>`	`$spacing.md`
borderRadius	`$borderRadius.<key>`	`$borderRadius.lg`

Available Widgets, by Category

Charts

Component	Container	Own Properties
AreaChart	No	25
BarChart	No	23
LineChart	No	26
PieChart	No	11
StackedBarChart	No	22

Data Display

Component	Container	Own Properties
Badge	No	4
Card	Yes	4
CardList	Yes	16
LanguageSwitcher	No	2
List	Yes	14
Table	Yes	3

Disclosure

Component	Container	Own Properties
Accordion	No	6
Actionsheet	No	3

Feedback

Component	Container	Own Properties
Alert	No	3
Progress	No	5
Spinner	No	3
Toast	No	6

Forms

Component	Container	Own Properties
Button	No	9
Checkbox	No	8
Form	Yes	0
FormControl	Yes	8
IconButton	No	10
Input	No	9
Link	No	5
Pressable	Yes	4
Radio	No	9
SearchInput	No	16
Select	No	8
Slider	No	8
Switch	No	4
Textarea	No	7

Layout

Component	Container	Own Properties
Box	Yes	7
Center	Yes	1
Column	Yes	1
Divider	No	3
Grid	Yes	4
Row	Yes	1

Media And Icons

Component	Container	Own Properties
Avatar	No	3
CircleImage	No	14
Icon	No	4
Image	No	6

Others

Component	Container	Own Properties
Fab	No	5
Skeleton	No	6

Overlay

Component	Container	Own Properties
AlertDialog	No	4
Drawer	No	3
Menu	No	4
Modal	Yes	2
Popover	No	5
Tooltip	No	2

Typography

Component	Container	Own Properties
Heading	No	8
Text	No	10

Universal Style Properties

Every themed component gets these from the dialog’s Style accordion, in addition to its own properties below — subject to the applicability notes in each row.

Property	Label	Section	Type	Applies To	Notes
`backgroundColor`	Background Color	Background	color	all component types
`color`	Text Color	Text Color	color	component types that render text	Hidden for: Image, Avatar, CircleImage, Icon, Row, Column, Box, Grid, List, CardList, BarChart, LineChart, PieChart, AreaChart, StackedBarChart.
`borderRadius`	Radius	Border	number (px)	all component types
`borderWidth`	Border Width	Border	number (px)	all component types
`borderColor`	Border Color	Border	color	all component types
`opacity`	Opacity	Effects	number (%)	all component types

Universal Layout Properties

Every themed component gets these from the dialog’s Layout accordion, in addition to its own properties below — subject to the applicability notes in each row (several are container-only or have per-type exceptions, unlike the Style properties above, which are almost all universal).

Property	Section	Type	Applies To	Notes
`flexDirection`	Direction	select	container types (Box, Row, Column, Grid, List, CardList)
`justifyContent`	Alignment	select	container types	Disabled with a hint on Box — Box is a single-child wrapper, so alignment doesn’t apply; a one-click convert-to-Row/Column banner is offered instead.
`alignItems`	Alignment	select	container types	Same Box caveat as justifyContent.
`itemsSpacing`	Spacing	number (px)	stack types only (Row, Column)	Alias for `props.gap (kept in sync)`
`gap`	Spacing	number (px)	non-stack container types (Box, Grid, List, CardList)	On Grid, setting gap clears rowGap/columnGap longhands — canvas only applies the shorthand.
`padding / paddingTop / paddingRight / paddingBottom / paddingLeft`	Spacing	number (px)	all component types except where hidden	Hidden for: Image, Text, Heading
`margin / marginTop / marginRight / marginBottom / marginLeft`	Spacing	number (px)	all component types, no exceptions
`flexWrap`	Advanced	select	container types	Hidden for: List, CardList
`overflow`	Advanced	select	container types	Hidden for: List, CardList. The ‘scroll’ option itself is additionally hidden for Row/Column/Box — the underlying native view ignores overflow:‘scroll’; use the dedicated Scrollable toggle instead.
`scrollable`	Advanced	select	stack types only (Row, Column)	Canvas adds overflow:auto on the scroll axis; the live preview and the exported app render a real scroll view. Requires a fixed size on the scroll axis.
`flex`	Advanced	number	all component types, no exceptions	A Row/Column with flex>0 nested inside a perpendicular stack parent absorbs all leftover space along the parent main axis — flagged in-editor as a warning.
`minHeight`	Advanced	number (px)	all component types, no exceptions
`columns`	Advanced	number	Grid only

Component Details

Accordion

Category: Disclosure
Container (accepts children): No

Properties specific to Accordion (plus every Universal Style and Layout Property above):

Property	Label	Type	Default	Options / Description
`title`	Title	string	`Accordion Item`	Header text of the accordion section
`defaultValue`	Default Value	string	—	Key of the section that is expanded by default
`type`	Type	select	`single`	`Single`, `Multiple`
`variant`	Variant	select	`filled`	`Filled`, `Unfilled`
`isCollapsible`	Collapsible	boolean	`true`	Allow the open section to be collapsed by clicking again
`isDisabled`	Disabled	boolean	`false`	Prevent user interaction with the accordion

Property	Label	Type	Default	Options / Description
`title`	Title	string	`Actions`	Heading text of the action sheet
`items`	Items (comma)	string	`Edit,Delete,Cancel`	Comma-separated list of action items
`closeOnOverlayClick`	Close on Overlay	boolean	`true`	Dismiss the action sheet when clicking outside it

Property	Label	Type	Default	Options / Description
`text`	Text	string	`This is an alert`	The alert message text
`action`	Action	select	`info`	`Error`, `Warning`, `Success`, `Info`, `Muted`
`variant`	Variant	select	`solid`	`Solid`, `Outline`, `Accent`

Property	Label	Type	Default	Options / Description
`title`	Title	string	`Are you sure?`	Heading text of the alert dialog
`description`	Description	string	`This action cannot be undone.`	Body text explaining the alert action
`size`	Size	select	`md`	`XS`, `SM`, `MD`, `LG`, `Full`
`closeOnOverlayClick`	Close on Overlay	boolean	`true`	Dismiss the dialog when clicking outside it

Property	Label	Type	Default	Options / Description
`chartData`	Chart Data (JSON)	string	`[]`	JSON array of data points
`title`	Title	string	—	Chart title displayed above the chart
`lineColor`	Line Color	color	`#56D0A0`	Color of the area line
`startFillColor`	Fill Color	color	`#56D0A0`	Color of the area fill
`startOpacity`	Fill Opacity	number	`0.3`	Opacity of the area fill (0-1)
`thickness`	Line Thickness	number	`2`	Thickness of the line
`curved`	Curved	boolean	`true`	Use curved lines
`hideDataPoints`	Hide Data Points	boolean	`false`	Hide data point dots
`dataPointsColor`	Points Color	color	`#56D0A0`	Color of data point dots
`dataPointsRadius`	Points Radius	number	`3`	Radius of data point dots
`isAnimated`	Animated	boolean	`true`	Enable animation on render
`chartWidth`	Chart Width	number	`280`	Total chart width in pixels
`chartHeight`	Chart Height	number	`200`	Total chart height in pixels
`backgroundColor`	Background	color	—	Chart background color
`rulesColor`	Grid Color	color	`#F0F0F0`	Color of horizontal grid lines
`xAxisLabelColor`	X Label Color	color	`#999`	Color of X-axis labels
`yAxisLabelColor`	Y Label Color	color	`#999`	Color of Y-axis labels
`paddingTop`	Chart Inset Top	number	—	Inner spacing reserved inside the chart for axis labels. Set 0 to remove.
`paddingRight`	Chart Inset Right	number	—	Inner spacing reserved inside the chart for axis labels. Set 0 to remove.
`paddingBottom`	Chart Inset Bottom	number	—	Inner spacing reserved inside the chart for axis labels. Set 0 to remove.
`paddingLeft`	Chart Inset Left	number	—	Inner spacing reserved inside the chart for axis labels. Set 0 to remove.
`axisColor`	Axis Color	color	`#E0E0E0`	Color of the X and Y axis lines
`hideAxes`	Hide Axes	boolean	`false`	Hide X and Y axis lines entirely
`hideXAxisLabels`	Hide X Labels	boolean	`false`	Hide the X-axis text labels (e.g. months)
`hideYAxisLabels`	Hide Y Labels	boolean	`false`	Hide the Y-axis numeric tick labels

​Available Widgets, by Category

​Charts

​Data Display

​Disclosure

​Feedback

​Forms

​Layout

​Media And Icons

​Others

​Overlay

​Typography

​Universal Style Properties

​Universal Layout Properties

​Component Details

​Accordion

​Actionsheet

​Alert

​AlertDialog

​AreaChart

​Avatar

​Badge

​BarChart

​Box

​Button

​Card

​CardList

​Center

​Checkbox

​CircleImage

​Column

​Divider

​Drawer

​Fab

​Form

​FormControl

​Grid

​Heading

​Icon

​IconButton

​Image

​Input

​LanguageSwitcher

​LineChart

​Link

​List

​Menu

​Modal

​PieChart

​Popover

​Pressable

​Progress

​Radio

​Row

​SearchInput

​Select

​Skeleton

​Slider

​Spinner

​StackedBarChart

​Switch

​Table

​Text

​Textarea

​Toast

​Tooltip

​Related

Component properties

Themed components

Available Widgets, by Category

Charts

Data Display

Disclosure

Feedback

Forms

Layout

Media And Icons

Others

Overlay

Typography

Universal Style Properties

Universal Layout Properties

Component Details

Accordion

Actionsheet

Alert

AlertDialog

AreaChart

Avatar

Badge

BarChart

Box

Button

Card

CardList

Center

Checkbox

CircleImage

Column

Divider

Drawer

Fab

Form

FormControl

Grid

Heading

Icon

IconButton

Image

Input

LanguageSwitcher

LineChart

Link

List

Menu

Modal

PieChart

Popover

Pressable

Progress

Radio

Row

SearchInput

Select

Skeleton

Slider

Spinner

StackedBarChart

Switch

Table

Text

Textarea

Toast

Tooltip

Related