Foldable
Folded card that opens like the iPhone Duo, blurring as the cover turns.
Features
- Drag, flick, or tap the card to open and close it.
- Only the paper folds. The content stays flat.
- As the cover turns, its content blurs and dims away from the hinge, like the iPhone Duo.
Installation
pnpm dlx shadcn@latest add @ncdai/foldable
Usage
import {
Foldable,
FoldableCover,
FoldableInsideLeft,
FoldableInsideRight,
FoldableSlider,
FoldableStage,
} from "@/components/foldable"<Foldable>
<FoldableStage>
<FoldableInsideRight>Inside right</FoldableInsideRight>
<FoldableCover>Cover</FoldableCover>
<FoldableInsideLeft>Inside left</FoldableInsideLeft>
</FoldableStage>
<FoldableSlider />
</Foldable>Composition
Use the following composition to build a Foldable
Foldable
├── FoldableStage
│ ├── FoldableInsideRight
│ ├── FoldableCover
│ └── FoldableInsideLeft
└── FoldableSliderAPI reference
CSS variables
Set them on Foldable, for example [--foldable-w:16rem].
| Variable | Default | Description |
|---|---|---|
--foldable-w | min(20rem, calc(50vw - 2rem)) | Width of one page. The height is 7/5 of it. |
--foldable-radius | --spacing(4) | Corner radius of the paper. |
--foldable-surface | var(--background) | Paper color behind the content of every page. |
Examples
Spread
FoldableInsideLeft and FoldableInsideRight each show one half of a two-page layout, so the inside reads as one spread when open. FoldableStage is the container for its container queries, so the content resizes with the page.
Accessibility
- The card is hidden from assistive technology. Repeat important content outside it.
FoldableSliderworks from the keyboard and is labeled by its visible text.- With
prefers-reduced-motion, the card settles with a short ease instead of a spring.
