<SizedBox width={200} height={100}>
  <span>Fixed size content</span>
</SizedBox>
<div>Spaced Out</div>

<SizedBox width={300} height={200}>
  <Container
    width='100%'
    height='100%'
    decoration={{ 
      border: BorderAll({ width: 1, color: '#e5e7eb' })
    }}
  >
    This is exactly 300x200px.
  </Container>
</SizedBox>

<SizedBox width={600}>
  <Container
    width='100%'
    decoration={{ 
      border: BorderAll({ width: 1, color: '#e5e7eb' })
    }}
  >
    This paragraph is constrained to 600px wide, 
    but height adjusts to content.
  </Container>
</SizedBox>

<SizedBox height={150}>
  <Container
    height='100%'
    decoration={{ 
      border: BorderAll({ width: 1, color: '#e5e7eb' })
    }}
  >
    Height is fixed at 150px
  </Container>
</SizedBox>

<Column>
  <span>Top Element</span>
  <SizedBox height={24} />
  <span>Bottom Element (24px below)</span>
</Column>

<Row>
  <button>Cancel</button>
  <SizedBox width={16} />
  <button>Submit</button>
</Row>

<Column>
  <h2>Section Title</h2>
  <SizedBox height="1.5rem" />
  <p>Section content</p>
</Column>

<Container width={400} height={300}>
  <SizedBox.expand>
   <Container 
   height='100%' 
   decoration={{ color: '#3b82f6' }}>
     This is exactly 400x300
   </Container>
  </SizedBox.expand>
</Container>

import { Column, SizedBox } from '@dynshift/layr';
import { useState } from 'react';

export function App() {
  const [showSpacer, setShowSpacer] = useState(true);
  return (
    <Column>
      <span>Always visible</span>
      {showSpacer ? <SizedBox height={20} /> : <SizedBox.shrink />}
      <span>Conditionally spaced</span>
    </Column>
  );
}

<SizedBox.square dimension={100}>
  <Container height='100%' decoration={{ color: '#3b82f6' }} />
</SizedBox.square>

<SizedBox width={300}>
  <p style={{ lineHeight: 1.6 }}>
    Long-form content constrained to optimal reading width 
    for better typography and user experience.
  </p>
</SizedBox>

<SizedBox width="50%" height={0} style={{ paddingBottom: '56.25%', position: 'relative' }}>
  <iframe 
    src="https://youtube.com/embed/..." 
    style={{ position: 'absolute', width: '100%', height: '100%' }}
  />
</SizedBox>

<Row spacing={12} mainAxisAlignment={MainAxisAlignment.center}>
  <SizedBox.square dimension={120}>
    <img src="/eg-bg.jpg" alt="Icon" />
  </SizedBox.square>
  <span>Label with icon</span>
</Row>

<SizedBox width="100%" height={80}>
  <Container 
    decoration={{ 
      color: '#10b981',
      gradient: {
        colors: ['#10b981', '#059669'],
        begin: 'centerLeft',
        end: 'centerRight',
      },
    }}
  >
    <Centre>
      <h3 style={{ color: 'white', margin: 0 }}>Promo Banner</h3>
    </Centre>
  </Container>
</SizedBox>

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

// Sample data
const products = [
  {
    id: 1,
    title: 'Wireless Headphones',
    description: 'Premium noise-cancelling headphones with 30-hour battery life.',
    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=300&fit=crop',
    price: '$299'
  },
  {
    id: 2,
    title: 'Smart Watch',
    description: 'Track your fitness goals with advanced health monitoring.',
    image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=300&fit=crop',
    price: '$399'
  },
  {
    id: 3,
    title: 'Laptop Stand',
    description: 'Ergonomic aluminum stand for better posture and cooling.',
    image: 'https://images.unsplash.com/photo-1629317480826-910f729d1709?q=80&w=1974&fit=crop',
    price: '$79'
  },
  {
    id: 4,
    title: 'Mechanical Keyboard',
    description: 'RGB backlit keyboard with customizable switches.',
    image: 'https://images.unsplash.com/photo-1625948515291-69613efd103f?w=400&h=300&fit=crop',
    price: '$149'
  },
  {
    id: 5,
    title: 'Wireless Mouse',
    description: 'Ergonomic design with long battery.',
    image: 'https://images.unsplash.com/photo-1527814050087-3793815479db?w=400&h=300&fit=crop',
    price: '$69'
  },
  {
    id: 6,
    title: 'USB-C Hub',
    description: 'Multi-port adapter with 4K HDMI and fast charging.',
    image: 'https://images.unsplash.com/photo-1616578273461-3a99ce422de6?q=80&w=764&fit=crop',
    price: '$49'
  }
];

