Getting Started

Introduction

Installation

Migration from Flutter

Layout Primitives

Note

Column

Column arranges children vertically in a single column, mirroring Flutter's Column widget. It provides precise control over vertical alignment, spacing, and layout behavior using a declarative API built on CSS Flexbox.

Tsx

import { Column } from '@dynshift/layr';

Tsx

<Column spacing={16}>
  <span>First Item</span>
  <span>Second Item</span>
  <span>Third Item</span>
</Column>

<Column spacing={16}>
  <span>First Item</span>
  <span>Second Item</span>
  <span>Third Item</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

1. Basic Usage

1a. Simple Vertical Layout

Tsx

<Column>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</Column>

<Column>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

1b. With Spacing

Tsx

<Column spacing={24}>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</Column>

<Column spacing={24}>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

2. Main Axis Alignment

The mainAxisAlignment prop controls how children are distributed along the vertical axis.

2a. Start (Default)

Children are placed at the top of the column:

Tsx

<Column mainAxisAlignment={MainAxisAlignment.start}>
  <span>Top</span>
  <span>Item</span>
</Column>

<Column mainAxisAlignment={MainAxisAlignment.start}>
  <span>Top</span>
  <span>Item</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

2b. Center

Children are centered vertically:

Tsx

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.center}>
    <span>Centered</span>
    <span>Content</span>
  </Column>
</Container>

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.center}>
    <span>Centered</span>
    <span>Content</span>
  </Column>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

Notice that you will need to define Column's boundaries. In this example, we used Container.

2c. End

Children are placed at the bottom:

Tsx

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.end}>
    <span>Bottom</span>
    <span>Content</span>
  </Column>
</Container>

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.end}>
    <span>Bottom</span>
    <span>Content</span>
  </Column>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

Notice that you will need to define Column's boundaries. In this example, we used Container.

2d. Space Between

Remaining space is distributed evenly between children:

Tsx

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.spaceBetween}>
    <span>Header</span>
    <span>Content</span>
    <span>Footer</span>
  </Column>
</Container>

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.spaceBetween}>
    <span>Header</span>
    <span>Content</span>
    <span>Footer</span>
  </Column>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

2e. Space Around

Space is distributed evenly around each child:

Tsx

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.spaceAround}>
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </Column>
</Container>

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.spaceAround}>
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </Column>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

2f. Space Evenly

Space is distributed evenly, including edges:

Tsx

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.spaceEvenly}>
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </Column>
</Container>

<Container height={'30vh'}>
  <Column mainAxisAlignment={MainAxisAlignment.spaceEvenly}>
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </Column>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

Available values:

• MainAxisAlignment.start — Top alignment (default)
• MainAxisAlignment.center — Vertical center
• MainAxisAlignment.end — Bottom alignment
• MainAxisAlignment.spaceBetween — Space between children
• MainAxisAlignment.spaceAround — Space around children
• MainAxisAlignment.spaceEvenly — Even spacing including edges

3. Cross Axis Alignment

The crossAxisAlignment prop controls how children are aligned horizontally.

3a. Center (Default)

Children are centered horizontally:

Tsx

<Column crossAxisAlignment={CrossAxisAlignment.center}>
  <span>Short</span>
  <span>Longer Text</span>
</Column>

<Column crossAxisAlignment={CrossAxisAlignment.center}>
  <span>Short</span>
  <span>Longer Text</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

3b. Start (Left)

Children are aligned to the left edge:

Tsx

<Column crossAxisAlignment={CrossAxisAlignment.start}>
  <span>Left</span>
  <span>Aligned</span>
</Column>

<Column crossAxisAlignment={CrossAxisAlignment.start}>
  <span>Left</span>
  <span>Aligned</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

3c. End (Right)

Children are aligned to the right edge:

Tsx

<Column crossAxisAlignment={CrossAxisAlignment.end}>
  <span>Right</span>
  <span>Aligned</span>
</Column>

<Column crossAxisAlignment={CrossAxisAlignment.end}>
  <span>Right</span>
  <span>Aligned</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

3d. Stretch

Children are stretched to fill the full width:

Tsx

