Row
Row arranges children horizontally in a single row, mirroring Flutter's Row widget. It provides precise control over horizontal alignment, spacing, RTL support, and layout behavior using a declarative API built on CSS Flexbox.
import { Row } from '@dynshift/layr';
<Row spacing={16}>
<span>First</span>
<span>Second</span>
<span>Third</span>
</Row>
NOTE: Previews are not depiction of actual website output.
1a. Simple Horizontal Layout
<Row>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</Row>
NOTE: Previews are not depiction of actual website output.
<Row spacing={24}>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</Row>
NOTE: Previews are not depiction of actual website output.
The mainAxisAlignment prop controls how children are distributed along the horizontal axis.
Children are placed at the start (left for LTR, right for RTL):
<Row mainAxisAlignment={MainAxisAlignment.start}>
<span>Left</span>
<span>Aligned</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Children are centered horizontally:
<Row mainAxisAlignment={MainAxisAlignment.center}>
<span>Centered</span>
<span>Content</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Children are placed at the end (right for LTR, left for RTL):
<Row mainAxisAlignment={MainAxisAlignment.end}>
<span>Bottom</span>
<span>Content</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Remaining space is distributed evenly between children:
<Row mainAxisAlignment={MainAxisAlignment.spaceBetween}>
<span>Header</span>
<span>Content</span>
<span>Footer</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Space is distributed evenly around each child:
<Row mainAxisAlignment={MainAxisAlignment.spaceAround}>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Space is distributed evenly, including edges:
<Row mainAxisAlignment={MainAxisAlignment.spaceEvenly}>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</Row>
NOTE: Previews are not depiction of actual website output.
• MainAxisAlignment.start — Left (LTR) / Right (RTL)
• MainAxisAlignment.center — Horizontal center
• MainAxisAlignment.end — Right (LTR) / Left (RTL)
• MainAxisAlignment.spaceBetween — Space between children
• MainAxisAlignment.spaceAround — Space around children
• MainAxisAlignment.spaceEvenly — Even spacing including edges
The crossAxisAlignment prop controls how children are aligned vertically.
Children are centered vertically:
<Row crossAxisAlignment={CrossAxisAlignment.center}>
<span>Short</span>
<span style={{ fontSize: '2rem' }}>Tall</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Children are aligned to the top edge:
<Row crossAxisAlignment={CrossAxisAlignment.start}>
<span>Top</span>
<span style={{ fontSize: '2rem' }}>Aligned</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Children are aligned to the bottom edge:
<Row crossAxisAlignment={CrossAxisAlignment.end}>
<span>Bottom</span>
<span style={{ fontSize: '2rem' }}>Aligned</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Children are stretched to fill the full height:
<Row crossAxisAlignment={CrossAxisAlignment.stretch} style={{ height: '100px' }}>
<Container color="#eb1660">Full Height</Container>
<Container color="#3b82f6">Full Height</Container>
</Row>
NOTE: Previews are not depiction of actual website output.
Children are aligned by their text baseline:
<Row crossAxisAlignment={CrossAxisAlignment.baseline}>
<span style={{ fontSize: '2rem' }}>Big</span>
<span style={{ fontSize: '1rem' }}>Small</span>
</Row>
NOTE: Previews are not depiction of actual website output.
• CrossAxisAlignment.center — Vertical center (default)
• CrossAxisAlignment.start — Top alignment
• CrossAxisAlignment.end — Bottom alignment
• CrossAxisAlignment.stretch — Fill full height
• CrossAxisAlignment.baseline — Baseline alignment
The mainAxisSize prop controls how much horizontal space the row occupies.
Row takes up all available width:
<Row mainAxisSize={MainAxisSize.max}>
<span>Item 1</span>
<span>Item 2</span>
</Row>
NOTE: Previews are not depiction of actual website output.
This sets width: 100% on the row.
Row wraps to fit its children's width:
<Row mainAxisSize={MainAxisSize.min}>
<span>Item 1</span>
<span>Item 2</span>
</Row>
NOTE: Previews are not depiction of actual website output.
This sets width: auto on the row.
• MainAxisSize.max — Full-width navbars and headers
• MainAxisSize.min — Inline buttons, badges, chips
5. Text Direction (RTL Support)
Control whether children are laid out left-to-right or right-to-left.
Normal left-to-right order:
<Row textDirection={TextDirection.ltr}>
<span>1 - Left</span>
<span>2 - Middle</span>
<span>3 - Right</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Right-to-left order for Arabic, Hebrew, etc.:
<Row textDirection={TextDirection.rtl}>
<span>1 - Left</span>
<span>2 - Middle</span>
<span>3 - Right</span>
</Row>
NOTE: Previews are not depiction of actual website output.
This applies flex-direction: row-reverse.
Add consistent gaps between children using the spacing prop.
<Row spacing={16}>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
</Row>
NOTE: Previews are not depiction of actual website output.
This uses CSS gap for clean implementation.
<Row>
<span>No gap</span>
<span>No gap</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Note: spacing only affects gaps between children, not margins around the row itself.
Control how overflowing content is handled.
Content can overflow the row boundaries:
<Row clipBehavior="visible">
<div style={{ width: '500px' }}>Wide content</div>
</Row>
NOTE: Previews are not depiction of actual website output.
Clip overflowing content:
<Row clipBehavior="hidden" style={{ maxWidth: '300px' }}>
<span>Very long content that will be clipped</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Enable scrolling for overflowing content:
<Row clipBehavior="scroll" style={{ maxWidth: '400px' }}>
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
{}
</Row>
NOTE: Previews are not depiction of actual website output.
Important: Row does not scroll by default. If children overflow, consider using clipBehavior="scroll" or a scrollable container.
<Row
spacing={24}
style={{
padding: '16px 24px',
backgroundColor: '#333',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
}}
>
<a href="/">Home</a>
<a href="/">About</a>
<a href="/">Contact</a>
</Row>
NOTE: Previews are not depiction of actual website output.
<Row
spacing={8}
crossAxisAlignment={CrossAxisAlignment.center}
mainAxisSize={MainAxisSize.min}
style={{
padding: '12px 24px',
backgroundColor: '#eb1660',
borderRadius: '8px',
cursor: 'pointer'
}}
>
<span>✨</span>
<span style={{ color: 'white', fontWeight: 600 }}>
Premium
</span>
</Row>
NOTE: Previews are not depiction of actual website output.
<Row
spacing={12}
crossAxisAlignment={CrossAxisAlignment.center}
>
<label style={{ minWidth: '100px', fontWeight: 500 }}>
Email:
</label>
<input
type="email"
placeholder="you@example.com"
style={{ flex: 1, padding: '8px 12px' }}
/>
</Row>
NOTE: Previews are not depiction of actual website output.
<Row spacing={8} mainAxisSize={MainAxisSize.min}>
<Container paddingHorizontal={12} paddingVertical={4} decoration={{ color: 'rgba(235, 22, 96, 0.1)', borderRadius: 99 }}>
<span style={{ color: '#eb1660', fontSize: '0.875rem' }}>New</span>
</Container>
<Container paddingHorizontal={12} paddingVertical={4} decoration={{ color: 'rgba(59, 130, 246, 0.1)', borderRadius: 99 }}>
<span style={{ color: '#3b82f6', fontSize: '0.875rem' }}>Featured</span>
</Container>
</Row>
NOTE: Previews are not depiction of actual website output.
<Row
spacing={16}
mainAxisAlignment={MainAxisAlignment.center}
>
<a href="https://x.com">𝕏</a>
<a href="https://facebook.com">ⓕ</a>
<a href="https://instagram.com/nishanbhuinya/">ⓘ</a>
</Row>
NOTE: Previews are not depiction of actual website output.
<Row
mainAxisAlignment={MainAxisAlignment.spaceBetween}
crossAxisAlignment={CrossAxisAlignment.center}
>
<Column>
<h3 style={{ margin: 0 }}>Card Title</h3>
<span style={{ color: '#6b7280', fontSize: '0.875rem' }}>
Subtitle
</span>
</Column>
<button>Action</button>
</Row>
NOTE: Previews are not depiction of actual website output.
<Row
spacing={8}
crossAxisAlignment={CrossAxisAlignment.center}
style={{
padding: '8px',
backgroundColor: '#333',
borderRadius: '8px'
}}
>
<button title="Bold"><b>B</b></button>
<button title="Italic"><i>I</i></button>
<button title="Underline"><u>U</u></button>
<div style={{ width: '1px', height: '24px', backgroundColor: '#d1d5db' }} />
<button title="Link">🔗</button>
<button title="Image">🖼️</button>
</Row>
NOTE: Previews are not depiction of actual website output.
<Row
spacing={12}
crossAxisAlignment={CrossAxisAlignment.center}
>
<Container
width={48}
height={48}
decoration={{
image: { image: '/avatar.jpg', fit: 'cover' },
shape: BoxShape.circle,
}}
/>
<Column crossAxisAlignment={CrossAxisAlignment.start}>
<span style={{ fontWeight: 600 }}>John Doe</span>
<span style={{ color: '#6b7280', fontSize: '0.875rem' }}>
john@example.com
</span>
</Column>
</Row>
NOTE: Previews are not depiction of actual website output.
<Row spacing={16}>
{[
{ label: 'Users', value: '1,234', color: '#eb1660' },
{ label: 'Revenue', value: '$12.3K', color: '#3b82f6' },
{ label: 'Orders', value: '567', color: '#10b981' },
].map((stat) => (
<Container
key={stat.label}
padding={24}
decoration={{
color: '#ffffff',
borderRadius: 12,
boxShadow: [{
color: 'rgba(0, 0, 0, 0.1)',
offset: { dx: 0, dy: 2 },
blurRadius: 8,
}],
}}
style={{ flex: 1 }}
>
<Column crossAxisAlignment={CrossAxisAlignment.start} spacing={8}>
<span style={{ color: '#6b7280', fontSize: '0.875rem' }}>
{stat.label}
</span>
<span style={{ color: stat.color, fontSize: '1.5rem', fontWeight: 700 }}>
{stat.value}
</span>
</Column>
</Container>
))}
</Row>
NOTE: Previews are not depiction of actual website output.
<Row spacing={8} crossAxisAlignment={CrossAxisAlignment.center}>
<a href="/">Home</a>
<span style={{ color: '#9ca3af' }}>/</span>
<a href="/products">Products</a>
<span style={{ color: '#9ca3af' }}>/</span>
<span style={{ fontWeight: 600 }}>Item</span>
</Row>
NOTE: Previews are not depiction of actual website output.
Row follows Flutter's layout specification:
• Layout non-flex children with unbounded horizontal constraints
• Divide remaining horizontal space among flex children (Expanded)
• Height = maximum height of children
• Width = determined by mainAxisSize (max = fill parent, min = wrap content)
• Position children according to mainAxisAlignment and crossAxisAlignment
<Row className="bg-gray-100 rounded-lg p-4">
<span>Styled with Tailwind</span>
</Row>
<Row
style={{
backgroundColor: '#f3f4f6',
borderRadius: '8px',
padding: '16px'
}}
>
<span>Custom styles</span>
</Row>
Row is fully typed with comprehensive IntelliSense support:
import type { RowProps } from '@dynshift/layr';
import { Row, MainAxisAlignment, CrossAxisAlignment } from '@dynshift/layr';
const HorizontalList: React.FC<RowProps> = (props) => {
return (
<Row
mainAxisAlignment={MainAxisAlignment.start}
crossAxisAlignment={CrossAxisAlignment.center}
spacing={12}
{...props}
/>
);
};
| Prop | Type | Default | Description |
|---|
| children | ReactNode | — | Content to render horizontally |
| mainAxisAlignment | MainAxisAlignment | start | Horizontal distribution of children |
| crossAxisAlignment | CrossAxisAlignment | center | Vertical alignment of children |
| mainAxisSize | MainAxisSize | max | How much horizontal space to occupy |
| textDirection | TextDirection | ltr | Layout direction (LTR or RTL) |
| spacing | number | 0 | Gap between children in pixels |
| clipBehavior | 'visible' 'hidden' 'scroll' | 'visible' | How to handle overflow |
| className | string | '' | Additional CSS classes |
| style | CSSProperties | {} | Custom inline styles |
| id | string | — | HTML id attribute |
| onTap | () => void | — | Click handler (Flutter-style) |
| onClick | () => void | — | Click handler |
12b. MainAxisAlignment Enum
| Value | CSS Equivalent | Description |
|---|
| start | flex-start | Left (LTR) / Right (RTL) |
| center | center | Horizontal center |
| end | flex-end | Right (LTR) / Left (RTL) |
| spaceBetween | space-between | Space between children |
| spaceAround | space-around | Space around children |
| spaceEvenly | space-evenly | Even spacing |
12c. CrossAxisAlignment Enum
| Value | CSS Equivalent | Description |
|---|
| start | flex-start | Top alignment |
| center | center | Vertical center |
| end | flex-end | Bottom alignment |
| stretch | stretch | Fill full height |
| baseline | baseline | Text baseline alignment |
| Value | Behavior | Description |
|---|
| max | width: 100% | Fill available width |
| min | width: auto | Wrap to content width |
| Value | CSS Equivalent | Description |
|---|
| ltr | row | Left-to-right (normal) |
| rtl | row-reverse | Right-to-left (reversed) |
• Stack — Layered positioning
• Positioned — Positioned children
• SizedBox — Fixed-size widget