Components/Fan cards

Fan cards

Team profiles that lift into focus and adapt to the available space.

Loading preview…

Fan Cards

Overlapping liquid-glass cards with frosted depth, rounded refraction, and a smooth lift on hover or keyboard focus.

Cards fan out on larger screens and form a grid in narrow containers. Hover or focus a card to bring it forward.

Installation

pnpm dlx shadcn@latest add https://your-docs-domain.com/r/fan-cards.json

Usage

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

export default function Team() {
  return (
    <FanCards
      aria-label="Our team"
      items={[
        {
          id: "maya",
          label: "Maya, Designer",
          content: <div className="h-72 p-6">Maya · Designer</div>,
        },
        {
          id: "devon",
          label: "Devon, Engineer",
          content: <div className="h-72 p-6">Devon · Engineer</div>,
        },
      ]}
    />
  )
}

API

Property	Type	Description
`items`	`FanCardItem[]`	The items option.
`cardClassName?`	`string`	The card class name option.

Standard element attributes are supported where the props extend a React element type. Required properties appear without a question mark.

Dependencies

motion

Shared local files are included in the Code panel. See project setup for Tailwind, path aliases, and theme tokens.

Documentation/Components

Components

Browse the collection.

Loading documentation…

Fan Cards

Overlapping liquid-glass cards with frosted depth, rounded refraction, and a smooth lift on hover or keyboard focus.

Cards fan out on larger screens and form a grid in narrow containers. Hover or focus a card to bring it forward.

Installation

pnpm dlx shadcn@latest add https://your-docs-domain.com/r/fan-cards.json

Usage

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

export default function Team() {
  return (
    <FanCards
      aria-label="Our team"
      items={[
        {
          id: "maya",
          label: "Maya, Designer",
          content: <div className="h-72 p-6">Maya · Designer</div>,
        },
        {
          id: "devon",
          label: "Devon, Engineer",
          content: <div className="h-72 p-6">Devon · Engineer</div>,
        },
      ]}
    />
  )
}

API

Property	Type	Description
`items`	`FanCardItem[]`	The items option.
`cardClassName?`	`string`	The card class name option.

Standard element attributes are supported where the props extend a React element type. Required properties appear without a question mark.

Dependencies

motion

Shared local files are included in the Code panel. See project setup for Tailwind, path aliases, and theme tokens.

Fan cards

Components

Fan cards

Meet the team.

Meet the team.