Docs·Fan Cards

Fan Cards

An editorial card fan with spring focus, serif titles, and a receding deck on select.

Installation

$pnpm dlx shadcn@latest add @spiderui/fan-cards

Usage

Click another card to switch focus, or click outside / the active card again to return to the fan. Tune spread, rotation, and spring feel in the personalize panel.

Design inspired by Interface Craft.

API Reference

PropTypeDefault
cardsCard data with title, subtitle, background/text colors, optional top content slot, default rotation, and stack index.
FanCardItem[]—
spreadHorizontal spacing between cards in the fan state.
number100
rotateStepRotation increment per card in the fan state.
number10
springStiffnessSpring stiffness for layout transitions.
number260
springDampingSpring damping for layout transitions.
number26
classNameAdditional classes on the outer wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

WorkingKnowledge

PracticalDemonstration

Collaboratewith AI

Means& Methods

InterfaceKit

import { FanCards } from "@/components/ui/fan-cards"
import { FanCards } from "@/components/ui/fan-cards"

export default function Page() {
  return (
    <FanCards
      spread={100}
      rotateStep={10}
      springStiffness={260}
      springDamping={26}
    />
  )
}