Card
12px 同心圆角 + 发丝边，内部元素不再加边框。
专业版推荐
¥39 / 月
适合个人站长：无限页面、自定义域名、优先支持。
import { ArrowUpRight } from '@phosphor-icons/react/dist/ssr';
import { Card, Badge } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
export default function CardDemo() {
return (
<Card className="w-full max-w-[360px] p-5">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-text-primary">专业版</span>
<Badge>推荐</Badge>
</div>
<div className="font-display mt-4 text-[34px] leading-none text-text-primary">
¥39<span className="text-base text-text-secondary"> / 月</span>
</div>
<p className="mt-3 text-sm text-text-secondary">适合个人站长：无限页面、自定义域名、优先支持。</p>
<div className="mt-5 flex gap-2">
<Button className="flex-1">立即升级</Button>
<Button variant="ghost">了解更多 <ArrowUpRight /></Button>
</div>
</Card>
);
}
安装
import type { HTMLAttributes } from 'react';
import { twMerge } from 'tailwind-merge';
/** 12px 同心圆角 + 发丝边；卡片内部的按钮/chip 不再加边框（单线框纪律） */
export function Card({ className, ...p }: HTMLAttributes<HTMLDivElement>) {
return <div className={twMerge('rounded-xl bg-surface-2 shadow-panel', className)} {...p} />;
}
export function Badge({ className, ...p }: HTMLAttributes<HTMLSpanElement>) {
return (
<span
className={twMerge(
'inline-flex h-5 items-center rounded-full bg-accent-soft px-2 text-[11px] font-medium text-accent-text',
className,
)}
{...p}
/>
);
}
用法
<Card className="p-5">…</Card>