Drawer Card

Installation

pnpm dlx shadcn@latest add @cleverui/card-drawer

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

Usage

tsx

import { CardDrawer } from '@/components/ui/card-drawer'

Exampletsx

import { BookOpen, Code2, Copy } from 'lucide-react'
import { CardDrawer } from '@/components/ui/card-drawer'

export default function CardDrawerDemo() {
  return (
    <div className="mx-auto flex min-h-[480px] max-w-md items-center px-4 py-16 sm:px-6">
      <CardDrawer
        kicker="Registry"
        title="Invoice timeline"
        body="A chronological audit strip for accounts payable, every status change, approver, and amount delta in one scannable column."
        meta="Updated 4h ago · v2.3"
        actions={[
          {
            label: 'Docs',
            href: '#docs',
            icon: <BookOpen className="size-4" aria-hidden="true" />,
          },
          {
            label: 'Source',
            href: '#source',
            icon: <Code2 className="size-4" aria-hidden="true" />,
          },
          {
            label: 'Copy',
            href: '#copy',
            icon: <Copy className="size-4" aria-hidden="true" />,
          },
        ]}
        className="w-full"
      />
    </div>
  )
}

API reference

CardDrawer accepts the following props.

Prop	Type	Default	Description
`kicker`	`string`	`'Component'`	mono micro-label above the title
`title`*	`string`	–	–
`body`*	`string`	–	–
`meta`	`string`	`'Updated 2d ago'`	quiet line shown on the closed bottom strip
`actions`*	`CardDrawerAction[]`	–	2–3 meta actions living in the drawer

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

Referenced types

Typestsx

export interface CardDrawerAction {
  label: string
  href: string
  icon?: React.ReactNode
}

Related components

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.

Iris Aperture Card

A React card with a working camera iris, token-surface blades pivot through real f-stops to unveil the pane on hover, under a live mono aperture readout. Tailwind tokens, mechanical spectacle.

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.

Depth Tilt Card

Card that tilts toward the pointer while kicker, keyline, and content ride separate translateZ planes, quiet 3D depth capped at 6 degrees, glare-free by design.

Time Echo Card

Hover slides two ghosted past states out from behind the card, prior values at fading opacity with mono timestamps, so one metric wears its history. Temporal depth, not decoration.

Constellation Card

A card whose border is a constellation, seeded stars joined by hairline segments that twinkle in slow sequence, then re-wire into a new star graph on hover. The frame is the show.

Frequently asked questions

How do I install the Drawer 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-drawer`. 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 Drawer Card require?

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

Can I theme Drawer 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