Elements

Uzumaki elements are built-in widgets, not HTML tags. Use them with jsxImportSource: "uzumaki-react".

Element	Use it for
<view>	Layout, grouping, backgrounds, borders, scrolling.
<text>	Inline styled text. Plain strings work inside any element.
<button>	Pressable content.
<input>	Text input.
<checkbox>	Boolean input.
<image>	Raster or SVG images from local, bundled, or remote sources.

<view>

<view> is the main layout primitive.

<view display="flex" flexDir="col" gap={16} p={20}>
  <text fontSize={20} fontWeight={800}>
    Title
  </text>
  <text color="#a1a1aa">Body</text>
</view>

Use it for shells, cards, rows, columns, scroll containers, and absolute-positioned surfaces.

<view scrollY h={280} scrollbarWidth={6} scrollbarRadius={999}>
  {items}
</view>

Set selectable when text inside the view should be selectable.

<text>

<text> is the one inline element — every other Uzumaki element is block-level. Use it when you want part of a line to flow inline alongside other text or elements.

<view p={12}>
  Welcome back,{' '}
  <text fontWeight={700} color="#f59e0b">
    Ada
  </text>
  .
</view>

You do not need <text> just to render text. A bare string inside any element renders as text, and typography props (fontSize, fontWeight, color, textAlign, textWrap) work on any element — not just <text>:

<view fontSize={18} fontWeight={700} color="#f4f4f5">
  A whole styled paragraph in a view.
</view>

Reach for <text> only when you need an inline run inside a larger block — for example, bolding a single word in a sentence.

<button>

<button> is a pressable container. Put <text> or other elements inside it.

<button
  onClick={save}
  px={16}
  py={10}
  rounded={10}
  bg="#27272a"
  hover:bg="#3f3f46"
  active:scale={0.98}
  cursor="pointer"
>
  <text fontWeight={700}>Save</text>
</button>

Buttons support pointer, keyboard, focus, and blur handlers.

<input>

<input
  value={name}
  onValueChange={setName}
  placeholder="Name"
  w={280}
  px={12}
  py={10}
  rounded={10}
/>

Input-specific props:

Prop	Description
value	Controlled string value.
onValueChange	Receives the latest string value.
onInput	Receives an input event with inputType and data.
placeholder	Placeholder text.
disabled	Disable editing.
maxLength	Maximum text length.
multiline	Allow multiple lines.
secure	Hide entered text for password-like fields.

<checkbox>

<checkbox checked={enabled} onValueChange={setEnabled} />

Checkbox-specific props:

Prop	Description
checked	Controlled boolean value.
onValueChange	Receives the latest boolean value.
onInput	Receives the input event.

<image>

<image src={Uz.path.resource('assets/logo.svg')} w={96} h={96} />
<image src="https://example.com/hero.png" w={420} h={240} rounded={12} />

src accepts bundled paths, absolute paths, file:// URLs, and https:// URLs. Raster images and SVG are supported.

<image
  src={src}
  onLoadStart={() => setStatus('loading')}
  onLoad={() => setStatus('loaded')}
  onError={(event) => setError(event.message)}
/>

Refs

Refs point to the underlying Uzumaki element instance:

const inputRef = useRef<UzInputElement>(null);

<input ref={inputRef} />;
<button onClick={() => inputRef.current?.focus()}>
  <text>Focus input</text>
</button>;

Use element refs when you need imperative APIs such as focus().