Layout morph
ProItems that move between list, grid and chart layouts.
pnpm dlx shadcn@latest add @caliper/layout-morphDesign review
To do
Billing migration
In progress
Docs search
In progress
Release notes
Done
Onboarding flow
To do
Webhook retries
Done
When to use #
Use it for
- Letting people switch how data is shown.
Skip it when
- Layout rarely changes.
Installation #
pnpm dlx shadcn@latest add @caliper/layout-morph
Adds its 2 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.
import { LayoutMorph } from "@/components/ui/layout-morph"
The worked example comes with Pro
The 19-line example behind the preview opens here with a Pro or Team licence.
API reference #
LayoutMorph
component
Accessibility #
It is built on native elements, so roles and focus come from the browser.
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.