Depth Tilt Card

Installation

pnpm dlx shadcn@latest add @cleverui/card-tilt-depth

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { CardTiltDepth } from '@/components/ui/card-tilt-depth'

Exampletsx

import { CardTiltDepth } from '@/components/ui/card-tilt-depth'

export default function CardTiltDepthDemo() {
  return (
    <div className="mx-auto flex min-h-[480px] max-w-md items-center px-4 py-16 sm:px-6">
      <CardTiltDepth
        kicker="Case study"
        title="How Northline cut reconciliation from three days to forty minutes"
        body="A walkthrough of the ledger rewrite, dual-write period, cutover checklist, and the three metrics the ops team watches every morning."
        footer="Shipped Q2 · 3 min read"
        href="#northline"
        className="w-full"
      />
    </div>
  )
}

API reference

CardTiltDepth accepts the following props.

Prop	Type	Default	Description
`kicker`	`string`	`'Case study'`	mono micro-label riding the highest plane
`title`*	`string`	–	–
`body`*	`string`	–	supporting copy on the content plane
`footer`	`string`	–	quiet meta line at the card base
`href`	`string`	–	when set, the whole card renders as an anchor
`maxTilt`	`number`	`6`	tilt clamp in degrees; values above 6 are ignored

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' >: className, event handlers, aria attributes and the rest pass straight through.

Related components

Spotlight Card

Card with a primary-tinted spotlight that follows the pointer while the hairline border brightens beneath it. Touch and keyboard users get a designed fallback glow.

Window Frame Card

Card as a window, a static hairline frame around an aperture where a token-built scene shifts up to 6px against the pointer, under a mono sill caption. Calm depth with zero tilt.

Drawer Card

Card whose bottom edge is a drawer, hover or focus slides a hidden action row up from behind a hairline, click-through safe and permanently open on touch.

Frost Wipe Card

A condensation card for React, the pane mists over with canvas breath, your pointer squeegees it clear, droplets run, and it slowly re-fogs. Tailwind token colors throughout.

Hover Index Card

Editorial cards fronted by a giant mono index numeral that fills from outline to solid ink on hover or focus, a zero-movement hover language built on clip-path, solid by default on touch.

Ledger Flip Card

Card that flips to its ledger side, a mono spec table, on an explicit flip button, with aria-pressed state and a reduced-motion crossfade instead of 3D rotation.

Frequently asked questions

How do I install the Depth Tilt Card component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/card-tilt-depth`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Depth Tilt Card require?

Depth Tilt Card uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Depth Tilt Card to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code