Stacked Cards

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/stacked-cards

Usage

import { StackedCards } from "@reactbytes/stacked-cards";

export default function Example() {
  return (
    <StackedCards />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | textColor | color | #F2EEE9 | Base text color of the container. | | accentColor | color | #C0DEDD | Accent color used for selection. | | stickyTop | string | 40px | Sticky top position for the cards. | | cardHeight | string | 360px | Height of the cards. | | rotationStrength | number | 3 | Strength of the rotation animation (degrees). | | scaleStrength | number | 0.9 | Scaling factor when cards stack (0 to 1). | | yOffset | string | -20px | Vertical offset when cards stack. | | borderRadius | string | 40px | Border radius for the cards. | | headerText | string | Scroll Below | Optional header text to display above cards. | | footerText | string | End of the sequence. | Optional footer text to display below cards. |

Presets

This component includes the following design presets:

• Standard Sequence (default)
• Minimal Stack (minimal)
• Brutalist Drift (brutalist)

Credits & Inspiration

Project Author

• ChandruMIT-o - Creator & Lead Designer

Inspiration & Tech

• GSAP - Animation Engine

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Stacked Cards.