Component•Premium

Card Spread

A responsive fan of overlapping cards with a smooth lift-and-push interaction for focused browsing.

Live controls

Customize

Arc72°Spread36%Lift34px

Overview

About the Card Spread

A responsive fan of overlapping cards with a smooth lift-and-push interaction for focused browsing. It is delivered as editable TypeScript for React. Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Portfolio, architecture, photography, and editorial galleries that need a compact visual browse pattern.
Product families or collections where hovering and keyboard focus should reveal one item without leaving the group.

What’s included

Files in the product ZIP

Card Spread source

components/card-spread.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

"use client";

import { CardSpread, type CardSpreadItem } from "@/components/card-spread";

Minimum example

const items: CardSpreadItem[] = [
  { id: "one", title: "First", background: "#172033" },
  { id: "two", title: "Second", background: "#4c1d95" },
];

export default function Gallery() {
  return <CardSpread items={items} />;
}

Props

Component API

Prop	Type	Default	Description
items	readonly CardSpreadItem[]	Required	Cards rendered in the spread.
arc	number	72	Vertical arc depth.
spread	number	36	Horizontal fan spread.
lift	number	34	Active-card lift distance.
cardWidth	number	190	Base card width in pixels.
cardHeight	number	260	Base card height in pixels.
push	number	18	Neighbor displacement when a card is active.
activeIndex	number \| null	undefined	Controlled active card index.
className	string	""	Additional root class names.
style	CSSProperties	undefined	Inline styles for the root element.
onCardSelect	(item: CardSpreadItem, index: number) => void	undefined	Runs when a card is clicked.

CardSpreadItem contains id plus optional title, label, image, imageAlt, background, and content fields.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source.

Images: No image files are included. CardSpreadItem accepts your own image URL or custom React content; the minimum example uses color backgrounds.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Card Spread ZIP, place the source file at src/components/card-spread.tsx, and copy the example into your own page or feature folder.

Target path

src/components/card-spread.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Tailwind CSS is not required by this component.
All component styles are embedded in components/card-spread.tsx.