<Column crossAxisAlignment={CrossAxisAlignment.stretch}>
  <Container color="#eb1660">Full Width</Container>
  <Container color="#3b82f6">Full Width</Container>
</Column>

<Column crossAxisAlignment={CrossAxisAlignment.stretch}>
  <Container color="#eb1660">Full Width</Container>
  <Container color="#3b82f6">Full Width</Container>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

3e. Baseline

Children are aligned by their text baseline:

Tsx

<Column crossAxisAlignment={CrossAxisAlignment.baseline}>
  <span style={{ fontSize: '2rem' }}>Big</span>
  <span style={{ fontSize: '1rem' }}>Small</span>
</Column>

<Column crossAxisAlignment={CrossAxisAlignment.baseline}>
  <span style={{ fontSize: '2rem' }}>Big</span>
  <span style={{ fontSize: '1rem' }}>Small</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

Available values:

• CrossAxisAlignment.center — Horizontal center (default)
• CrossAxisAlignment.start — Left alignment
• CrossAxisAlignment.end — Right alignment
• CrossAxisAlignment.stretch — Fill full width
• CrossAxisAlignment.baseline — Baseline alignment

4. Main Axis Size

The mainAxisSize prop controls how much vertical space the column occupies.

4a. Max (Default)

Column takes up all available height:

Tsx

<Column mainAxisSize={MainAxisSize.max}>
  <span>Item 1</span>
  <span>Item 2</span>
</Column>

<Column mainAxisSize={MainAxisSize.max}>
  <span>Item 1</span>
  <span>Item 2</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

This sets height: 100% on the column.

4b. Min

Column wraps to fit its children's height:

Tsx

<Column mainAxisSize={MainAxisSize.min}>
  <span>Item 1</span>
  <span>Item 2</span>
</Column>

<Column mainAxisSize={MainAxisSize.min}>
  <span>Item 1</span>
  <span>Item 2</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

This sets height: auto on the column.

Use cases:

• MainAxisSize.max — Full-height sidebars and layouts
• MainAxisSize.min — Cards, modals, inline content

5. Vertical Direction

Control whether children are laid out top-to-bottom or bottom-to-top.

5a. Down (Default)

Normal top-to-bottom order:

Tsx

<Column verticalDirection={VerticalDirection.down}>
  <span>1 - Top</span>
  <span>2 - Middle</span>
  <span>3 - Bottom</span>
</Column>

<Column verticalDirection={VerticalDirection.down}>
  <span>1 - Top</span>
  <span>2 - Middle</span>
  <span>3 - Bottom</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

5b. Up (Reversed)

Bottom-to-top order:

Tsx

<Column verticalDirection={VerticalDirection.up}>
  <span>1 - Bottom</span>
  <span>2 - Middle</span>
  <span>3 - Top</span>
</Column>

<Column verticalDirection={VerticalDirection.up}>
  <span>1 - Bottom</span>
  <span>2 - Middle</span>
  <span>3 - Top</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

This applies flex-direction: column-reverse.

6. Spacing

Add consistent gaps between children using the spacing prop.

6a. Fixed Spacing

Tsx

<Column spacing={16}>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</Column>

<Column spacing={16}>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

This uses CSS gap for clean implementation.

6b. No Spacing (Default)

Tsx

<Column>
  <span>No gap</span>
  <span>No gap</span>
</Column>

<Column>
  <span>No gap</span>
  <span>No gap</span>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

Note: spacing only affects gaps between children, not margins around the column itself.

7. Clip Behavior

Control how overflowing content is handled.

7a. Visible (Default)

Content can overflow the column boundaries:

Tsx

<Column clipBehavior="visible">
  <div style={{ height: '200px' }}>Tall content</div>
</Column>

<Column clipBehavior="visible">
  <div style={{ height: '200px' }}>Tall content</div>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

7b. Hidden

Clip overflowing content:

Tsx

<Column clipBehavior="hidden">
  <div style={{ height: '500px' }}>Clipped content</div>
</Column>

<Column clipBehavior="hidden">
  <div style={{ height: '500px' }}>Clipped content</div>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

7c. Scroll

Enable scrolling for overflowing content:

Tsx

