DOCS / UI REFERENCE

Styling

Styling is a Tailwind-style utility subset, resolved in JS by the tw() resolver — C++ only ever sees final style objects. Classes compose left to right; unknown classes warn once in dev instead of failing.

Supported classes

FAMILY	CLASSES
Flexbox	`flex-row` `flex-col` `flex-1` `flex-auto` `flex-none` `grow` `shrink-0` `flex-wrap` `items-` `justify-` `self-` `basis-`
Sizing & spacing	`w-* h-` `size-` (width + height together) `min-w-* max-h-` `p- px-* pt-` `m- mx-* mt-` `gap- gap-x-* gap-y-*` — 4px scale, fractions (`w-1/2`), `w-full`, arbitrary `w-[220]`, negatives `-mt-2 -left-1/2`
Position	`absolute` `relative` `inset-` `inset-x- inset-y-` `top- right-* bottom-* left-*`
Color	`bg-` `text-` `border-` — the full Tailwind palette* (all 22 families, 50–950), theme tokens, hex `bg-[#0B0B0A]`, opacity suffix `bg-black/40`
Borders & radius	`border` `border-2` `rounded` `rounded-sm…3xl/full`, per corner `rounded-t-lg` `rounded-br-full`, arbitrary `rounded-[10]`
Typography	`text-xs…text-6xl` `text-[15]` `font-normal/medium/semibold/bold` `font-mono` `text-left/center/right` `tracking-` `leading-`
Effects	`opacity-*` `shadow…shadow-xl` `overflow-hidden` `overflow-y-scroll` `aspect-square` `cursor-pointer/text/default`
Variants	`hover:` `active:` `focus:` — resolved to native hover/active/focus style layers, applied by the C++ hit-tester with no JS round-trip

Composing classes — cx()

For conditional classNames the SDK ships cx, a tiny clsx: strings, arrays, and object maps, falsy values dropped.

TSX

import { cx } from "@vsreact/core";

<View className={cx(
  "px-4 py-2 rounded-lg",
  active && "bg-lime-400",
  { "opacity-40": disabled },
)} />

Theme tokens

theme.ts

import { configureTheme } from "@vsreact/core";

configureTheme({
  colors: {
    surface: "#0F1210",
    raised:  "#161B17",
    accent:  "#C6F135",
    text:    "#ECF2E8",
    faint:   "#8B948C",
  },
});

// then: <View className="bg-surface border-raised hover:bg-raised">
//       <Text className="text-accent" />

The style prop

For computed values, pass style directly — the same keys the resolver produces (width, backgroundColor, fontSize, opacity…). Classes and style merge, with style winning.

TSX

<View
  className="rounded-full bg-zinc-800"
  style={{ width: size, height: size, opacity: fadeIn }}
/>

Arc painting (knobs)

Two style families exist only as style keys:

Arcs — arcTrackColor, arcColor, arcStart, arcEnd, arcValueStart, arcValueEnd, arcThickness: the natively painted knob arc, angles in degrees around the View’s center. The built-in Knob uses −135°…+135°; arcValueStart is what powers its bipolar mode.
Text input chrome — caretColor, placeholderColor.

a bare arc, no Knob component

<View
  className="items-center justify-center"
  style={{
    width: 72, height: 72,
    arcTrackColor: "#2A2F27", arcColor: "#C6F135",
    arcStart: -135, arcEnd: 135,
    arcValueEnd: -135 + 270 * value,
    arcThickness: 6,
  }}
/>

Performance: the resolver caches by class string, so repeated renders of the same className cost one map lookup. Hover/active/focus variants repaint natively — the JS side is not involved after mount.