Getting Started

Introduction

Installation

Migration from Flutter

Layout Primitives

Note

Centre

Centre centers its child both horizontally and vertically within available space using flexbox.

Tsx

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

Tsx

<Centre>
  <span>Perfectly centered</span>
</Centre>

<Centre>
  <span>Perfectly centered</span>
</Centre>

Preview

NOTE: Previews are not depiction of actual website output.

1. Basic Usage

1a. Simple Centering

Center any content:

Tsx

<Container width={400} height={300} decoration={{ color: '#333' }}>
  <Centre>
    <span>Centered Text</span>
  </Centre>
</Container>

<Container width={400} height={300} decoration={{ color: '#333' }}>
  <Centre>
    <span>Centered Text</span>
  </Centre>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

1b. Full Screen Center

Expand to fill parent:

Tsx

<div style={{ width: '100vw', height: '100vh' }}>
  <Centre>
    <h1>Welcome</h1>
  </Centre>
</div>

<div style={{ width: '100vw', height: '100vh' }}>
  <Centre>
    <h1>Welcome</h1>
  </Centre>
</div>

Preview

NOTE: Previews are not depiction of actual website output.

1c. Card Center

Tsx

<Container width={300} height={200} decoration={{ color: '#333', borderRadius: 12 }}>
  <Centre>
    <Column spacing={8}>
      <h3 style={{ margin: 0, textAlign: 'center' }}>Title</h3>
      <p style={{ margin: 0, color: '#6b7280', textAlign: 'center' }}>
        Subtitle
      </p>
    </Column>
  </Centre>
</Container>

<Container width={300} height={200} decoration={{ color: '#333', borderRadius: 12 }}>
  <Centre>
    <Column spacing={8}>
      <h3 style={{ margin: 0, textAlign: 'center' }}>Title</h3>
      <p style={{ margin: 0, color: '#6b7280', textAlign: 'center' }}>
        Subtitle
      </p>
    </Column>
  </Centre>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

2. Size Factors

2a. Width Factor

Centre width = child width × widthFactor:

Tsx

<Centre widthFactor={1}>
  <button>Exact fit</button>
</Centre>

<Centre widthFactor={1.5}>
  <button>1.5x wider than button</button>
</Centre>

<Centre widthFactor={1}>
  <button>Exact fit</button>
</Centre>

<Centre widthFactor={1.5}>
  <button>1.5x wider than button</button>
</Centre>

Preview

NOTE: Previews are not depiction of actual website output.

2b. Height Factor

Centre height = child height × heightFactor:

Tsx

<Centre heightFactor={2}>
  <div style={{ height: 50 }}>
    Double height container
  </div>
</Centre>

<Centre heightFactor={2}>
  <div style={{ height: 50 }}>
    Double height container
  </div>
</Centre>

Preview

NOTE: Previews are not depiction of actual website output.

2c. Both Factors

Control both dimensions:

Tsx

<Centre widthFactor={1.5} heightFactor={2}>
  <SizedBox width={100} height={50}>
    <Container decoration={{ color: '#eb1660' }} />
  </SizedBox>
</Centre>

Result: 150px wide (100 × 1.5) and 100px tall (50 × 2.0).

3. Common Patterns

3a. Loading Spinner

Tsx

<Centre style={{ minHeight: '100vh' }}>
  <Column spacing={16}>
    <div style={{ 
      width: 48, 
      height: 48, 
      border: '4px solid #e5e7eb', 
      borderTopColor: '#eb1660',
      borderRadius: '50%',
      animation: 'spin 1s linear infinite'
    }} />
    <span style={{ color: '#6b7280' }}>Loading...</span>
  </Column>
</Centre>

<Centre style={{ minHeight: '100vh' }}>
  <Column spacing={16}>
    <div style={{ 
      width: 48, 
      height: 48, 
      border: '4px solid #e5e7eb', 
      borderTopColor: '#eb1660',
      borderRadius: '50%',
      animation: 'spin 1s linear infinite'
    }} />
    <span style={{ color: '#6b7280' }}>Loading...</span>
  </Column>
</Centre>

Preview

NOTE: Previews are not depiction of actual website output.

3b. Error State

Tsx

<Container height={400} decoration={{ color: '#fef2f2' }}>
  <Centre>
    <Column spacing={16}>
      <div style={{ fontSize: '3rem' }}>⚠️</div>
      <h3 style={{ margin: 0, color: '#dc2626' }}>Error</h3>
      <p style={{ margin: 0, color: '#991b1b', textAlign: 'center' }}>
        Something went wrong
      </p>
      <button style={{ 
        padding: '10px 20px', 
        backgroundColor: '#dc2626', 
        color: 'white', 
        border: 'none', 
        borderRadius: 6,
        cursor: 'pointer'
      }}>
        Retry
      </button>
    </Column>
  </Centre>
