Simple pricing that scales with usage, not complexity.Experimental
Choose monthly for flexibility or yearly for the best unit economics. Every plan includes shared projects, role-based access, and workflow analytics.
プレビュー
状態とバリエーション
plans が中身を決め、billingPeriods を渡すと切り替えが現れて価格が連動します。headingLevel は見出しの階層で、他の見出しとぶつからないようにする口です。
月額と年額を切り替える
billingPeriods を2つ以上渡すと切り替えが出ます。price を期間ごとの表にしておくと、押した側の金額に入れ替わります。
料金
年払いにすると2か月ぶん安くなります。
Free
0円/月
個人の試作に。
- Included: 5人まで
- Included: コミュニティ支援
Pro
2,900円/月
伸びているチームに。
- Included: 人数の上限なし
- Included: 優先の問い合わせ
- Included: テンプレート一式
推すプランを立てる
plans の1枚に featured を立てると、枠が強まり印が付きます。印の文字は featuredLabel で言い換えます。立てるのは1枚だけにします。
料金
無料で始めて、必要になったら上げられます。
Free
0円/月
個人の試作に。
- Included: 5人まで
- Included: コミュニティ支援
いちばん選ばれています
Pro
2,900円/月
伸びているチームに。
- Included: 人数の上限なし
- Included: 優先の問い合わせ
- Included: テンプレート一式
節として埋め込む
既に見出しがある画面の中に置くときは headingLevel を下げます。見た目は変わらず、読み上げの順番だけが正しくなります。
料金
この節はページ見出しの下に入ります。
Free
0円/月
個人の試作に。
- Included: 5人まで
- Included: コミュニティ支援
Pro
2,900円/月
伸びているチームに。
- Included: 人数の上限なし
- Included: 優先の問い合わせ
- Included: テンプレート一式
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | ReactNode | 'Pricing' | Page heading. |
| subtitle | ReactNode | - | Subtitle line. |
| plans | PricingPlan[] | - | Plan cards: { id, name, price, period?, description?, features, cta, featured? }[]. |
| headingLevel | 1 | 2 | 3 | 2 | Heading level for the title, so it never collides with the page heading. |
| billingPeriods | PricingBillingPeriod[] | - | Billing periods. With two or more, a toggle is rendered and prices react to it. |
| defaultBillingPeriod | string | - | Uncontrolled initial billing-period id. |
| billingPeriod | string | - | Controlled active billing-period id (with onBillingPeriodChange). |
| onBillingPeriodChange | (id: string) => void | - | Called when the active billing period changes. |
| billingPeriodLabel | string | 'Billing period' | Accessible label for the billing-period toggle. |
Usage
import { Button, PricingTemplate, type PricingPlan } from "@gunjo/ui";
const plans: PricingPlan[] = [
{
id: "free",
name: "Free",
price: "$0",
period: "/mo",
description: "For personal projects.",
features: ["Up to 5 users", "Community support", "Open-source components"],
cta: <Button variant="outline" className="w-full">Get started</Button>,
},
{
id: "pro",
name: "Pro",
price: "$29",
period: "/mo",
description: "For growing teams.",
features: [
"Unlimited users",
"Priority support",
"Advanced templates",
"SSO & SAML",
],
cta: <Button variant="secondary" className="w-full">Start trial</Button>,
featured: true,
},
{
id: "enterprise",
name: "Enterprise",
price: "Custom",
description: "For larger organizations.",
features: ["SLA + audit logs", "Dedicated success manager", "Custom integrations"],
cta: <Button variant="outline" className="w-full">Contact sales</Button>,
},
];
export function PricingPage() {
return (
<PricingTemplate
plans={plans}
title="Pricing"
subtitle="Start free, upgrade when your team grows."
/>
);
}