<Column clipBehavior="scroll" style={{ maxHeight: '300px' }}>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  {/* ... many more items ... */}
</Column>

<Column clipBehavior="scroll" style={{ maxHeight: '300px' }}>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
  {/* ... many more items ... */}
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

8. Complete Examples

Tsx

<Column 
  mainAxisAlignment={MainAxisAlignment.start}
  crossAxisAlignment={CrossAxisAlignment.stretch}
  spacing={8}
  style={{ padding: '16px' }}
>
  <button>Home</button>
  <button>Products</button>
  <button>About</button>
  <button>Contact</button>
</Column>

<Column 
  mainAxisAlignment={MainAxisAlignment.start}
  crossAxisAlignment={CrossAxisAlignment.stretch}
  spacing={8}
  style={{ padding: '16px' }}
>
  <button>Home</button>
  <button>Products</button>
  <button>About</button>
  <button>Contact</button>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

8b. Centered Card

Tsx

<Column
  mainAxisAlignment={MainAxisAlignment.center}
  crossAxisAlignment={CrossAxisAlignment.center}
  mainAxisSize={MainAxisSize.max}
  style={{ height: '50vh' }}
>
  <Container 
    width={400}
    padding={32}
    decoration={{
      color: '#333',
      borderRadius: 16,
      boxShadow: [{
        color: 'rgba(0, 0, 0, 0.1)',
        offset: { dx: 0, dy: 4 },
        blurRadius: 12,
      }],
    }}
  >
    <h2>Sign In</h2>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button>Login</button>
  </Container>
</Column>

<Column
  mainAxisAlignment={MainAxisAlignment.center}
  crossAxisAlignment={CrossAxisAlignment.center}
  mainAxisSize={MainAxisSize.max}
  style={{ height: '50vh' }}
>
  <Container 
    width={400}
    padding={32}
    decoration={{
      color: '#333',
      borderRadius: 16,
      boxShadow: [{
        color: 'rgba(0, 0, 0, 0.1)',
        offset: { dx: 0, dy: 4 },
        blurRadius: 12,
      }],
    }}
  >
    <h2>Sign In</h2>
    <input type="email" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button>Login</button>
  </Container>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

8c. Form Layout

Tsx

<Column 
  crossAxisAlignment={CrossAxisAlignment.stretch}
  spacing={16}
  style={{ maxWidth: '400px' }}
>
  <label>
    <span>Name</span>
    <input type="text" />
  </label>
  
  <label>
    <span>Email</span>
    <input type="email" />
  </label>
  
  <label>
    <span>Message</span>
    <textarea rows={4} />
  </label>
  
  <button>Submit</button>
</Column>

<Column 
  crossAxisAlignment={CrossAxisAlignment.stretch}
  spacing={16}
  style={{ maxWidth: '400px' }}
>
  <label>
    <span>Name</span>
    <input type="text" />
  </label>
  
  <label>
    <span>Email</span>
    <input type="email" />
  </label>
  
  <label>
    <span>Message</span>
    <textarea rows={4} />
  </label>
  
  <button>Submit</button>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

8d. Dashboard Layout

Tsx

<Column 
  mainAxisSize={MainAxisSize.max}
  spacing={24}
  style={{ height: '100vh', padding: '24px' }}
>
  {/* Header */}
  <Container width={'20vw'} height={80} color="#eb1660">
    <h1>Dashboard</h1>
  </Container>
  
  {/* Content */}
  <Column spacing={16} style={{ flex: 1 }}>
    <Container width={'20vw'} height={200} color="#333">
      Chart 1
    </Container>
    <Container width={'20vw'} height={200} color="#333">
      Chart 2
    </Container>
  </Column>
  
  {/* Footer */}
  <Container width={'20vw'} height={60} color="#333">
    Footer
  </Container>
</Column>

<Column 
  mainAxisSize={MainAxisSize.max}
  spacing={24}
  style={{ height: '100vh', padding: '24px' }}
