Card stack

卡片堆叠

在窄容器中滑动轮换，在宽容器中展开的卡片组。

Patterns & Parts

Reusable building blocks I keep coming back to.

Field Notes

Half-formed ideas, caught before they slip away.

Signals

How small rules add up to large behavior.

Flow

Motion that reveals — never just decoration.

Deep Work

Fewer things, given full attention.

交互方式

窄容器拖动顶层卡片或按“下一张”轮换；宽容器点击或键盘选择卡片展开，再次点击收起。

使用示例

import { CardStack } from "@/components/ui/card-stack"

export function Demo() {
  return <CardStack items={[
    { id: "notes", title: "Field notes", desc: "自己的内容", bg: "#3080ff", ink: "#fff" },
    { id: "flow", title: "Flow", desc: "另一个想法", bg: "#1f9d57", ink: "#fff" }
  ]} />
}

参数

参数	类型 / 默认值	说明
`items`	`StackItem[]`	带唯一 id、title、bg、ink 的卡片，可传 desc、body 和 graphic。
`onSelect`	`(id: string \| null) => void`	展开、收起或甩出卡片时通知使用者。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxmotiontailwind-merge

components/ui/card-stack.css
components/ui/card-stack.tsx
lib/utils.ts