Premium & Brand

Card Stack

A fanned stack of cards that cycles on click or keyboard.

Import

tsx

import { CardStack } from "@cronus-ui/ui";

bash

npx cronus-ui add card-stack

Examples

Fanned stack

Click or press Space / ArrowRight on the front card to send it to the back. Labels can be localized.

Northwind

tsx

<CardStack
  items={[
    { id: "one", content: <p className="font-display text-lg">Northwind</p> },
    { id: "two", content: <p className="font-display text-lg">Contoso</p> },
    { id: "three", content: <p className="font-display text-lg">Adventure Works</p> },
  ]}
/>

API Reference

Generated from the component's exported types.

CardStackProps

Extends Omit<HTMLAttributes<HTMLElement>, "children">

Prop	Type	Default	Description
`ref`	`Ref<HTMLElement>`	—	—
`items`*	`CardStackItem[]`	—	—
`labels`	`{ region?: string; next?: string; }`	—	Accessible name for the stack. Defaults to `"Card stack"`.