>
  {/* Header */}
  <Container width={'20vw'} height={80} color="#eb1660">
    <h1>Dashboard</h1>
  </Container>
  
  {/* Content */}
  <Column spacing={16} style={{ flex: 1 }}>
    <Container width={'20vw'} height={200} color="#333">
      Chart 1
    </Container>
    <Container width={'20vw'} height={200} color="#333">
      Chart 2
    </Container>
  </Column>
  
  {/* Footer */}
  <Container width={'20vw'} height={60} color="#333">
    Footer
  </Container>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

8e. Timeline / Feed

Tsx

import { Column, Container, CrossAxisAlignment, BorderAll } from '@dynshift/layr';

const posts = [
  {
    id: 1,
    title: "Introducing Layr 1.0",
    content: "We're excited to announce the first stable release of Layr, bringing Flutter-inspired layout components to React. Build beautiful UIs with declarative, type-safe components.",
    timestamp: "2 hours ago"
  },
  {
    id: 2,
    title: "Understanding MainAxisAlignment",
    content: "Learn how to properly distribute children along the main axis using spaceBetween, spaceAround, and spaceEvenly. These alignment options give you precise control over layout spacing.",
    timestamp: "5 hours ago"
  },
  {
    id: 3,
    title: "Building Responsive Layouts",
    content: "Combine Column, Row, and Stack to create fully responsive layouts. Use mainAxisSize and crossAxisAlignment to adapt your UI to different screen sizes seamlessly.",
    timestamp: "1 day ago"
  },
  {
    id: 4,
    title: "BoxDecoration Deep Dive",
    content: "BoxDecoration provides powerful styling capabilities including gradients, shadows, borders, and background images. This post covers advanced decoration patterns and best practices.",
    timestamp: "2 days ago"
  },
  {
    id: 5,
    title: "TypeScript Support",
    content: "All Layr components are fully typed with comprehensive IntelliSense support. Get autocomplete suggestions, type checking, and inline documentation as you code.",
    timestamp: "3 days ago"
  },
  {
    id: 6,
    title: "Migration Guide",
    content: "Moving from traditional CSS layouts to Layr? Our migration guide covers common patterns, conversion strategies, and tips for refactoring existing components.",
    timestamp: "4 days ago"
  },
  {
    id: 7,
    title: "Performance Optimization",
    content: "Layr components are optimized for performance with minimal re-renders and efficient CSS. Learn how to build high-performance UIs with proper component composition.",
    timestamp: "5 days ago"
  },
  {
    id: 8,
    title: "Community Showcase",
    content: "Check out amazing projects built with Layr by our community. From dashboards to landing pages, see what's possible with Flutter-inspired layout components.",
    timestamp: "1 week ago"
  }
];

export default function FeedExample() {
  return (
    <Column 
      crossAxisAlignment={CrossAxisAlignment.start}
      spacing={20}
      clipBehavior="scroll"
      style={{ 
        maxHeight: '600px', 
        padding: '20px',
        backgroundColor: '#0a0a0a'
      }}
    >
      {posts.map((post) => (
        <Container 
          key={post.id}
          padding={16}
          decoration={{
            color: '#1a1a1a',
            borderRadius: 8,
            border: BorderAll({ width: 1, color: '#2a2a2a' }),
          }}
          style={{ 
            width: '100%',
            transition: 'all 0.2s ease',
            cursor: 'pointer'
          }}
          onClick={() => console.log(`Clicked post: ${post.title}`)}
        >
          <h3 style={{ 
            color: '#eb1660', 
            fontSize: '1.25rem',
            fontWeight: 600,
            marginBottom: '8px'
          }}>
            {post.title}
          </h3>
          
          <p style={{ 
            color: '#a0a0a0', 
            fontSize: '0.95rem',
            lineHeight: '1.6',
            marginBottom: '12px'
          }}>
            {post.content}
          </p>
          
          <span style={{ 
            color: '#666', 
            fontSize: '0.875rem',
            fontStyle: 'italic'
          }}>
            {post.timestamp}
          </span>
        </Container>
      ))}
    </Column>
  );
}

import { Column, Container, CrossAxisAlignment, BorderAll } from '@dynshift/layr';

