文档目录

卡片

Panel + TitleBar + 内容区块的三段式卡片。

合成

Panel + TitleBar + 内容区块

分隔线上下

import { Divider } from "../divider/index";
import { Card } from "./index";

/**
 * Card / TitleBar / Divider 预览用例（规格 §5 #5）
*/
export function CardDemo() {
  return (
    <Card align="center" className="w-140" title="合成">
      <p className="font-mc mc-text">Panel + TitleBar + 内容区块</p>
      <Divider className="my-4" />
      <p className="font-mc mc-text text-mc-text-dim">分隔线上下</p>
    </Card>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/card

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

import { Card } from "@tennantite/ui";

CLI 拷贝导入

import { Card } from "@/components/tennantite/card";

import { Divider } from "../divider/index";
import { Card } from "./index";

/**
 * Card / TitleBar / Divider 预览用例（规格 §5 #5）
*/
export function CardDemo() {
  return (
    <Card align="center" className="w-140" title="合成">
      <p className="font-mc mc-text">Panel + TitleBar + 内容区块</p>
      <Divider className="my-4" />
      <p className="font-mc mc-text text-mc-text-dim">分隔线上下</p>
    </Card>
  );
}

API Reference

Prop	Type	描述
align	"center" \| "end" \| "start"	标题对齐方式，透传给 TitleBar。
title	ReactNode	标题（渲染 TitleBar）。

源码

packages/ui/src/containers/card/index.tsx

npm 包保留源码目录，可直接复制改造。