Glass Card

毛玻璃拟态卡片，带背景模糊与半透明边框，适合置于彩色渐变背景之上。

#glass #blur #glassmorphism

在沙盒中编辑

复制一段给 AI 编程工具的提示词，包含源码、依赖和用法

属性

GlassCardProps

同时支持以下类型的全部属性： Omit<React.ComponentProps<"div">, "title">

属性	类型	默认值	说明
title	`React.ReactNode`	—	—
description	`React.ReactNode`	—	—
footer	`React.ReactNode`	—	—

安装

$ npx shadcn@latest add https://chromotion.dev/r/glass-card.json

同类组件

Blog Card

整卡可点击的文章卡片，带渐变封面、分类标签、作者与阅读时长，悬停上浮并带箭头位移。

Product Card

商品卡片，含角标、评分星、划线价、加入购物车状态切换与心愿单收藏按钮。

Flip Card

3D 翻转卡片，悬停、聚焦或点击翻面，支持键盘并在减少动效时改为淡入淡出。