const posts = [
  {
    id: 1,
    title: "Introducing Layr 1.0",
    content: "We're excited to announce the first stable release of Layr, bringing Flutter-inspired layout components to React. Build beautiful UIs with declarative, type-safe components.",
    timestamp: "2 hours ago"
  },
  {
    id: 2,
    title: "Understanding MainAxisAlignment",
    content: "Learn how to properly distribute children along the main axis using spaceBetween, spaceAround, and spaceEvenly. These alignment options give you precise control over layout spacing.",
    timestamp: "5 hours ago"
  },
  {
    id: 3,
    title: "Building Responsive Layouts",
    content: "Combine Column, Row, and Stack to create fully responsive layouts. Use mainAxisSize and crossAxisAlignment to adapt your UI to different screen sizes seamlessly.",
    timestamp: "1 day ago"
  },
  {
    id: 4,
    title: "BoxDecoration Deep Dive",
    content: "BoxDecoration provides powerful styling capabilities including gradients, shadows, borders, and background images. This post covers advanced decoration patterns and best practices.",
    timestamp: "2 days ago"
  },
  {
    id: 5,
    title: "TypeScript Support",
    content: "All Layr components are fully typed with comprehensive IntelliSense support. Get autocomplete suggestions, type checking, and inline documentation as you code.",
    timestamp: "3 days ago"
  },
  {
    id: 6,
    title: "Migration Guide",
    content: "Moving from traditional CSS layouts to Layr? Our migration guide covers common patterns, conversion strategies, and tips for refactoring existing components.",
    timestamp: "4 days ago"
  },
  {
    id: 7,
    title: "Performance Optimization",
    content: "Layr components are optimized for performance with minimal re-renders and efficient CSS. Learn how to build high-performance UIs with proper component composition.",
    timestamp: "5 days ago"
  },
  {
    id: 8,
    title: "Community Showcase",
    content: "Check out amazing projects built with Layr by our community. From dashboards to landing pages, see what's possible with Flutter-inspired layout components.",
    timestamp: "1 week ago"
  }
];

export default function FeedExample() {
  return (
    <Column 
      crossAxisAlignment={CrossAxisAlignment.start}
      spacing={20}
      clipBehavior="scroll"
      style={{ 
        maxHeight: '600px', 
        padding: '20px',
        backgroundColor: '#0a0a0a'
      }}
    >
      {posts.map((post) => (
        <Container 
          key={post.id}
          padding={16}
          decoration={{
            color: '#1a1a1a',
            borderRadius: 8,
            border: BorderAll({ width: 1, color: '#2a2a2a' }),
          }}
          style={{ 
            width: '100%',
            transition: 'all 0.2s ease',
            cursor: 'pointer'
          }}
          onClick={() => console.log(`Clicked post: ${post.title}`)}
        >
          <h3 style={{ 
            color: '#eb1660', 
            fontSize: '1.25rem',
            fontWeight: 600,
            marginBottom: '8px'
          }}>
            {post.title}
          </h3>
          
          <p style={{ 
            color: '#a0a0a0', 
            fontSize: '0.95rem',
            lineHeight: '1.6',
            marginBottom: '12px'
          }}>
            {post.content}
          </p>
          
          <span style={{ 
            color: '#666', 
            fontSize: '0.875rem',
            fontStyle: 'italic'
          }}>
            {post.timestamp}
          </span>
        </Container>
      ))}
    </Column>
  );
}

Preview

NOTE: Previews are not depiction of actual website output.

8f. Badge List

Tsx

<Column 
  crossAxisAlignment={CrossAxisAlignment.start}
  spacing={12}
>
  <Container 
    paddingHorizontal={12}
    paddingVertical={6}
    decoration={{
      color: 'rgba(235, 22, 96, 0.1)',
      borderRadius: 99,
    }}
  >
    <span style={{ color: '#eb1660', fontSize: '0.875rem' }}>New</span>
  </Container>
  
  <Container 
    paddingHorizontal={12}
    paddingVertical={6}
    decoration={{
      color: 'rgba(59, 130, 246, 0.1)',
      borderRadius: 99,
    }}
  >
    <span style={{ color: '#3b82f6', fontSize: '0.875rem' }}>Featured</span>
  </Container>
  
  <Container 
    paddingHorizontal={12}
    paddingVertical={6}
    decoration={{
      color: 'rgba(16, 185, 129, 0.1)',
      borderRadius: 99,
    }}
  >
    <span style={{ color: '#10b981', fontSize: '0.875rem' }}>Popular</span>
  </Container>