</Container>

<Container height={400} decoration={{ color: '#fef2f2' }}>
  <Centre>
    <Column spacing={16}>
      <div style={{ fontSize: '3rem' }}>⚠️</div>
      <h3 style={{ margin: 0, color: '#dc2626' }}>Error</h3>
      <p style={{ margin: 0, color: '#991b1b', textAlign: 'center' }}>
        Something went wrong
      </p>
      <button style={{ 
        padding: '10px 20px', 
        backgroundColor: '#dc2626', 
        color: 'white', 
        border: 'none', 
        borderRadius: 6,
        cursor: 'pointer'
      }}>
        Retry
      </button>
    </Column>
  </Centre>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

3c. Empty State

Tsx

<Container height={500} decoration={{ color: '#fff' }}>
  <Centre>
    <Column spacing={20} style={{ maxWidth: 300, textAlign: 'center' }}>
      <div style={{ fontSize: '4rem', opacity: 0.3 }}>📭</div>
      <h3 style={{ margin: 0, color: '#1f2937' }}>No items found</h3>
      <p style={{ margin: 0, color: '#6b7280', lineHeight: 1.6 }}>
        Get started by creating your first item
      </p>
      <button style={{ 
        padding: '12px 24px', 
        backgroundColor: '#eb1660', 
        color: 'white', 
        border: 'none', 
        borderRadius: 8,
        fontWeight: 600,
        cursor: 'pointer'
      }}>
        Create Item
      </button>
    </Column>
  </Centre>
</Container>

<Container height={500} decoration={{ color: '#fff' }}>
  <Centre>
    <Column spacing={20} style={{ maxWidth: 300, textAlign: 'center' }}>
      <div style={{ fontSize: '4rem', opacity: 0.3 }}>📭</div>
      <h3 style={{ margin: 0, color: '#1f2937' }}>No items found</h3>
      <p style={{ margin: 0, color: '#6b7280', lineHeight: 1.6 }}>
        Get started by creating your first item
      </p>
      <button style={{ 
        padding: '12px 24px', 
        backgroundColor: '#eb1660', 
        color: 'white', 
        border: 'none', 
        borderRadius: 8,
        fontWeight: 600,
        cursor: 'pointer'
      }}>
        Create Item
      </button>
    </Column>
  </Centre>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

Tsx

<div style={{
  top: 0, 
  left: 0, 
  width: '100vw', 
  height: '100vh',
  zIndex: 1000
}}>
  <Centre>
    <Container 
      width={400} 
      decoration={{ 
        color: '#333', 
        borderRadius: 16,
        boxShadow: [{
          color: 'rgba(0, 0, 0, 0.25)',
          offset: { dx: 0, dy: 10 },
          blurRadius: 50
        }]
      }}
    >
      <Padding padding={32}>
        <Column spacing={20}>
          <h2 style={{ margin: 0 }}>Confirm</h2>
          <p style={{ margin: 0, color: '#6b7280' }}>
            Are you sure you want to proceed?
          </p>
          <Row spacing={12} mainAxisAlignment={MainAxisAlignment.end}>
            <button>Cancel</button>
            <button>Confirm</button>
          </Row>
        </Column>
      </Padding>
    </Container>
  </Centre>
</div>

<div style={{
  top: 0, 
  left: 0, 
  width: '100vw', 
  height: '100vh',
  zIndex: 1000
}}>
  <Centre>
    <Container 
      width={400} 
      decoration={{ 
        color: '#333', 
        borderRadius: 16,
        boxShadow: [{
          color: 'rgba(0, 0, 0, 0.25)',
          offset: { dx: 0, dy: 10 },
          blurRadius: 50
        }]
      }}
    >
      <Padding padding={32}>
        <Column spacing={20}>
          <h2 style={{ margin: 0 }}>Confirm</h2>
          <p style={{ margin: 0, color: '#6b7280' }}>
            Are you sure you want to proceed?
          </p>
          <Row spacing={12} mainAxisAlignment={MainAxisAlignment.end}>
            <button>Cancel</button>
            <button>Confirm</button>
          </Row>
        </Column>
      </Padding>
    </Container>
  </Centre>
</div>

Preview

NOTE: Previews are not depiction of actual website output.

3e. Hero Section

Tsx

<Container 
  height="100vh" 
  decoration={{ 
    gradient: {
      colors: ['#eb1660', '#7c3aed'],
      begin: 'topLeft',
      end: 'bottomRight'
    }
  }}
