Hover Index Card

Installation

pnpm dlx shadcn@latest add @cleverui/card-hover-index

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

Usage

tsx

import { CardHoverIndex } from '@/components/ui/card-hover-index'

Exampletsx

import { CardHoverIndex } from '@/components/ui/card-hover-index'

export default function CardHoverIndexDemo() {
  return (
    <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6">
      <CardHoverIndex
        startIndex={1}
        columns={3}
        items={[
          {
            title: 'Measure before you move',
            body: 'Instrument the current path for a full sprint. No rewrite until p95 and error budget are on the wall.',
            href: '#measure',
          },
          {
            title: 'Ship the narrowest cut',
            body: 'One interface, one consumer, one rollback. Breadth waits until the first cut is boring in production.',
            href: '#ship',
          },
          {
            title: 'Name the failure mode',
            body: 'Every principle ends with who pages, what degrades first, and the fifteen-minute recovery script.',
            href: '#failure',
          },
        ]}
      />
    </div>
  )
}

API reference

CardHoverIndex accepts the following props.

Prop	Type	Default	Description
`items`*	`CardHoverIndexItem[]`	–	2–4 entries in an order that is real content, principles, chapters, steps
`startIndex`	`number`	`1`	first index numeral; renders zero-padded two digits
`columns`	`2 \| 3`	`3`	grid columns at lg; single column below sm

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface CardHoverIndexItem {
  title: string
  body: string
  href?: string
}

Related components

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.

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.

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.

Frequently asked questions

How do I install the Hover Index 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-hover-index`. 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 Hover Index Card require?

Hover Index 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 Hover Index 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