Getting Started

Introduction

Installation

Migration from Flutter

Layout Primitives

Note

Padding

Padding insets its child by a specified amount, shrinking layout constraints and inflating final size by the padding value.

Tsx

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

Tsx

<Padding padding={16}>
  <span>Content with 16px padding on all sides</span>
</Padding>

<Padding padding={16}>
  <span>Content with 16px padding on all sides</span>
</Padding>

Preview

NOTE: Previews are not depiction of actual website output.

1. Basic Usage

1a. Uniform Padding

Apply equal padding to all sides:

Tsx

<Padding padding={20}>
  <div style={{ backgroundColor: '#333' }}>
    20px padding on all sides
  </div>
</Padding>

<Padding padding={20}>
  <div style={{ backgroundColor: '#333' }}>
    20px padding on all sides
  </div>
</Padding>

Preview

NOTE: Previews are not depiction of actual website output.

1b. Symmetric Padding

Different vertical and horizontal values:

Tsx

<Padding padding={{ vertical: 24, horizontal: 16 }}>
  <div>24px top/bottom, 16px left/right</div>
</Padding>

<Padding padding={{ vertical: 24, horizontal: 16 }}>
  <div>24px top/bottom, 16px left/right</div>
</Padding>

Preview

NOTE: Previews are not depiction of actual website output.

1c. Individual Sides

Specify each side independently:

Tsx

<Padding padding={{ top: 12, right: 16, bottom: 8, left: 16 }}>
  <div>Custom padding per side</div>
</Padding>

<Padding padding={{ top: 12, right: 16, bottom: 8, left: 16 }}>
  <div>Custom padding per side</div>
</Padding>

Preview

NOTE: Previews are not depiction of actual website output.

1d. All Sides (EdgeInsets.all)

Explicit all-sides syntax:

Tsx

<Padding padding={{ all: 24 }}>
  <div>24px on all sides (explicit)</div>
</Padding>

<Padding padding={{ all: 24 }}>
  <div>24px on all sides (explicit)</div>
</Padding>

Preview

NOTE: Previews are not depiction of actual website output.

2. Common Patterns

2a. Card with Padding

Tsx

<Container decoration={{ color: '#fff', borderRadius: 12, boxShadow: [{ color: 'rgba(0,0,0,0.1)', offset: { dx: 0, dy: 2 }, blurRadius: 8 }] }}>
  <Padding padding={20}>
    <Column spacing={12}>
      <h3 style={{ margin: 0 }}>Card Title</h3>
      <p style={{ margin: 0, color: '#6b7280' }}>
        Card content with consistent padding
      </p>
    </Column>
  </Padding>
</Container>

<Container decoration={{ color: '#fff', borderRadius: 12, boxShadow: [{ color: 'rgba(0,0,0,0.1)', offset: { dx: 0, dy: 2 }, blurRadius: 8 }] }}>
  <Padding padding={20}>
    <Column spacing={12}>
      <h3 style={{ margin: 0 }}>Card Title</h3>
      <p style={{ margin: 0, color: '#6b7280' }}>
        Card content with consistent padding
      </p>
    </Column>
  </Padding>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

2b. Button Padding

Tsx

<button style={{ border: 'none', backgroundColor: '#eb1660', borderRadius: 8, cursor: 'pointer' }}>
  <Padding padding={{ vertical: 12, horizontal: 24 }}>
    <span style={{ color: 'white', fontWeight: 600 }}>
      Click Me
    </span>
  </Padding>
</button>

<button style={{ border: 'none', backgroundColor: '#eb1660', borderRadius: 8, cursor: 'pointer' }}>
  <Padding padding={{ vertical: 12, horizontal: 24 }}>
    <span style={{ color: 'white', fontWeight: 600 }}>
      Click Me
    </span>
  </Padding>
</button>

Preview

NOTE: Previews are not depiction of actual website output.

2c. List Item Padding

Tsx

import React from 'react';
import { Padding, Row, Column, SizedBox, Container } from '@dynshift/layr';
import { CrossAxisAlignment, BoxShape } from '@dynshift/layr';

