caliper uidocs
DemoSign inGet Pro

Page curl

Pro

A page that curls back to reveal the next.

Installs components/ui/page-curl.tsxDepends on @radix-ui/react-slot, lucide-reactMotion honours reduced motion
pnpm dlx shadcn@latest add @caliper/page-curl

Next quarter

Three priorities

  1. Ship usage-based billing
  2. Cut onboarding to under five minutes
  3. Open the Frankfurt region

Q3 report

Revenue grew 18% on stronger retention

Drag the corner to see what is next.

When to use #

Use it for

  • A playful reveal of a short sequence.

Skip it when

  • Navigation people rely on.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/page-curl

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { PageCurl } from "@/components/ui/page-curl"

The worked example comes with Pro

The 32-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

PageCurl

component
PropTypeDefault
front *ReactNode—
back *ReactNode—
openboolean—
defaultOpenbooleanfalse
onOpenChange((open: boolean) => void)—
turnLabelstring"Turn page"
backLabelstring"Turn back"
classNamestring—

Accessibility #

It is built on native elements and keeps aria-hidden, aria-pressed and aria-controls in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.