const ProductGrid: React.FC = () => {
  return (
    <div style={{ 
      padding: '32px',
      maxWidth: '1200px',
      margin: '0 auto'
    }}>
      <h1 style={{ 
        fontSize: '2rem', 
        fontWeight: 700, 
        marginBottom: '32px',
        color: '#fdfdfd'
      }}>
        Featured Products
      </h1>
      
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
        gap: '24px' 
      }}>
        {products.map(product => (
          <SizedBox key={product.id} width="100%" height={380}>
            <Container 
              decoration={{ 
                color: '#ffffff', 
                borderRadius: 12,
                boxShadow: [{
                  color: 'rgba(0, 0, 0, 0.1)',
                  offset: { dx: 0, dy: 2 },
                  blurRadius: 8,
                  spreadRadius: 0
                }],
                border: {
                  width: 1,
                  color: '#e5e7eb'
                }
              }}
              style={{ 
                cursor: 'pointer',
                transition: 'transform 0.2s, box-shadow 0.2s'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-4px)';
                e.currentTarget.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.15)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
              }}
            >
              <Column>
                {/* Product Image */}
                <Container
                  width="100%"
                  height={200}
                  decoration={{
                    image: {
                      image: product.image,
                      fit: 'cover'
                    },
                    borderRadius: {
                      topLeft: 12,
                      topRight: 12
                    }
                  }}
                />
                
                {/* Product Details */}
                <Padding padding={20}>
                  <Column spacing={12}>
                    <div style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'flex-start'
                    }}>
                      <h3 style={{ 
                        margin: 0,
                        fontSize: '1.125rem',
                        fontWeight: 600,
                        color: '#1f2937',
                        flex: 1
                      }}>
                        {product.title}
                      </h3>
                      <span style={{
                        fontSize: '1.25rem',
                        fontWeight: 700,
                        color: '#eb1660',
                        marginLeft: '12px'
                      }}>
                        {product.price}
                      </span>
                    </div>
                    
                    <p style={{ 
                      margin: 0,
                      fontSize: '0.875rem',
                      lineHeight: 1.5,
                      color: '#6b7280'
                    }}>
                      {product.description}
                    </p>
                    
                    <button style={{
                      marginTop: '8px',
                      padding: '10px 20px',
                      backgroundColor: '#eb1660',
                      color: 'white',
                      border: 'none',
                      borderRadius: '6px',
                      fontSize: '0.875rem',
                      fontWeight: 600,
                      cursor: 'pointer',
                      transition: 'background-color 0.2s'
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.backgroundColor = '#d01454';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.backgroundColor = '#eb1660';
                    }}>
                      Add to Cart
                    </button>
                  </Column>
                </Padding>
              </Column>
            </Container>
          </SizedBox>
        ))}
      </div>
    </div>
  );
};

export default ProductGrid;

<Row spacing={12}>
  <SizedBox width={120} height={40}>
    <button style={{ width: '100%', height: '100%', color: 'white', backgroundColor: '#eb1660' }}>
      Cancel
    </button>
  </SizedBox>
  
  <SizedBox width={120} height={40}>
    <button style={{ width: '100%', height: '100%', color: 'white', backgroundColor: '#10b981' }}>
      Save
    </button>
  </SizedBox>
</Row>

<SizedBox.square dimension={64}>
  <Container 
    decoration={{ 
      shape: BoxShape.circle,
      image:  { image: 'eg-bg.jpg', fit: 'cover' } ,
      color: '#d1d5db',
    }}
  >
    <Centre>
      <span style={{ fontSize: '1.25rem', color: '#6b7280' }}>
        AB
      </span>
    </Centre>
  </Container>
</SizedBox.square>

<Container color={'#eb1660'} width={'100%'} height={300}>
<SizedBox width="80%" height={200}>
  <Container height='100%' width='100%' decoration={{ color: '#f3f4f6' }} />
</SizedBox>
</Container>

<SizedBox width="100vw" height="100vh">
  <Container decoration={{ color: '#000' }}>
    <Centre>
      <h1 style={{ color: 'white' }}>Full Screen</h1>
    </Centre>
  </Container>
</SizedBox>

<SizedBox width="calc(100% - 240px)" height={400}>
  <span>Width adjusts based on sidebar</span>
</SizedBox>

<Row>
  <SizedBox width={200}>
    <span>Fixed 200px (won't shrink)</span>
  </SizedBox>
  
  <div style={{ flex: 1 }}>
    <span>Takes remaining space</span>
  </div>
</Row>