Getting Started

Introduction

Installation

Migration from Flutter

Layout Primitives

Note

Positioned Fill

PositionedFill is a shorthand component that fills the entire Stack.
It is equivalent to: Positioned(top: 0, bottom: 0, left: 0, right: 0)

Tsx

import { Stack, PositionedFill } from '@dynshift/layr';

Tsx

<Stack style={{ width: 400, height: 300 }}>
  <img src="/eg-bg.jpg" alt="Background" />
  
  <PositionedFill>
    <Container padding={100} decoration={{ color: 'rgba(0, 0, 0, 0.5)' }} />
  </PositionedFill>
</Stack>

<Stack style={{ width: 400, height: 300 }}>
  <img src="/eg-bg.jpg" alt="Background" />
  
  <PositionedFill>
    <Container padding={100} decoration={{ color: 'rgba(0, 0, 0, 0.5)' }} />
  </PositionedFill>
</Stack>

Preview

NOTE: Previews are not depiction of actual website output.

1. Use Cases

1a. Full Overlay

Dark overlay on images.

Tsx

<Stack style={{ width: 800, height: 600 }}>
  <Container 
  padding={100}
    decoration={{ 
      image: { image: '/eg-bg.jpg', fit: 'cover' } 
    }} 
  />
  
  <PositionedFill>
    <Container
  padding={100}
     decoration={{ color: 'rgba(0, 0, 0, 0.4)' }} />
  </PositionedFill>
  
  <Centre>
    <h1 style={{ color: 'white' }}>Hero Title</h1>
  </Centre>
</Stack>

<Stack style={{ width: 800, height: 600 }}>
  <Container 
  padding={100}
    decoration={{ 
      image: { image: '/eg-bg.jpg', fit: 'cover' } 
    }} 
  />
  
  <PositionedFill>
    <Container
  padding={100}
     decoration={{ color: 'rgba(0, 0, 0, 0.4)' }} />
  </PositionedFill>
  
  <Centre>
    <h1 style={{ color: 'white' }}>Hero Title</h1>
  </Centre>
</Stack>

Preview

NOTE: Previews are not depiction of actual website output.

1b. Blur Backdrop

Full blur effect behind focused content.

Tsx

<Stack style={{ width: 500, height: 350 }}>
  <img src="/eg-bg.jpg" alt="Content" />
  
  <PositionedFill>
    <div style={{ 
      padding: 30,
      backdropFilter: 'blur(8px)',
      backgroundColor: 'rgba(255, 255, 255, 0.3)',
    }} />
  </PositionedFill>
  
  <Centre>
    <Container 
      padding={32}
      decoration={{ 
        color: 'grey',
        borderRadius: 12 
      }}
    >
      <h3>Focused Content</h3>
    </Container>
  </Centre>
</Stack>

<Stack style={{ width: 500, height: 350 }}>
  <img src="/eg-bg.jpg" alt="Content" />
  
  <PositionedFill>
    <div style={{ 
      padding: 30,
      backdropFilter: 'blur(8px)',
      backgroundColor: 'rgba(255, 255, 255, 0.3)',
    }} />
  </PositionedFill>
  
  <Centre>
    <Container 
      padding={32}
      decoration={{ 
        color: 'grey',
        borderRadius: 12 
      }}
    >
      <h3>Focused Content</h3>
    </Container>
  </Centre>
</Stack>

Preview

NOTE: Previews are not depiction of actual website output.

2. API Reference

2a. PositionedFillProps

Prop	Type	Default	Description
children	ReactNode	—	Child widget to fill the stack
className	string	''	Additional CSS classes
style	CSSProperties	{}	Custom inline styles

Note: PositionedFill automatically sets top = 0, bottom = 0, left = 0, right = 0.

3. TypeScript

Both components are fully typed.

Tsx

import { Positioned, PositionedFill, type PositionedProps } from '@dynshift/layr';

const CustomOverlay: React.FC<{ opacity: number }> = ({ opacity }) => {
  return (
    <Stack style={{ width: 400, height: 300 }}>
      <img src="/bg.jpg" alt="Background" />
      
      <PositionedFill>
        <div style={{ backgroundColor: `rgba(0, 0, 0, ${opacity})` }} />
      </PositionedFill>
    </Stack>
  );
};

In this document:

2a. PositionedFillProps

3. TypeScript