Layout

Reveal

Scroll-reveal wrapper with the design system

Props

Prop	Type	Default	Description
actLike	ElementType	—	Alias of `as`. Provided because the requested API uses `actLike="button"` reading. When both `as` and `actLike` are set, `actLike` wins and a dev warning fires.
alignContent	AlignContent	—	—
alignItems	AlignItems	—	—
alignSelf	AlignSelf	—	—
alt	string	—	Media `alt`.
as	ElementType	—	Render element. Defaults to `'div'`.
asChild	boolean	—	Radix-style polymorphism — merges Div's props onto the single child element. Mutually exclusive with `as` / `actLike`; `asChild` wins on conflict (dev warning fires).
aspectRatio	AspectRatio	—	—
backdropFilter	BackdropFilter	—	—
background	Background<string \| number>	—	—
backgroundColor	string \| (string & {})	—	—
backgroundImage	BackgroundImage	—	—
bg	string \| (string & {})	—	—
border	Border<string \| number>	—	—
borderBottom	BorderBottom<string \| number>	—	—
borderColor	string \| (string & {})	—	—
borderLeft	BorderLeft<string \| number>	—	—
borderRadius	BorderRadius<string \| number>	—	—
borderRight	BorderRight<string \| number>	—	—
borderStyle	BorderStyle	—	—
borderTop	BorderTop<string \| number>	—	—
borderWidth	BorderWidth<string \| number>	—	—
bottom	Bottom<string \| number>	—	—
boxShadow	string \| (string & {})	—	—
boxSizing	enum	—	—
centered	boolean	—	Shortcut for `display: flex; align-items: center; justify-content: center;`. Explicit style props win — if any of the three keys is also supplied, the consumer value is kept.
checked	boolean	—	Form control `checked`.
children	ReactNode	—	Children to render inside the element (or the single child when `asChild` is true).
className	string	—	Standard className. Appended after the recipe + pseudo classes via `tailwind-merge`.
color	string \| (string & {})	—	—
columnGap	ColumnGap<string \| number>	—	—
columns	number	—	Grid column count. Required by `stagger="row"`, ignored otherwise.
cursor	Cursor	—	—
decorative	boolean	—	Shortcut for the "decorative overlay" pattern — fills the parent (`position: absolute; inset: 0;`), declines pointer events, and adds `aria-hidden="true"` so screen readers skip the purely visual layer. Compose with `gradient` for the soft backdrop pattern, or use it standalone with a custom `backgroundImage` / `className`.
delay	enum	—	Offset this element's own start. Defaults to `'none'`.
disabled	boolean	—	Form control `disabled`.
display	Display	—	—
displayOn	enum	—	Start hidden, reveal the element at the named breakpoint and above.
download	string \| boolean	—	Anchor `download`.
emphasis	boolean	—	Slow this reveal down for a single large element — a hero image, a pull quote. Never use it on anything with siblings: at this duration a staggered group runs past the point where the page feels responsive.
fg	string \| (string & {})	—	—
filter	Filter	—	—
flex	Flex<string \| number>	—	—
flexBasis	FlexBasis<string \| number>	—	—
flexDirection	enum	—	—
flexGrow	FlexGrow	—	—
flexShrink	FlexShrink	—	—
flexWrap	enum	—	—
fontFamily	FontFamily	—	—
fontSize	FontSize<string \| number>	—	—
fontWeight	FontWeight	—	—
gap	Gap<string \| number>	—	—
gradient	DivGradient	—	Theme-aware background gradient — replaces the verbose `className="bg-[radial-gradient(...)]"` recipe with a single typed prop. - `true` → emit a default radial gradient using the active palette (`primary.subtle` → `transparent`, anchored top-left). Tracks the active theme variant for free. - `DivGradientConfig` object → tweak the gradient (`type`, `from`, `to`, `position`, `size`, `fromStop`, `toStop`). `from` / `to` accept palette token paths (`'success.subtle'`) or any raw CSS color. - `string` → escape hatch — used verbatim as `background-image` (drop in any `radial-gradient(...)` / `linear-gradient(...)` / `url(...)`). Sits in the inline style stack just above `sx` and just below the curated style props, so explicit `backgroundImage` / `background` overrides still win. Often paired with `decorative` for the "soft backdrop" pattern: <Div decorative gradient /> // theme default <Div decorative gradient={{ position: 'top' }} /> // override one field
gridArea	GridArea	—	—
gridAutoColumns	GridAutoColumns<string \| number>	—	—
gridAutoFlow	GridAutoFlow	—	—
gridAutoRows	GridAutoRows<string \| number>	—	—
gridColumn	GridColumn	—	—
gridRow	GridRow	—	—
gridTemplateColumns	GridTemplateColumns<string \| number>	—	—
gridTemplateRows	GridTemplateRows<string \| number>	—	—
h	Height<string \| number>	—	—
height	Height<string \| number>	—	—
hideOn	enum	—	Hide the element at the named breakpoint and above (Tailwind "from upward" semantics).
href	string	—	Anchor `href` — narrow when using `as="a"` / `actLike="a"`.
htmlFor	string	—	Label `htmlFor`.
inset	Inset<string \| number>	—	—
justifyContent	JustifyContent	—	—
justifyItems	JustifyItems	—	—
justifySelf	JustifySelf	—	—
left	Left<string \| number>	—	—
letterSpacing	LetterSpacing<string \| number>	—	—
lineHeight	LineHeight<string \| number>	—	—
m	Margin<string \| number>	—	—
margin	Margin<string \| number>	—	—
marginBlock	MarginBlock<string \| number>	—	—
marginBottom	MarginBottom<string \| number>	—	—
marginInline	MarginInline<string \| number>	—	—
marginLeft	MarginLeft<string \| number>	—	—
marginRight	MarginRight<string \| number>	—	—
marginTop	MarginTop<string \| number>	—	—
maxHeight	MaxHeight<string \| number>	—	—
maxWidth	MaxWidth<string \| number>	—	—
mb	MarginBottom<string \| number>	—	—
minHeight	MinHeight<string \| number>	—	—
minWidth	MinWidth<string \| number>	—	—
ml	MarginLeft<string \| number>	—	—
mr	MarginRight<string \| number>	—	—
mt	MarginTop<string \| number>	—	—
mx	MarginInline<string \| number>	—	—
my	MarginBlock<string \| number>	—	—
name	string	—	Form field `name`.
onActive	string	—	Tailwind classes applied on `:active` (pressed). e.g. `"scale-[0.98]"`.
onChecked	string	—	Tailwind classes applied when `aria-checked="true"`.
onDataState	string	—	Tailwind classes applied when `data-state="open"` is present.
onDisabled	string	—	Tailwind classes applied on `:disabled`. e.g. `"opacity-50 cursor-not-allowed"`.
onFocusVisible	string	—	Tailwind classes applied on `:focus-visible` (keyboard focus). e.g. `"ring-2 ring-primary-500"`.
onGroupHover	string	—	Tailwind classes applied when a parent `.group` is hovered.
onHover	string	—	Tailwind classes applied on `:hover`. e.g. `"bg-primary-100 scale-[1.02]"`.
onMount	boolean	—	This element is above the fold: play on mount rather than waiting for a scroll trigger. A separate prop rather than an `animateOnView={false}` escape hatch, because "this is above the fold" is the thing the author actually knows — and it makes the rule (a hero must never scroll-reveal, since the user is already looking at it) mechanical instead of remembered.
opacity	Opacity	—	—
order	Order	—	—
overflow	Overflow	—	—
overflowX	enum	—	—
overflowY	enum	—	—
p	Padding<string \| number>	—	—
padding	Padding<string \| number>	—	—
paddingBlock	PaddingBlock<string \| number>	—	—
paddingBottom	PaddingBottom<string \| number>	—	—
paddingInline	PaddingInline<string \| number>	—	—
paddingLeft	PaddingLeft<string \| number>	—	—
paddingRight	PaddingRight<string \| number>	—	—
paddingTop	PaddingTop<string \| number>	—	—
pb	PaddingBottom<string \| number>	—	—
pl	PaddingLeft<string \| number>	—	—
placeContent	PlaceContent	—	—
placeItems	PlaceItems	—	—
placeSelf	PlaceSelf	—	—
pointerEvents	enum	—	—
position	enum	—	—
pr	PaddingRight<string \| number>	—	—
preset	enum	—	How the element arrives. Defaults to `'rise'` — a small upward move with a fade.
pt	PaddingTop<string \| number>	—	—
px	PaddingInline<string \| number>	—	—
py	PaddingBlock<string \| number>	—	—
radius	BorderRadius<string \| number>	—	—
ref	Ref<HTMLElement>	—	Ref to the rendered element. Type depends on `as` / `actLike` / `asChild`. Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
rel	string	—	Anchor `rel`.
right	Right<string \| number>	—	—
rowGap	RowGap<string \| number>	—	—
shadow	string \| (string & {})	—	—
src	string	—	Media `src`.
stagger	RevealStagger	—	Cascade direct children instead of revealing them together. The children opt in simply by being `Reveal`s themselves — they need no extra props.
style	CSSProperties	—	Inline style override. Wins over `sx`, curated style props, and the `centered` shortcut.
sx	Sx	—	Theme-aware inline style (resolves palette / spacing / radius tokens).
target	string	—	Anchor `target`.
textAlign	enum	—	—
textDecoration	TextDecoration<string \| number>	—	—
textOverflow	TextOverflow	—	—
textTransform	TextTransform	—	—
top	Top<string \| number>	—	—
transform	Transform	—	—
transition	Transition<string & {}>	—	—
type	string	—	Button `type` — narrow when using `as="button"` / `actLike="button"`.
userSelect	enum	—	—
value	string \| number \| readonly string[]	—	Form field `value`.
visibility	enum	—	—
w	Width<string \| number>	—	—
whiteSpace	WhiteSpace	—	—
width	Width<string \| number>	—	—
wordBreak	enum	—	—
z	ZIndex	—	—
zIndex	ZIndex	—	—