>
  <Centre>
    <Column spacing={24} style={{ maxWidth: 600, textAlign: 'center' }}>
      <h1 style={{ 
        margin: 0, 
        fontSize: '3rem', 
        fontWeight: 800, 
        color: 'white',
        lineHeight: 1.2
      }}>
        Build Beautiful UIs
      </h1>
      <p style={{ 
        margin: 0, 
        fontSize: '1.25rem', 
        color: 'rgba(255, 255, 255, 0.9)',
        lineHeight: 1.6
      }}>
        Flutter-inspired components for React developers
      </p>
      <Row spacing={16} mainAxisAlignment={MainAxisAlignment.center}>
        <button style={{ 
          padding: '14px 28px', 
          backgroundColor: 'white', 
          color: '#eb1660', 
          border: 'none', 
          borderRadius: 8,
          fontSize: '1rem',
          fontWeight: 600,
          cursor: 'pointer'
        }}>
          Get Started
        </button>
        <button style={{ 
          padding: '14px 28px', 
          backgroundColor: 'transparent', 
          color: 'white', 
          border: '2px solid white', 
          borderRadius: 8,
          fontSize: '1rem',
          fontWeight: 600,
          cursor: 'pointer'
        }}>
          Learn More
        </button>
      </Row>
    </Column>
  </Centre>
</Container>

<Container 
  height="100vh" 
  decoration={{ 
    gradient: {
      colors: ['#eb1660', '#7c3aed'],
      begin: 'topLeft',
      end: 'bottomRight'
    }
  }}
>
  <Centre>
    <Column spacing={24} style={{ maxWidth: 600, textAlign: 'center' }}>
      <h1 style={{ 
        margin: 0, 
        fontSize: '3rem', 
        fontWeight: 800, 
        color: 'white',
        lineHeight: 1.2
      }}>
        Build Beautiful UIs
      </h1>
      <p style={{ 
        margin: 0, 
        fontSize: '1.25rem', 
        color: 'rgba(255, 255, 255, 0.9)',
        lineHeight: 1.6
      }}>
        Flutter-inspired components for React developers
      </p>
      <Row spacing={16} mainAxisAlignment={MainAxisAlignment.center}>
        <button style={{ 
          padding: '14px 28px', 
          backgroundColor: 'white', 
          color: '#eb1660', 
          border: 'none', 
          borderRadius: 8,
          fontSize: '1rem',
          fontWeight: 600,
          cursor: 'pointer'
        }}>
          Get Started
        </button>
        <button style={{ 
          padding: '14px 28px', 
          backgroundColor: 'transparent', 
          color: 'white', 
          border: '2px solid white', 
          borderRadius: 8,
          fontSize: '1rem',
          fontWeight: 600,
          cursor: 'pointer'
        }}>
          Learn More
        </button>
      </Row>
    </Column>
  </Centre>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

3f. Logo Placeholder

Tsx

<Container width={200} height={200} decoration={{ color: '#f3f4f6', borderRadius: 12 }}>
  <Centre>
    <span style={{ fontSize: '3rem' }}>🚀</span>
  </Centre>
</Container>

<Container width={200} height={200} decoration={{ color: '#f3f4f6', borderRadius: 12 }}>
  <Centre>
    <span style={{ fontSize: '3rem' }}>🚀</span>
  </Centre>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

3g. Icon Button

Tsx

<SizedBox.square dimension={48}>
  <Container 
    decoration={{ 
      color: '#eb1660', 
      shape: BoxShape.circle 
    }}
    style={{ cursor: 'pointer' }}
  >
    <Centre>
      <span style={{ fontSize: '1.5rem', color: 'white' }}>+</span>
    </Centre>
  </Container>
</SizedBox.square>

<SizedBox.square dimension={48}>
  <Container 
    decoration={{ 
      color: '#eb1660', 
      shape: BoxShape.circle 
    }}
    style={{ cursor: 'pointer' }}
  >
    <Centre>
      <span style={{ fontSize: '1.5rem', color: 'white' }}>+</span>
    </Centre>
  </Container>
</SizedBox.square>

Preview

NOTE: Previews are not depiction of actual website output.

3h. Badge

Tsx

<Container decoration={{ color: '#10b981', borderRadius: 20 }}>
  <Padding padding={{ vertical: 6, horizontal: 16 }}>
    <Centre heightFactor={1}>
      <span style={{ color: 'white', fontSize: '0.875rem', fontWeight: 600 }}>
        Active
      </span>
    </Centre>
  </Padding>
</Container>

<Container decoration={{ color: '#10b981', borderRadius: 20 }}>
  <Padding padding={{ vertical: 6, horizontal: 16 }}>
    <Centre heightFactor={1}>
      <span style={{ color: 'white', fontSize: '0.875rem', fontWeight: 600 }}>
        Active
      </span>
    </Centre>
  </Padding>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

