Playground

Layer

layout

overlay

Positioned overlay layer for content on media

Text overlays on images with gradient or glass backgrounds

Frosted glass info panels floating over product imagery

import { Layer } from "@everydayos/ui";

Usage

Full-bleed hero with media background and gradient text overlay

Better Air. Everyday.

Hero overlay pattern composed from Layer primitives.

New

API

position

Default: center

top-lefttop-centertop-rightcenter-leftcentercenter-rightbottom-leftbottom-centerbottom-rightfull

defaultpreferredrare

overlay

Default: none

nonelightdarkblurgradient-bottomgradient-top

defaultpreferredrare

Prop	Type	Default
`overlayOpacity`	`number`	`40`
`zIndex`	`number`	`1`
`contentFill`	`boolean`	`false`
`className`	`string`	—
`children`*	`React.ReactNode`	—

Examples

Blur Overlay

Frosted glass info panel floating over an image

Live

22°C

Living Room

Air quality: Excellent

Composition

Pairs well with

MediaFrame

Stack

Heading

Text

Surface

When to avoid

Not overlaying media — use Stack or Surface instead
Need simple container — use Surface instead

Patterns

Hero Overlay

Section

MediaFrame

Layer

Stack

Heading

Text

Full-bleed hero with media background and overlay text

<Section spacing="none">
  <MediaFrame overlay="bottomFade" className="h-screen">
    <Layer position="center">
      <Stack spacing="lg" align="center" className="text-center">
        <Heading as="h1" size="display" className="text-white">
          Hero Title
        </Heading>
        <Text size="l" className="text-white/90">
          Hero description
        </Text>
      </Stack>
    </Layer>
  </MediaFrame>
</Section>