Expandable Card

展开卡片

封面与标题连续变形成详情浮层的卡片，支持列表和网格布局。

交互方式

点击卡片展开详情，封面和标题共享布局过渡；点遮罩、关闭按钮或按 Escape 缩回原位。浮层覆盖整个页面，支持深浅主题。演示可切换列表/网格并收藏条目。

使用示例

import { ExpandableCard } from "@/components/ui/expandable-card"

export function Demo() {
  return <ExpandableCard variant="list" items={[
    {
      id: "coast",
      title: "Quiet Tides",
      subtitle: "Coastal notes",
      image: "https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?w=800&auto=format&fit=crop",
      imageAlt: "Coastline at sunset",
      content: <p>A quiet moment by the sea.</p>,
      action: <a href="https://example.com">Read more</a>,
    },
  ]} />
}

参数

参数	类型 / 默认值	说明
`items`	`ExpandableCardItem[]`	卡片数据：唯一 id、title、image、content；可选 subtitle、imageAlt、action（ReactNode）。
`variant`	`"list" \| "grid"`"list"	列表或双列网格布局。
`theme`	`"light" \| "dark"`"light"	组件及 body 浮层的独立配色。
`activeId`	`string \| null`	受控的展开条目 ID，null 关闭；未匹配的 ID 不展示浮层。
`defaultActiveId`	`string \| null`null	非受控初始展开条目。
`onActiveIdChange`	`(id: string \| null) => void`	请求展开或关闭时调用。
`expandLabel`	`string`"Explore"	列表右侧的展开提示。
`closeLabel`	`string`"Close"	关闭按钮无障碍名称。
`dialogClassName`	`string`	独立传送到 body 的详情容器样式。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

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

@radix-ui/react-dialogclsxlucide-reactmotiontailwind-merge

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

来源

https://ui.aceternity.com/components/expandable-card

https://www.radix-ui.com/primitives/docs/components/dialog

https://motion.dev/docs/react-layout-animations