3i. Authentication Page

Tsx

<Container height="100vh">
  <Centre>
    <Container 
      width={400} 
      decoration={{ 
        color: '#333', 
        borderRadius: 16,
        boxShadow: [{
          color: 'rgba(0, 0, 0, 0.1)',
          offset: { dx: 0, dy: 4 },
          blurRadius: 20
        }]
      }}
    >
      <Padding padding={40}>
        <Column spacing={24}>
          <Centre widthFactor={1}>
            <h2 style={{ margin: 0, fontSize: '1.75rem', fontWeight: 700 }}>
              Sign In
            </h2>
          </Centre>
          
          <Column spacing={16}>
            <div>
              <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
                Email
              </label>
              <input 
                type="email" 
                placeholder="you@example.com"
                style={{ 
                  width: '100%', 
                  padding: '12px', 
                  border: '1px solid #d1d5db', 
                  borderRadius: 8,
                  fontSize: '1rem'
                }} 
              />
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
                Password
              </label>
              <input 
                type="password" 
                placeholder="••••••••"
                style={{ 
                  width: '100%', 
                  padding: '12px', 
                  border: '1px solid #d1d5db', 
                  borderRadius: 8,
                  fontSize: '1rem'
                }} 
              />
            </div>
          </Column>
          
          <button style={{ 
            width: '100%', 
            padding: '14px', 
            backgroundColor: '#eb1660', 
            color: 'white', 
            border: 'none', 
            borderRadius: 8,
            fontSize: '1rem',
            fontWeight: 600,
            cursor: 'pointer'
          }}>
            Sign In
          </button>
        </Column>
      </Padding>
    </Container>
  </Centre>
</Container>

<Container height="100vh">
  <Centre>
    <Container 
      width={400} 
      decoration={{ 
        color: '#333', 
        borderRadius: 16,
        boxShadow: [{
          color: 'rgba(0, 0, 0, 0.1)',
          offset: { dx: 0, dy: 4 },
          blurRadius: 20
        }]
      }}
    >
      <Padding padding={40}>
        <Column spacing={24}>
          <Centre widthFactor={1}>
            <h2 style={{ margin: 0, fontSize: '1.75rem', fontWeight: 700 }}>
              Sign In
            </h2>
          </Centre>
          
          <Column spacing={16}>
            <div>
              <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
                Email
              </label>
              <input 
                type="email" 
                placeholder="you@example.com"
                style={{ 
                  width: '100%', 
                  padding: '12px', 
                  border: '1px solid #d1d5db', 
                  borderRadius: 8,
                  fontSize: '1rem'
                }} 
              />
            </div>
            
            <div>
              <label style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
                Password
              </label>
              <input 
                type="password" 
                placeholder="••••••••"
                style={{ 
                  width: '100%', 
                  padding: '12px', 
                  border: '1px solid #d1d5db', 
                  borderRadius: 8,
                  fontSize: '1rem'
                }} 
              />
            </div>
          </Column>
          
          <button style={{ 
            width: '100%', 
            padding: '14px', 
            backgroundColor: '#eb1660', 
            color: 'white', 
            border: 'none', 
            borderRadius: 8,
            fontSize: '1rem',
            fontWeight: 600,
            cursor: 'pointer'
          }}>
            Sign In
          </button>
        </Column>
      </Padding>
    </Container>
  </Centre>
</Container>

Preview

NOTE: Previews are not depiction of actual website output.

4. API Reference

4a. CentreProps

Prop	Type	Default	Description
children	ReactNode	—	Child widget to center
widthFactor	number	—	Width multiplier (child width × factor)
heightFactor	number	—	Height multiplier (child height × factor)
className	string	''	Additional CSS classes
style	CSSProperties	{}	Custom inline styles
id	string	—	HTML id attribute

4b. Behavior

• No factors: expands to fill parent (100% width and height)
• widthFactor set: width equals child width multiplied by factor
• heightFactor set: height equals child height multiplied by factor
• Always centers using flexbox justify-content and align-items

5. TypeScript

Tsx

import { Centre, type CentreProps } from '@dynshift/layr';

const CenteredCard: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return (
    <Container width={400} height={300} decoration={{ color: '#f3f4f6' }}>
      <Centre>
        {children}
      </Centre>
    </Container>
  );
};

6. Aliases

Centre supports both British and American spellings:

Tsx

import { Centre, Center } from '@dynshift/layr';

// Both work identically
<Centre><span>British</span></Centre>
<Center><span>American</span></Center>

Padding

For Developers