// Sample data
const items = [
  {
    id: 1,
    title: 'Sarah Chen',
    subtitle: 'Product Designer',
    avatar: 'https://i.pravatar.cc/150?img=1',
    status: 'online'
  },
  {
    id: 2,
    title: 'Michael Rodriguez',
    subtitle: 'Senior Engineer',
    avatar: 'https://i.pravatar.cc/150?img=2',
    status: 'away'
  },
  {
    id: 3,
    title: 'Emily Watson',
    subtitle: 'UX Researcher',
    avatar: 'https://i.pravatar.cc/150?img=3',
    status: 'online'
  },
  {
    id: 4,
    title: 'James Kim',
    subtitle: 'DevOps Lead',
    avatar: 'https://i.pravatar.cc/150?img=4',
    status: 'offline'
  },
  {
    id: 5,
    title: 'Lisa Anderson',
    subtitle: 'Frontend Developer',
    avatar: 'https://i.pravatar.cc/150?img=5',
    status: 'online'
  },
  {
    id: 6,
    title: 'David Park',
    subtitle: 'Backend Developer',
    avatar: 'https://i.pravatar.cc/150?img=6',
    status: 'away'
  }
];

// Status colors
const statusColors = {
  online: '#10b981',
  away: '#f59e0b',
  offline: '#6b7280'
};

const TeamList: React.FC = () => {
  return (
    <div style={{ 
      maxWidth: '600px',
      margin: '0 auto',
      padding: '32px',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    }}>
      <h1 style={{ 
        fontSize: '1.5rem', 
        fontWeight: 700, 
        marginBottom: '8px',
        color: '#fdfdfd'
      }}>
        Team Members
      </h1>
      <p style={{ 
        color: '#6b7280', 
        marginBottom: '24px',
        fontSize: '0.875rem'
      }}>
        {items.length} members online
      </p>
      
      <Container 
        decoration={{ 
          color: '#ffffff',
          borderRadius: 12,
          border: {
            width: 1,
            color: '#e5e7eb'
          },
          boxShadow: [{
            color: 'rgba(0, 0, 0, 0.05)',
            offset: { dx: 0, dy: 1 },
            blurRadius: 3,
            spreadRadius: 0
          }]
        }}
      >
        <Column crossAxisAlignment={CrossAxisAlignment.stretch}>
          {items.map((item, index) => (
            <React.Fragment key={item.id}>
              <Padding padding={{ horizontal: 16, vertical: 12 }}>
                <Row spacing={12} crossAxisAlignment={CrossAxisAlignment.center}>
                  {/* Avatar with status indicator */}
                  <div style={{ position: 'relative' }}>
                    <SizedBox.square dimension={48}>
                      <Container 
                        decoration={{ 
                          shape: BoxShape.circle,
                          image: {
                            image: item.avatar,
                            fit: 'cover'
                          },
                          border: {
                            width: 2,
                            color: '#f3f4f6'
                          }
                        }} 
                      />
                    </SizedBox.square>
                    
                    {/* Status indicator */}
                    <div style={{
                      position: 'absolute',
                      bottom: 0,
                      right: 0,
                      width: '14px',
                      height: '14px',
                      backgroundColor: statusColors[item.status as keyof typeof statusColors],
                      border: '2px solid white',
                      borderRadius: '50%'
                    }} />
                  </div>
                  
                  {/* User info */}
                  <Column style={{ flex: 1 }}>
                    <span style={{ 
                      fontWeight: 600,
                      color: '#1f2937',
                      fontSize: '0.9375rem'
                    }}>
                      {item.title}
                    </span>
                    <span style={{ 
                      fontSize: '0.875rem', 
                      color: '#6b7280',
                      marginTop: '2px'
                    }}>
                      {item.subtitle}
                    </span>
                  </Column>
                  
                  {/* Action button */}
                  <button
                    style={{
                      padding: '8px 16px',
                      backgroundColor: '#f3f4f6',
                      border: 'none',
                      borderRadius: '6px',
                      fontSize: '0.875rem',
                      fontWeight: 500,
                      color: '#374151',
                      cursor: 'pointer',
                      transition: 'background-color 0.2s'
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.backgroundColor = '#e5e7eb';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.backgroundColor = '#f3f4f6';
                    }}
                  >
                    Message
                  </button>
                </Row>
              </Padding>
              
              {/* Divider (not for last item) */}
              {index < items.length - 1 && (
                <div style={{
                  height: '1px',
                  backgroundColor: '#f3f4f6',
                  marginLeft: '76px' // Align with text, not avatar
                }} />
              )}
            </React.Fragment>
          ))}
        </Column>
      </Container>
    </div>
  );
};

