Display@knitui/components

Overlay

Overlay is a full-cover scrim — an absolutely- (or fixed-) positioned element that fills its parent with a translucent wash. backgroundColor and backgroundOpacity control the wash; gradient replaces the flat color with a CSS gradient. blur adds a backdrop-filter on web. center flex-centers any children (e.g. a spinner or message). The scrim is a neutral dimmer and does not follow the theme palette ramp.

WebiOSAndroid4 own props10 examples

Stories Source Tests Open in Storybook

import { Overlay } from "@knitui/components";

Playground

Loading playground…

backgroundColor

backgroundOpacityOpacity of the scrim color, 0–1. Ignored when `gradient` is set.

blurWeb-only backdrop blur in px (`backdrop-filter`). No-op on native.

gradientWeb-only CSS gradient string. Overrides `backgroundColor`/`backgroundOpacity` when set.

fixedWhen true, positions relative to the viewport (`fixed`) instead of the parent (`absolute`).

false

centerFlex-centers children inside the overlay.

false

zIndexStack order — defaults to 200 (modal level).

radiusBorder radius token applied to the scrim frame.

Playground

<Overlay
  backgroundColor="#000"
  backgroundOpacity={0.6}
  fixed={false}
  center={false}
  zIndex={200}
/>

Examples

Default

Default scrim at 60 % black opacity — covers its positioned parent completely.

Loading example…

DefaultSource Storybook

Centered

center prop flex-centers children inside the scrim — ideal for a loading spinner or message.

Loading example…

CenteredSource Storybook

Light Wash

Light wash over a white or bright surface — white scrim at low opacity.

Loading example…

Light WashSource Storybook

Shadows

Each elevation of the inherited shadow prop applied to the scrim frame.

Loading example…

ShadowsSource Storybook

Colored Tint

Colour-tinted scrim — a branded accent wash rather than neutral black.

Loading example…

Colored TintSource Storybook

Gradient

Gradient scrim — CSS gradient replaces the flat color wash.

Loading example…

GradientSource Storybook

Blur Scrim

Blur effect — backdrop-filter blurs content behind the scrim (web only).

Loading example…

Blur ScrimSource Storybook

With Radius

Radius — rounded corners clip the scrim to match a card or panel.

Loading example…

With RadiusSource Storybook

Trigger

Controlled visibility — click the button to toggle the overlay on/off.

Loading example…

TriggerSource Storybook

Props

Prop	Type	Default	Description
`backgroundColor`	`OpaqueColorValue \| GetThemeValueForKey<"backgroundColor"> \| undefined`	`"#000"`	Scrim base color (hex). Ignored when `gradient` is set.
`backgroundOpacity`	`number \| undefined`	`0.6`	Opacity of the scrim color, 0–1. Ignored when `gradient` is set.
`blur`	`string \| number \| undefined`	`0`	Web-only backdrop blur in px (`backdrop-filter`). No-op on native.
`disabled` system	`boolean \| undefined`	—
`fixed`	`boolean \| undefined`	`false`	When true, positions relative to the viewport (`fixed`) instead of the parent (`absolute`).
`gradient` system	`string \| undefined`	—	Web-only CSS gradient string. Overrides `backgroundColor`/`backgroundOpacity` when set.
`radius` system	`string \| number \| undefined` unset · xs · sm · md · lg · xl · full	—	Border radius token applied to the scrim frame.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.