Layout
VStack
Vertical
HStack
Horizontal
ZStack
Layered
ScrollView
Scroll
NavBar
Navigation
TabBar
Custom · FAB · Effects
Spacer
Flexible
Divider
Separator
Text
Text
Label / Body
Label
Icon + Text
Badge
Tag / Pill
Hero
Big title + sub
Headline
News-style title
Quote
Pull-quote
Stat
Big number / KPI
Pricing
Price + period
CTA
Call to action
Caption
Credit / footnote
Eyebrow
Small label + title
Banner
Big banner
Card Text
Compact card title
Minimal
Subtle text
Display
Image
URL / Upload / SF
Card
Custom Card
Controls
Button
Tap Action
Image Button
Icon + Label
TextField
Text Input
Toggle
On / Off
Theme Toggle
Dark / Light
Slider
Range
Stepper
Counter
Progress
Loading Bar
Picker
Selector
List
ForEach Rows
Shapes
Rectangle
Filled rect
RoundedRect
Rounded corners
Circle
Perfect circle
Ellipse
Oval shape
Capsule
Pill shape
Triangle
3-sided shape
Star
5-point star
Diamond
Rotated square
Charts
Bar Chart
Swift Charts
Line Chart
Swift Charts
Area Chart
Filled trend
Pie Chart
Swift Charts
Donut Chart
With center label
Activity Rings
Apple Watch style
Calendar
Calendar
Full month grid
Day Card
Single big day
Week Card
7-day strip
Month Card
Compact month
Year Card
All 12 months
Today
Date as text
Time
Clock face
Graphics
Drag components into the device screen
Ctrl+Z undo · Ctrl+C/V copy/paste · Del remove · Ctrl+D duplicate · G snap · Right-click for menu
Ctrl+Z undo · Ctrl+C/V copy/paste · Del remove · Ctrl+D duplicate · G snap · Right-click for menu
Props
Canvas
Code
Layers
Click any element on the canvas
to inspect and edit its properties.
to inspect and edit its properties.