Style Your UI

Uzumaki has no CSS. Layout, color, typography, variants, and scrolling are all props on elements like <view>, <text>, and <button>.

Create a Layout Shell

<view
  display="flex"
  flexDir="col"
  w="full"
  h="full"
  bg="#0b0b0f"
  color="#f8fafc"
>
  <view p={20} borderBottom={1} borderColor="#27272a">
    <text fontSize={20} fontWeight={800}>
      Settings
    </text>
  </view>
  <view flex={1} p={20}>
    {children}
  </view>
</view>

Use w="full" and h="full" for full-window surfaces. Use flex={1} for panels that should fill remaining space.

Use Flex Props

<view display="flex" flexDir="row" items="center" justify="between" gap={12}>
  <text>Notifications</text>
  <checkbox checked={enabled} onValueChange={setEnabled} />
</view>

The most common flex props are display, flexDir, items, justify, gap, flex, flexGrow, and flexShrink.

Add Visual States

Prefix style props with hover:, active:, or focus::

<button
  px={14}
  py={9}
  rounded={10}
  bg="#18181b"
  hover:bg="#27272a"
  active:scale={0.98}
  focus:outline={2}
  focus:outlineColor="#f59e0b"
>
  <text>Open</text>
</button>

State variants work best for visual props such as color, opacity, border, outline, and transforms.

Build a Card

<view
  p={18}
  rounded={18}
  bg="#111113"
  border={1}
  borderColor="#27272a"
  display="flex"
  flexDir="col"
  gap={8}
>
  <text fontSize={13} color="#a1a1aa">
    Status
  </text>
  <text fontSize={22} fontWeight={800}>
    Window ready
  </text>
  <text color="#d4d4d8" textWrap="wrap">
    This card is styled entirely with Uzumaki props.
  </text>
</view>

Make Content Scroll

<view
  h={320}
  scrollY
  scrollbarWidth={6}
  scrollbarRadius={999}
  scrollbarColor="#3f3f46"
  scrollbarHoverColor="#71717a"
>
  {rows}
</view>

Use scroll for both axes, or scrollX and scrollY for one direction.

Use rem

"1rem" resolves from the window’s remBase, so changing one number rescales the whole app.

window.remBase = 16;

<text fontSize="1.25rem">Readable text</text>