> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Nodes

React intrinsic nodes are the native building blocks rendered by `@napps/nodes`. Use them as JSX
elements inside a React component.

```tsx theme={null}
<column style={{ padding: 16, spacing: 12 }}>
  <text style={{ fontSize: 20, fontWeight: 700 }}>Featured</text>
  <row style={{ spacing: 8 }}>
    <box style={{ width: 80, height: 80, backgroundColor: "#dbeafe" }} />
    <text>Product details</text>
  </row>
</column>
```

## Supported nodes

| Node                                               | Use it for                                       | Status       |
| -------------------------------------------------- | ------------------------------------------------ | ------------ |
| [`box`](/js-ui/nodes/box)                          | Stacking and general-purpose containers          | Supported    |
| [`column`](/js-ui/nodes/column)                    | Vertical layout                                  | Supported    |
| [`row`](/js-ui/nodes/row)                          | Horizontal layout                                | Supported    |
| [`text`](/js-ui/nodes/text)                        | Text content                                     | Supported    |
| [`img`](/js-ui/nodes/img)                          | Images                                           | Supported    |
| [`video`](/js-ui/nodes/video)                      | Video playback                                   | Supported    |
| [`touchable`](/js-ui/nodes/touchable)              | Pressable content without built-in button chrome | Supported    |
| [`button`](/js-ui/nodes/button)                    | Native button presentation                       | Supported    |
| [`textInput`](/js-ui/nodes/text-input)             | Text entry                                       | Supported    |
| [`scrollable`](/js-ui/nodes/scrollable)            | Scrollable content                               | Supported    |
| [`pager`](/js-ui/nodes/pager)                      | Paging and snapping                              | Supported    |
| [`bottomSheet`](/js-ui/nodes/bottom-sheet)         | Bottom-sheet content                             | Experimental |
| [`gestureDetector`](/js-ui/nodes/gesture-detector) | Native gesture recognition                       | Experimental |

## Common properties

Every intrinsic node accepts these React properties:

| Property | Type               | Description                                                                                        |
| -------- | ------------------ | -------------------------------------------------------------------------------------------------- |
| `style`  | `StyleProperties`  | Layout, color, typography, shape, and transform values. See [React styling](/js-ui/react/styling). |
| `key`    | `string \| number` | React reconciliation key for dynamic children.                                                     |
| `class`  | `string`           | A registered style name. It applies only to the node where it is set.                              |

Only container and content nodes render `children`: `box`, `column`, `row`, `text`, `touchable`,
`scrollable`, `pager`, `bottomSheet`, and `gestureDetector`. The leaf nodes `img`, `video`,
`button`, and `textInput` do not render children. Use their documented properties, such as `src`,
`text`, or `value`, instead.

Node-specific properties are documented on each page. Properties not listed for a node are not part
of its typed JSX contract.

## Layout guidance

* Use `column` and `row` to express the primary layout direction.
* Use `box` when children should stack on top of one another.
* Use `padding` on `scrollable` and `pager` for content-edge spacing. Margins reduce the usable
  scroll area.
* For pressed or gesture-driven feedback, use `gestureDetector` with shared values and
  `animatedProps`. For a non-animated selected state, update the style directly from React state.
* Keep `gestureDetector` around the smallest subtree that needs gesture input.

## Node pages

Each page lists the complete typed property surface and includes a runnable example:

* [Box](/js-ui/nodes/box)
* [Column](/js-ui/nodes/column)
* [Row](/js-ui/nodes/row)
* [Text](/js-ui/nodes/text)
* [Image](/js-ui/nodes/img)
* [Video](/js-ui/nodes/video)
* [Touchable](/js-ui/nodes/touchable)
* [Button](/js-ui/nodes/button)
* [Text input](/js-ui/nodes/text-input)
* [Scrollable](/js-ui/nodes/scrollable)
* [Pager](/js-ui/nodes/pager)
* [Bottom sheet](/js-ui/nodes/bottom-sheet)
* [Gesture detector](/js-ui/nodes/gesture-detector)