Card

用于将摘要、设置、内容及相关操作组织成独立区域。

预览

市场摘要与内凹详情

比较带实时标记和详情按钮的 raised 市场卡片，以及包含目标进度的 inset 卡片。

市场概览

快速查看今日自选股走势。

实时

₩72,400+2.41%

内嵌表面

辅助信息可以使用下沉层次。

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/card

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

市场摘要与内凹详情

npx shadcn@latest add @neumorphism-ui/badge @neumorphism-ui/button @neumorphism-ui/card @neumorphism-ui/progress

Registry JSON

用法

在 CardHeader 中放入 CardTitle 和 CardDescription。主要内容放在 CardContent，辅助操作或信息放在 CardAction 或 CardFooter。

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export default function Example() {
  return (
    <Card>
      <CardHeader><CardTitle>Team workspace</CardTitle></CardHeader>
      <CardContent>Invite your team and start a project.</CardContent>
    </Card>
  );
}

API 参考

由 Header、Title、Description、Action、Content 和 Footer 组合而成的布局组件。根元素默认为 div，应根据内容语义安排标题和交互元素。

组件	属性	类型	默认值	说明
`Card`	`variant`	`"raised" \| "accent" \| "soft" \| "inset" \| "flat"`	`"raised"`	选择表面的层次和边框表现。
`Card`	`children`必填	`React.ReactNode`	`—`	排列 Card 的组合式子组件。
`CardAction`	`children`	`React.ReactNode`	`—`	Header 右侧的操作或状态区域。
`CardTitle`	`children`必填	`React.ReactNode`	`—`	Card 标题，默认渲染为 h3。

预览

市场摘要与内凹详情

市场概览

内嵌表面

安装

用法

API 参考

无障碍