export default TeamList;

import React from 'react';
import { Padding, Row, Column, SizedBox, Container } from '@dynshift/layr';
import { CrossAxisAlignment, BoxShape } from '@dynshift/layr';

// Sample data
const items = [
  {
    id: 1,
    title: 'Sarah Chen',
    subtitle: 'Product Designer',
    avatar: 'https://i.pravatar.cc/150?img=1',
    status: 'online'
  },
  {
    id: 2,
    title: 'Michael Rodriguez',
    subtitle: 'Senior Engineer',
    avatar: 'https://i.pravatar.cc/150?img=2',
    status: 'away'
  },
  {
    id: 3,
    title: 'Emily Watson',
    subtitle: 'UX Researcher',
    avatar: 'https://i.pravatar.cc/150?img=3',
    status: 'online'
  },
  {
    id: 4,
    title: 'James Kim',
    subtitle: 'DevOps Lead',
    avatar: 'https://i.pravatar.cc/150?img=4',
    status: 'offline'
  },
  {
    id: 5,
    title: 'Lisa Anderson',
    subtitle: 'Frontend Developer',
    avatar: 'https://i.pravatar.cc/150?img=5',
    status: 'online'
  },
  {
    id: 6,
    title: 'David Park',
    subtitle: 'Backend Developer',
    avatar: 'https://i.pravatar.cc/150?img=6',
    status: 'away'
  }
];

// Status colors
const statusColors = {
  online: '#10b981',
  away: '#f59e0b',
  offline: '#6b7280'
};

const TeamList: React.FC = () => {
  return (
    <div style={{ 
      maxWidth: '600px',
      margin: '0 auto',
      padding: '32px',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
    }}>
      <h1 style={{ 
        fontSize: '1.5rem', 
        fontWeight: 700, 
        marginBottom: '8px',
        color: '#fdfdfd'
      }}>
        Team Members
      </h1>
      <p style={{ 
        color: '#6b7280', 
        marginBottom: '24px',
        fontSize: '0.875rem'
      }}>
        {items.length} members online
      </p>
      
      <Container 
        decoration={{ 
          color: '#ffffff',
          borderRadius: 12,
          border: {
            width: 1,
            color: '#e5e7eb'
          },
          boxShadow: [{
            color: 'rgba(0, 0, 0, 0.05)',
            offset: { dx: 0, dy: 1 },
            blurRadius: 3,
            spreadRadius: 0
          }]
        }}
      >
        <Column crossAxisAlignment={CrossAxisAlignment.stretch}>
          {items.map((item, index) => (
            <React.Fragment key={item.id}>
              <Padding padding={{ horizontal: 16, vertical: 12 }}>
                <Row spacing={12} crossAxisAlignment={CrossAxisAlignment.center}>
                  {/* Avatar with status indicator */}
                  <div style={{ position: 'relative' }}>
                    <SizedBox.square dimension={48}>
                      <Container 
                        decoration={{ 
                          shape: BoxShape.circle,
                          image: {
                            image: item.avatar,
                            fit: 'cover'
                          },
                          border: {
                            width: 2,
                            color: '#f3f4f6'
                          }
                        }} 
                      />
                    </SizedBox.square>
                    
                    {/* Status indicator */}
                    <div style={{
                      position: 'absolute',
                      bottom: 0,
                      right: 0,
                      width: '14px',
                      height: '14px',
                      backgroundColor: statusColors[item.status as keyof typeof statusColors],
                      border: '2px solid white',
                      borderRadius: '50%'
                    }} />
                  </div>
                  
                  {/* User info */}
                  <Column style={{ flex: 1 }}>
                    <span style={{ 
                      fontWeight: 600,
                      color: '#1f2937',
                      fontSize: '0.9375rem'
                    }}>
                      {item.title}
                    </span>
                    <span style={{ 
                      fontSize: '0.875rem', 
                      color: '#6b7280',
                      marginTop: '2px'
                    }}>
                      {item.subtitle}
                    </span>
                  </Column>
                  
                  {/* Action button */}
                  <button
                    style={{
                      padding: '8px 16px',
                      backgroundColor: '#f3f4f6',
                      border: 'none',
                      borderRadius: '6px',
                      fontSize: '0.875rem',
                      fontWeight: 500,
                      color: '#374151',
                      cursor: 'pointer',
                      transition: 'background-color 0.2s'
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.backgroundColor = '#e5e7eb';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.backgroundColor = '#f3f4f6';
                    }}
                  >
                    Message
                  </button>
                </Row>
              </Padding>
              
              {/* Divider (not for last item) */}
              {index < items.length - 1 && (
                <div style={{
                  height: '1px',
                  backgroundColor: '#f3f4f6',
                  marginLeft: '76px' // Align with text, not avatar
                }} />
              )}
            </React.Fragment>
          ))}
        </Column>
      </Container>
    </div>
  );
};

