React Layout Primitives

Flexible and type-safe React layout components inspired by Jetpack Compose's Row and Column.

Features

- Type-safe - Full TypeScript support with exported constants for arrangement and alignment
- React 19+ - Uses modern ref-as-prop pattern
- Lightweight - Zero dependencies, minimal bundle size
- Motion compatible - Works seamlessly with Motion for animations

Requirements

- React 19.0.0 or later
- Node.js 22.0.0 or later
- TypeScript 5.7 or later (recommended)

Installation

``bash
npm install @a4banana/react-layout-primitives
`

Usage

$3

`tsx
import {
Row,
Column,
HorizontalArrangement,
VerticalArrangement,
HorizontalAlignment,
VerticalAlignment,
} from '@a4banana/react-layout-primitives';

function App() {
return (
gap={20}
arrangement={VerticalArrangement.Center}
alignment={HorizontalAlignment.Center}
>


Title


gap={10}
arrangement={HorizontalArrangement.SpaceBetween}
alignment={VerticalAlignment.Center}
>
Left
Right


);
}
`

$3

You can easily add animations using Motion:

`bash
npm install motion
`

`tsx
import { motion } from 'motion/react';
import { Row, Column, HorizontalArrangement } from '@a4banana/react-layout-primitives';

// Create motion-enabled components
const MotionRow = motion.create(Row);
const MotionColumn = motion.create(Column);

function AnimatedLayout() {
return (
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
gap={16}
arrangement={HorizontalArrangement.SpaceBetween}
>
initial={{ scale: 0.9 }}
animate={{ scale: 1 }}
gap={8}
>
Item 1
Item 2


);
}
`

API

$3

Arranges children horizontally (flex-direction: row).

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| arrangement | HorizontalArrangement | 'start' | Main axis distribution |
| alignment | VerticalAlignment | 'stretch' | Cross axis alignment |
| gap | number | 0 | Gap between children (px) |
| as | ElementType | 'div' | Element to render as |
| ref | Ref | - | Ref to DOM element |

$3

Arranges children vertically (flex-direction: column).

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| arrangement | VerticalArrangement | 'top' | Main axis distribution |
| alignment | HorizontalAlignment | 'stretch' | Cross axis alignment |
| gap | number | 0 | Gap between children (px) |
| as | ElementType | 'div' | Element to render as |
| ref | Ref | - | Ref to DOM element |

$3

`tsx
// Row arrangement (horizontal)
HorizontalArrangement.Start // 'start'
HorizontalArrangement.End // 'end'
HorizontalArrangement.Center // 'center'
HorizontalArrangement.SpaceBetween // 'space-between'
HorizontalArrangement.SpaceAround // 'space-around'
HorizontalArrangement.SpaceEvenly // 'space-evenly'

// Column arrangement (vertical)
VerticalArrangement.Top // 'top'
VerticalArrangement.Bottom // 'bottom'
VerticalArrangement.Center // 'center'
VerticalArrangement.SpaceBetween // 'space-between'
VerticalArrangement.SpaceAround // 'space-around'
VerticalArrangement.SpaceEvenly // 'space-evenly'

// Row alignment (vertical)
VerticalAlignment.Top // 'top'
VerticalAlignment.Center // 'center'
VerticalAlignment.Bottom // 'bottom'
VerticalAlignment.Stretch // 'stretch'

// Column alignment (horizontal)
HorizontalAlignment.Start // 'start'
HorizontalAlignment.Center // 'center'
HorizontalAlignment.End // 'end'
HorizontalAlignment.Stretch // 'stretch'
``

License

MIT