mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
56d89d5de9
- Added columns array with Free, Pro, and Enterprise tiers - Each column has items showing users, storage, support, custom domain - Pro tier is highlighted as recommended option
41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { Comparison } from "@/registry/default/ui/comparison"
|
|
|
|
export default function ComparisonDemo() {
|
|
const columns = [
|
|
{
|
|
title: "Free",
|
|
items: [
|
|
{ label: "Users", value: "5" },
|
|
{ label: "Storage", value: "10GB" },
|
|
{ label: "Support", value: false },
|
|
{ label: "Custom domain", value: false },
|
|
],
|
|
},
|
|
{
|
|
title: "Pro",
|
|
highlighted: true,
|
|
items: [
|
|
{ label: "Users", value: "25" },
|
|
{ label: "Storage", value: "100GB" },
|
|
{ label: "Support", value: true },
|
|
{ label: "Custom domain", value: true },
|
|
],
|
|
},
|
|
{
|
|
title: "Enterprise",
|
|
items: [
|
|
{ label: "Users", value: "Unlimited" },
|
|
{ label: "Storage", value: "1TB" },
|
|
{ label: "Support", value: true },
|
|
{ label: "Custom domain", value: true },
|
|
],
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="w-full min-h-[400px] flex items-center justify-center p-8">
|
|
<Comparison columns={columns} />
|
|
</div>
|
|
)
|
|
}
|