export default TeamList;

Preview

NOTE: Previews are not depiction of actual website output.

2d. Nested Padding

Tsx

<Container decoration={{ color: '#1f2937' }}>
  <Padding padding={32}>
    <Container decoration={{ color: '#fff', borderRadius: 8 }}>
      <Padding padding={24}>
        <h2 style={{ margin: 0 }}>Nested padding creates depth</h2>
      </Padding>
    </Container>
  </Padding>
</Container>

<Container decoration={{ color: '#1f2937' }}>
  <Padding padding={32}>
    <Container decoration={{ color: '#fff', borderRadius: 8 }}>
      <Padding padding={24}>
        <h2 style={{ margin: 0 }}>Nested padding creates depth</h2>
      </Padding>
    </Container>
  </Padding>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

2e. Responsive Padding

Tsx

<Padding 
  padding={{ 
    vertical: window.innerWidth < 768 ? 16 : 32,
    horizontal: window.innerWidth < 768 ? 16 : 48
  }}
>
  <div>Adapts to screen size</div>
</Padding>

<Padding 
  padding={{ 
    vertical: window.innerWidth < 768 ? 16 : 32,
    horizontal: window.innerWidth < 768 ? 16 : 48
  }}
>
  <div>Adapts to screen size</div>
</Padding>

Preview

NOTE: Previews are not depiction of actual website output.

2f. Form Field Spacing

Tsx

<Column>
  <Padding padding={{ bottom: 16 }}>
    <label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
      Email
    </label>
    <input type="email" style={{ width: '100%', padding: '10px 12px', border: '1px solid #d1d5db', borderRadius: 6 }} />
  </Padding>
  
  <Padding padding={{ bottom: 16 }}>
    <label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
      Password
    </label>
    <input type="password" style={{ width: '100%', padding: '10px 12px', border: '1px solid #d1d5db', borderRadius: 6 }} />
  </Padding>
  
  <button style={{ width: '100%', padding: '12px', backgroundColor: '#eb1660', color: 'white', border: 'none', borderRadius: 6, fontWeight: 600 }}>
    Sign In
  </button>
</Column>

<Column>
  <Padding padding={{ bottom: 16 }}>
    <label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
      Email
    </label>
    <input type="email" style={{ width: '100%', padding: '10px 12px', border: '1px solid #d1d5db', borderRadius: 6 }} />
  </Padding>
  
  <Padding padding={{ bottom: 16 }}>
    <label style={{ display: 'block', marginBottom: 8, fontWeight: 600 }}>
      Password
    </label>
    <input type="password" style={{ width: '100%', padding: '10px 12px', border: '1px solid #d1d5db', borderRadius: 6 }} />
  </Padding>
  
  <button style={{ width: '100%', padding: '12px', backgroundColor: '#eb1660', color: 'white', border: 'none', borderRadius: 6, fontWeight: 600 }}>
    Sign In
  </button>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

2g. Section Spacing

Tsx

<Column>
  <Padding padding={{ bottom: 32 }}>
    <h1>Page Title</h1>
    <p>Introduction paragraph</p>
  </Padding>
  
  <Padding padding={{ bottom: 32 }}>
    <h2>Section 1</h2>
    <p>Section content</p>
  </Padding>
  
  <Padding padding={{ bottom: 32 }}>
    <h2>Section 2</h2>
    <p>More content</p>
  </Padding>
</Column>

<Column>
  <Padding padding={{ bottom: 32 }}>
    <h1>Page Title</h1>
    <p>Introduction paragraph</p>
  </Padding>
  
  <Padding padding={{ bottom: 32 }}>
    <h2>Section 1</h2>
    <p>Section content</p>
  </Padding>
  
  <Padding padding={{ bottom: 32 }}>
    <h2>Section 2</h2>
    <p>More content</p>
  </Padding>