Props

Prop	Type	Default	Description
actLike	ElementType	—	Alias of `as`. Provided because the requested API uses `actLike="button"` reading. When both `as` and `actLike` are set, `actLike` wins and a dev warning fires.
alignContent	AlignContent	—	—
alignItems	AlignItems	—	—
alignSelf	AlignSelf	—	—
alt	string	—	Media `alt`.
as	ElementType	—	Render element. Defaults to `'div'`.
asChild	boolean	—	Radix-style polymorphism — merges Div's props onto the single child element. Mutually exclusive with `as` / `actLike`; `asChild` wins on conflict (dev warning fires).
aspectRatio	AspectRatio	—	—
backdropFilter	BackdropFilter	—	—
background	Background<string \| number>	—	—
backgroundColor	string \| (string & {})	—	—
backgroundImage	BackgroundImage	—	—
bg	string \| (string & {})	—	—
border	Border<string \| number>	—	—
borderBottom	BorderBottom<string \| number>	—	—
borderColor	string \| (string & {})	—	—
borderLeft	BorderLeft<string \| number>	—	—
borderRadius	BorderRadius<string \| number>	—	—
borderRight	BorderRight<string \| number>	—	—
borderStyle	BorderStyle	—	—
borderTop	BorderTop<string \| number>	—	—
borderWidth	BorderWidth<string \| number>	—	—
bottom	Bottom<string \| number>	—	—
boxShadow	string \| (string & {})	—	—
boxSizing	enum	—	—
centered	boolean	—	Shortcut for `display: flex; align-items: center; justify-content: center;`. Explicit style props win — if any of the three keys is also supplied, the consumer value is kept.
checked	boolean	—	Form control `checked`.
children	ReactNode	—	Children to render inside the element (or the single child when `asChild` is true).
className	string	—	Standard className. Appended after the recipe + pseudo classes via `tailwind-merge`.
color	string \| (string & {})	—	—
columnGap	ColumnGap<string \| number>	—	—
columns	number	—	Grid column count. Required by `stagger="row"`, ignored otherwise.
cursor	Cursor	—	—
decorative	boolean	—	Shortcut for the "decorative overlay" pattern — fills the parent (`position: absolute; inset: 0;`), declines pointer events, and adds `aria-hidden="true"` so screen readers skip the purely visual layer. Compose with `gradient` for the soft backdrop pattern, or use it standalone with a custom `backgroundImage` / `className`.
delay	enum	—	Offset this element's own start. Defaults to `'none'`.
disabled	boolean	—	Form control `disabled`.
display	Display	—	—
displayOn	enum	—	Start hidden, reveal the element at the named breakpoint and above.
download	string \| boolean	—	Anchor `download`.
emphasis	boolean	—	Slow this reveal down for a single large element — a hero image, a pull quote. Never use it on anything with siblings: at this duration a staggered group runs past the point where the page feels responsive.
fg	string \| (string & {})	—	—
filter	Filter	—	—
flex	Flex<string \| number>	—	—
flexBasis	FlexBasis<string \| number>	—	—
flexDirection	enum	—	—
flexGrow	FlexGrow	—	—
flexShrink	FlexShrink	—	—
flexWrap	enum	—	—
fontFamily	FontFamily	—	—
fontSize	FontSize<string \| number>	—	—
fontWeight	FontWeight	—	—
gap	Gap<string \| number>	—	—
gradient	DivGradient	—	Theme-aware background gradient — replaces the verbose `className="bg-[radial-gradient(...)]"` recipe with a single typed prop. - `true` → emit a default radial gradient using the active palette (`primary.subtle` → `transparent`, anchored top-left). Tracks the active theme variant for free. - `DivGradientConfig` object → tweak the gradient (`type`, `from`, `to`, `position`, `size`, `fromStop`, `toStop`). `from` / `to` accept palette token paths (`'success.subtle'`) or any raw CSS color. - `string` → escape hatch — used verbatim as `background-image` (drop in any `radial-gradient(...)` / `linear-gradient(...)` / `url(...)`). Sits in the inline style stack just above `sx` and just below the curated style props, so explicit `backgroundImage` / `background` overrides still win. Often paired with `decorative` for the "soft backdrop" pattern: <Div decorative gradient /> // theme default <Div decorative gradient={{ position: 'top' }} /> // override one field
gridArea	GridArea	—	—
gridAutoColumns	GridAutoColumns<string \| number>	—	—
gridAutoFlow	GridAutoFlow	—	—
gridAutoRows	GridAutoRows<string \| number>	—	—
gridColumn	GridColumn	—	—
gridRow	GridRow	—	—
gridTemplateColumns	GridTemplateColumns<string \| number>	—	—
gridTemplateRows	GridTemplateRows<string \| number>	—	—
h	Height<string \| number>	—	—
height	Height<string \| number>	—	—
hideOn	enum	—	Hide the element at the named breakpoint and above (Tailwind "from upward" semantics).
href	string	—	Anchor `href` — narrow when using `as="a"` / `actLike="a"`.
htmlFor	string	—	Label `htmlFor`.
inset	Inset<string \| number>	—	—
justifyContent	JustifyContent	—	—
justifyItems	JustifyItems	—	—
justifySelf	JustifySelf	—	—
left	Left<string \| number>	—	—
letterSpacing	LetterSpacing<string \| number>	—	—
lineHeight	LineHeight<string \| number>	—	—
m	Margin<string \| number>	—	—
margin	Margin<string \| number>	—	—
marginBlock	MarginBlock<string \| number>	—	—
marginBottom	MarginBottom<string \| number>	—	—
marginInline	MarginInline<string \| number>	—	—
marginLeft	MarginLeft<string \| number>	—	—
marginRight	MarginRight<string \| number>	—	—
marginTop	MarginTop<string \| number>	—	—
maxHeight	MaxHeight<string \| number>	—	—
maxWidth	MaxWidth<string \| number>	—	—
mb	MarginBottom<string \| number>	—	—
minHeight	MinHeight<string \| number>	—	—
minWidth	MinWidth<string \| number>	—	—
ml	MarginLeft<string \| number>	—	—
mr	MarginRight<string \| number>	—	—
mt	MarginTop<string \| number>	—	—
mx	MarginInline<string \| number>	—	—
my	MarginBlock<string \| number>	—	—
name	string	—	Form field `name`.
onActive	string	—	Tailwind classes applied on `:active` (pressed). e.g. `"scale-[0.98]"`.
onChecked	string	—	Tailwind classes applied when `aria-checked="true"`.
onDataState	string	—	Tailwind classes applied when `data-state="open"` is present.
onDisabled	string	—	Tailwind classes applied on `:disabled`. e.g. `"opacity-50 cursor-not-allowed"`.
onFocusVisible	string	—	Tailwind classes applied on `:focus-visible` (keyboard focus). e.g. `"ring-2 ring-primary-500"`.
onGroupHover	string	—	Tailwind classes applied when a parent `.group` is hovered.
onHover	string	—	Tailwind classes applied on `:hover`. e.g. `"bg-primary-100 scale-[1.02]"`.
onMount	boolean	—	This element is above the fold: play on mount rather than waiting for a scroll trigger. A separate prop rather than an `animateOnView={false}` escape hatch, because "this is above the fold" is the thing the author actually knows — and it makes the rule (a hero must never scroll-reveal, since the user is already looking at it) mechanical instead of remembered.
opacity	Opacity	—	—
order	Order	—	—
overflow	Overflow	—	—
overflowX	enum	—	—
overflowY	enum	—	—
p	Padding<string \| number>	—	—
padding	Padding<string \| number>	—	—
paddingBlock	PaddingBlock<string \| number>	—	—
paddingBottom	PaddingBottom<string \| number>	—	—
paddingInline	PaddingInline<string \| number>	—	—
paddingLeft	PaddingLeft<string \| number>	—	—
paddingRight	PaddingRight<string \| number>	—	—
paddingTop	PaddingTop<string \| number>	—	—
pb	PaddingBottom<string \| number>	—	—
pl	PaddingLeft<string \| number>	—	—
placeContent	PlaceContent	—	—
placeItems	PlaceItems	—	—
placeSelf	PlaceSelf	—	—
pointerEvents	enum	—	—
position	enum	—	—
pr	PaddingRight<string \| number>	—	—
preset	enum	—	How the element arrives. Defaults to `'rise'` — a small upward move with a fade.
pt	PaddingTop<string \| number>	—	—
px	PaddingInline<string \| number>	—	—
py	PaddingBlock<string \| number>	—	—
radius	BorderRadius<string \| number>	—	—
ref	Ref<HTMLElement>	—	Ref to the rendered element. Type depends on `as` / `actLike` / `asChild`. Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
rel	string	—	Anchor `rel`.
right	Right<string \| number>	—	—
rowGap	RowGap<string \| number>	—	—
shadow	string \| (string & {})	—	—
src	string	—	Media `src`.
stagger	RevealStagger	—	Cascade direct children instead of revealing them together. The children opt in simply by being `Reveal`s themselves — they need no extra props.
style	CSSProperties	—	Inline style override. Wins over `sx`, curated style props, and the `centered` shortcut.
sx	Sx	—	Theme-aware inline style (resolves palette / spacing / radius tokens).
target	string	—	Anchor `target`.
textAlign	enum	—	—
textDecoration	TextDecoration<string \| number>	—	—
textOverflow	TextOverflow	—	—
textTransform	TextTransform	—	—
top	Top<string \| number>	—	—
transform	Transform	—	—
transition	Transition<string & {}>	—	—
type	string	—	Button `type` — narrow when using `as="button"` / `actLike="button"`.
userSelect	enum	—	—
value	string \| number \| readonly string[]	—	Form field `value`.
visibility	enum	—	—
w	Width<string \| number>	—	—
whiteSpace	WhiteSpace	—	—
width	Width<string \| number>	—	—
wordBreak	enum	—	—
z	ZIndex	—	—
zIndex	ZIndex	—	—