Styling

Applicators are functions that apply visual effects, styling, and behavior to components. They are chained using dot notation after a component declaration.

Text("Hello World")
    .color("#FF0000")
    .fontSize(20)
    .fontWeight("bold")

Spacing

padding

Adds internal spacing between a component's content and its border.

// Uniform padding on all sides
Box { }.padding(16)

// Named arguments for specific sides
Box { }.padding(top: 16, right: 12, bottom: 16, left: 12)

// Horizontal and vertical
Box { }.padding(horizontal: 16, vertical: 8)

Platform Support: Web, Android, iOS

margin

Adds external spacing outside the component's border.

// Uniform margin
Box { }.margin(16)

// Named arguments
Box { }.margin(top: 8, bottom: 8)

Platform Support: Web, Android, iOS

gap

Sets the spacing between child elements in a layout container.

Column {
    Text("Item 1")
    Text("Item 2")
}
.gap(12)

Platform Support: Web, Android, iOS

Size

width / height

Sets explicit dimensions.

Box { }
    .width(200)
    .height(100)

Accepts numbers (pixels) or strings with units:

Box { }
    .width("50%")
    .height("100vh")

Platform Support: Web, Android, iOS

minWidth / maxWidth / minHeight / maxHeight

Sets size constraints.

Box { }
    .minWidth(100)
    .maxWidth(500)
    .minHeight(50)
    .maxHeight(300)

Platform Support: Web, Android, iOS

size

Sets both width and height to the same value.

Avatar("user.jpg").size(48)

Platform Support: Web, Android, iOS

fillMaxWidth / fillMaxHeight / fillMaxSize

Expands to fill available space.

// Fill width
Box { }.fillMaxWidth(true)

// Fill with fraction (0.5 = 50%)
Box { }.fillMaxWidth(0.5)

// Fill both dimensions
Box { }.fillMaxSize(true)

Platform Support: Web, Android, iOS

Colors

color

Sets text/foreground color.

Text("Red text").color("#FF0000")
Text("Blue text").color("blue")
Text("RGB").color("rgb(100, 150, 200)")

Platform Support: Web, Android, iOS

backgroundColor

Sets background color.

Box { }
    .backgroundColor("#3B82F6")

Platform Support: Web, Android, iOS

opacity

Sets transparency (0 = fully transparent, 1 = fully opaque).

Box { }.opacity(0.5)

Platform Support: Web, Android, iOS

Typography

fontSize

Sets text size.

Text("Small").fontSize(12)
Text("Normal").fontSize(16)
Text("Large").fontSize(24)

Platform Support: Web, Android, iOS

fontWeight

Sets text weight/boldness.

Text("Normal").fontWeight("normal")
Text("Medium").fontWeight("500")
Text("Bold").fontWeight("bold")

Values: 100-900, thin, light, normal, medium, semibold, bold, extrabold, black

Platform Support: Web, Android, iOS

fontFamily

Sets the font family.

Text("Custom font")
    .fontFamily("Inter, system-ui, sans-serif")

Platform Support: Web, Android, iOS

textAlign

Aligns text within its container.

Text("Left").textAlign("left")
Text("Center").textAlign("center")
Text("Right").textAlign("right")

Platform Support: Web, Android, iOS

lineHeight

Sets the height of each line of text.

Paragraph("Long text...")
    .lineHeight(1.6)

Platform Support: Web, Android, iOS

Borders

borderRadius

Rounds the corners.

// Uniform radius
Box { }.borderRadius(8)

// Circular (with equal width/height)
Avatar("user.jpg").size(48).borderRadius(24)

Platform Support: Web, Android, iOS

borderWidth

Sets the border thickness.

Box { }.borderWidth(1)

Platform Support: Web, Android, iOS

borderColor

Sets the border color.

Box { }
    .borderWidth(1)
    .borderColor("#E5E7EB")

Platform Support: Web, Android, iOS

Effects

shadow

Adds a shadow effect.

Card { }
    .shadow(blur: 8, spread: 2, color: "rgba(0,0,0,0.1)")

Platform Support: Web, Android (elevation), iOS

elevation

Sets the elevation level (Android-style shadow).

Card { }.elevation(4)

Platform Support: Web, Android, iOS

Layout

horizontalAlignment

Aligns children horizontally within a container.

Column { }
    .horizontalAlignment("center")

Values: start, center, end, space-between, space-around

verticalAlignment

Aligns children vertically within a container.

Row { }
    .verticalAlignment("center")

Values: start, center, end, space-between, space-around

weight

Sets the flex grow factor for flexible layouts.

Row {
    Box { }.weight(1)
    Box { }.weight(2)
}

Platform Support: Web, Android, iOS

Quick Reference

Next Steps

• Inputs - Forms and user interaction
• Layout - Arranging components
• State & Modules - State management