</Column>

<Column 
  crossAxisAlignment={CrossAxisAlignment.start}
  spacing={12}
>
  <Container 
    paddingHorizontal={12}
    paddingVertical={6}
    decoration={{
      color: 'rgba(235, 22, 96, 0.1)',
      borderRadius: 99,
    }}
  >
    <span style={{ color: '#eb1660', fontSize: '0.875rem' }}>New</span>
  </Container>
  
  <Container 
    paddingHorizontal={12}
    paddingVertical={6}
    decoration={{
      color: 'rgba(59, 130, 246, 0.1)',
      borderRadius: 99,
    }}
  >
    <span style={{ color: '#3b82f6', fontSize: '0.875rem' }}>Featured</span>
  </Container>
  
  <Container 
    paddingHorizontal={12}
    paddingVertical={6}
    decoration={{
      color: 'rgba(16, 185, 129, 0.1)',
      borderRadius: 99,
    }}
  >
    <span style={{ color: '#10b981', fontSize: '0.875rem' }}>Popular</span>
  </Container>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

9. Layout Algorithm

Column follows Flutter's layout specification:

• Layout non-flex children with unbounded vertical constraints
• Divide remaining vertical space among flex children (Expanded)
• Width = maximum width of children (or 100% by default)
• Height = determined by mainAxisSize (max = fill parent, min = wrap content)
• Position children according to mainAxisAlignment and crossAxisAlignment

10. Custom Styling

10a. Tailwind Classes

Tsx

<Column className="bg-gray-100 rounded-lg p-4">
  <span>Styled with Tailwind</span>
</Column>

10b. Inline Styles

Tsx

<Column 
  style={{ 
    backgroundColor: '#f3f4f6', 
    borderRadius: '8px',
    padding: '16px' 
  }}
>
  <span>Custom styles</span>
</Column>

11. TypeScript

Column is fully typed with comprehensive IntelliSense support:

Tsx

import type { ColumnProps } from '@dynshift/layr';
import { Column, MainAxisAlignment, CrossAxisAlignment } from '@dynshift/layr';

const VerticalList: React.FC<ColumnProps> = (props) => {
  return (
    <Column 
      mainAxisAlignment={MainAxisAlignment.start}
      crossAxisAlignment={CrossAxisAlignment.stretch}
      spacing={12}
      {...props}
    />
  );
};

12. API Reference

12a. ColumnProps

Prop	Type	Default	Description
children	ReactNode	—	Content to render vertically
mainAxisAlignment	MainAxisAlignment	start	Vertical distribution of children
crossAxisAlignment	CrossAxisAlignment	center	Horizontal alignment of children
mainAxisSize	MainAxisSize	max	How much vertical space to occupy
verticalDirection	VerticalDirection	down	Layout direction (top-to-bottom or reversed)
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	Children at top
center	center	Children centered
end	flex-end	Children at bottom
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	Left alignment
center	center	Horizontal center
end	flex-end	Right alignment
stretch	stretch	Fill full width
baseline	baseline	Text baseline alignment

12d. MainAxisSize Enum

Value	Behavior	Description
max	height: 100%	Fill available height
min	height: auto	Wrap to content height

12e. VerticalDirection Enum

Value	CSS Equivalent	Description
down	column	Top-to-bottom (normal)
up	column-reverse	Bottom-to-top (reversed)

13. Next Steps

• Row — Horizontal layout with alignment
• Stack — Layered positioning

Container

Row

In this document:

1. Basic Usage

1a. Simple Vertical Layout

1b. With Spacing

2. Main Axis Alignment

3. Cross Axis Alignment

5. Vertical Direction

6b. No Spacing (Default)

7. Clip Behavior

7a. Visible (Default)

7b. Hidden

7c. Scroll

8. Complete Examples

8a. Vertical Navigation

10a. Tailwind Classes

12b. MainAxisAlignment Enum

12c. CrossAxisAlignment Enum

12d. MainAxisSize Enum

12e. VerticalDirection Enum

13. Next Steps