数据与反馈@neumorphism-ui/card

Card

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

@neumorphism-ui/card

Registry JSON

预览

市场概览

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

实时

₩72,400+2.41%

内嵌表面

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

安装

npx shadcn@latest add @neumorphism-ui/card

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

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

Import

import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

Example

<Card variant="raised">
  <CardHeader>
    <CardTitle>团队工作区</CardTitle>
    <CardDescription>使用共享 token 协作。</CardDescription>
    <CardAction>
      <Button size="sm">打开</Button>
    </CardAction>
  </CardHeader>
  <CardContent>共有 8 名成员参与。</CardContent>
  <CardFooter>刚刚更新</CardFooter>
</Card>

API 参考

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

预览

市场概览

内嵌表面

安装

用法

Import

Example

API 参考

无障碍