</Column>

Preview

NOTE: Previews are not depiction of actual website output.

2h. Notification Badge

Tsx

<Container decoration={{ color: '#eb1660', borderRadius: 16 }}>
  <Padding padding={{ vertical: 4, horizontal: 12 }}>
    <span style={{ color: 'white', fontSize: '0.75rem', fontWeight: 700 }}>
      NEW
    </span>
  </Padding>
</Container>

<Container decoration={{ color: '#eb1660', borderRadius: 16 }}>
  <Padding padding={{ vertical: 4, horizontal: 12 }}>
    <span style={{ color: 'white', fontSize: '0.75rem', fontWeight: 700 }}>
      NEW
    </span>
  </Padding>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

2i. Chip or Tag

Tsx

<Container decoration={{ color: '#e5e7eb', borderRadius: 20 }}>
  <Padding padding={{ vertical: 6, horizontal: 16 }}>
    <span style={{ fontSize: '0.875rem', fontWeight: 500 }}>React</span>
  </Padding>
</Container>

<Container decoration={{ color: '#e5e7eb', borderRadius: 20 }}>
  <Padding padding={{ vertical: 6, horizontal: 16 }}>
    <span style={{ fontSize: '0.875rem', fontWeight: 500 }}>React</span>
  </Padding>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

Tsx

<Container 
  width={500} 
  decoration={{ 
    color: '#0f0f0f', 
    borderRadius: 16,
    boxShadow: [{ color: 'rgba(0,0,0,0.25)', offset: { dx: 0, dy: 10 }, blurRadius: 40 }]
  }}
>
  <Padding padding={32}>
    <Column spacing={20}>
      <h2 style={{ margin: 0 }}>Confirm Action</h2>
      <p style={{ margin: 0, color: '#6b7280' }}>
        Are you sure you want to proceed with this action?
      </p>
      <Row spacing={12} mainAxisAlignment={MainAxisAlignment.end}>
        <button style={{ padding: '10px 20px', border: '1px solid #d1d5db', backgroundColor: '#333', borderRadius: 6 }}>
          Cancel
        </button>
        <button style={{ padding: '10px 20px', border: 'none', backgroundColor: '#eb1660', color: 'white', borderRadius: 6 }}>
          Confirm
        </button>
      </Row>
    </Column>
  </Padding>
</Container>

<Container 
  width={500} 
  decoration={{ 
    color: '#0f0f0f', 
    borderRadius: 16,
    boxShadow: [{ color: 'rgba(0,0,0,0.25)', offset: { dx: 0, dy: 10 }, blurRadius: 40 }]
  }}
>
  <Padding padding={32}>
    <Column spacing={20}>
      <h2 style={{ margin: 0 }}>Confirm Action</h2>
      <p style={{ margin: 0, color: '#6b7280' }}>
        Are you sure you want to proceed with this action?
      </p>
      <Row spacing={12} mainAxisAlignment={MainAxisAlignment.end}>
        <button style={{ padding: '10px 20px', border: '1px solid #d1d5db', backgroundColor: '#333', borderRadius: 6 }}>
          Cancel
        </button>
        <button style={{ padding: '10px 20px', border: 'none', backgroundColor: '#eb1660', color: 'white', borderRadius: 6 }}>
          Confirm
        </button>
      </Row>
    </Column>
  </Padding>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

3. API Reference

3a. PaddingProps

Prop	Type	Default	Description
padding	number \| EdgeInsets	Required	Padding amount
children	ReactNode	—	Widget below this widget
className	string	''	Additional CSS classes
style	CSSProperties	{}	Custom inline styles
id	string	—	HTML id attribute

3b. EdgeInsets Types

Tsx

// Number - all sides equal
padding={16}

// All sides explicit
padding={{ all: 16 }}

// Symmetric
padding={{ vertical: 24, horizontal: 16 }}

// Individual sides
padding={{ top: 12, right: 16, bottom: 8, left: 16 }}

4. TypeScript

Tsx

import { Padding, type PaddingProps } from '@dynshift/layr';

const CustomCard: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <Container decoration={{ color: '#fff', borderRadius: 12 }}>
      <Padding padding={20}>
        {children}
      </Padding>
    </Container>
  );
};

Next Steps

• Centre/Centre — Center content

SizedBox

Centre