> ## 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.

# Row

`row` lays out children horizontally. Use it for inline content, action groups, and cards in a
horizontal strip.

## Properties

| Property   | Accepted value     | Description                               |
| ---------- | ------------------ | ----------------------------------------- |
| `style`    | `StyleProperties`  | Layout, appearance, and transform values. |
| `children` | `ReactNode`        | Child nodes rendered horizontally.        |
| `key`      | `string \| number` | React key for dynamic children.           |
| `class`    | `string`           | Registered style name for this node only. |

`row` has no node-specific properties.

On a row, `horizontalAlignment` positions the child group along the row's width and
`verticalAlignment` aligns each child across its height. `spacing` adds horizontal gaps. See [How
layout alignment works](/js-ui/react/styling#how-layout-alignment-works).

## Example

```tsx theme={null}
<row style={{ padding: 12, spacing: 8, horizontalAlignment: "center" }}>
  <img
    src="https://cdn.example.com/avatar.png"
    alt="Profile"
    style={{ width: 40, height: 40, borderRadius: 20 }}
  />
  <column style={{ weight: 1 }}>
    <text style={{ fontWeight: 700 }}>Alex Morgan</text>
    <text style={{ color: "#667085" }}>Member</text>
  </column>
  <button text="View" variant="secondary" />
</row>
```