Styling & Layout

Put every layout, typography, and color declaration in style, using camelCase keys. Lengths are logical pixels.

#Style modifiers

<View style={{ padding: 16, gap: 12, bg: "#18181b", color: "#fafafa" }} />

Boolean presets cover the same helpers as Go:

<View style={{ flexCol: true, p3: true, gap2: true, roundedLg: true }}>
  <Text style={{ textLg: true, fontSemibold: true }}>Panel title</Text>
</View>

roundedLg is an 8-pixel radius; p3 is 12 pixels. Custom values use borderRadius, padding, gridTemplateColumns, and width. A falsey preset (false, null, or undefined) turns that preset off.

#Merging styles

Style arrays merge left to right. Later fields override earlier ones. Falsy entries are ignored.

<View style={[base, selected() && selectedStyle, { padding: 20 }]} />

Removing a field from a reactive style object clears that property.

#Reusable styles

import type { JSX } from "@quickgui/solid";

const panel = { p3: true, roundedXl: true, bg: "#20242c" } satisfies JSX.Style;
<View style={panel}><Text>Reusable panel</Text></View>

Keep getters in JSX when the value should update.

#Flexbox

Use display, flexDirection, flexGrow, flexShrink, flexBasis, alignment, and gap. Set minWidth: 0 or minHeight: 0 on flexible scroll children so they can shrink.

#Grid

Use display: "grid" with track, placement, and span fields.

#Text and color

Font family, weight, size, wrapping, and selection apply to text. Colors accept hex, CSS color strings, or packed RGBA values.

#Interaction states

<Button style={{
  bg: "#2563eb",
  hover: { bg: "#1d4ed8" },
  active: { opacity: 0.8 },
  focusVisible: { outlineColor: "#93c5fd", outlineWidth: 2 },
}}>Save</Button>

#Groups and named group hover

Name a group on an ancestor and use groupHover or groupActive on descendants so they style together.