Docs

Box Reveal

Box Reveal

A smooth reveal animation that slides a colored overlay away to introduce content as it enters the viewport.

Open in
Loading...

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/box-reveal.json

Usage

import { BoxReveal } from "@/components/box-reveal";
<BoxReveal>
  <h1>Box Reveal</h1>
</BoxReveal>
 
<BoxReveal>
  // Pass any children here, and the reveal effect will be applied to it.
</BoxReveal>

Props / Data Attributes

PropTypeDefaultDescription
childrenReact.ReactNode-The content to which animation must be applied
side"left" | "right""left"Direction from which the reveal box slides away
width"fit-content" | "full""fit-content"Controls the width of the reveal container
colorstring"#FACC15"Background color of the reveal overlay
classNamestring-Additional class names applied to the root container
Reveal EffectScroll Based Text Reveal