Explore a variety of Hummingbird pricing plan examples and templates to help you build responsive and visually appealing web pages. These pricing plans include a range of different styles and structures to suit various types of websites and applications.
"use client";
import { Check, Crown, Gift, Minus, Send } from "lucide-react";
import { Button, Card, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const features = [
"Unlimited leads",
"Unlimited emails",
"No HB's branding",
"Email automation",
"Custom fields",
"Pro templates",
"Export leads and reports",
];
const plans = [
{
name: "Starter",
price: "Free",
icon: Send,
iconClassName: "text-info-light",
cardClassName: "bg-default",
included: 3,
cta: "Start free trial",
variant: "subtle",
featured: false,
},
{
name: "Pricing Pro",
price: "$19.99",
icon: Crown,
iconClassName: "text-warning-light",
cardClassName: "bg-subtle",
included: 5,
cta: "Sign up",
variant: "filled",
featured: true,
},
{
name: "Pricing Saver",
price: "$25.99",
icon: Gift,
iconClassName: "text-primary-light",
cardClassName: "bg-default",
included: 7,
cta: "Sign up",
variant: "subtle",
featured: false,
},
] as const;
export default function Pricing1() {
return (
<div className="max-w-7xl mx-auto py-10 px-6">
<Text as="h5" fontWeight="semibold">
Pricing Options
</Text>
<Text className="text-muted">
Get the power, control, and customization you need to manage your <br />{" "}
team’s and organization’s projects.
</Text>
<a className="link-primary link-hover" href="#">
Have questions? Chat with us
</a>
<div className="grid lg:grid-cols-3 mt-8 items-center">
{plans.map((plan) => {
const Icon = plan.icon;
const isFree = plan.price === "Free";
return (
<Card
key={plan.name}
className={cn(
"rounded-4xl border-0 max-w-100 sm:max-w-140 w-full mx-auto",
plan.cardClassName,
)}
>
<Card.Body className="text-center p-10">
{plan.featured ? (
<div className="bg-warning-light/15 text-warning-dark font-medium h-8 border border-warning-light/20 flex items-center justify-center px-3 rounded-full mb-10 sm:mb-4 lg:mb-10 sm:w-max lg:w-auto sm:ms-24 lg:ms-auto">
Best value
</div>
) : (
<div className="h-8 mb-10 hidden lg:block" />
)}
<div className="sm:flex lg:block gap-8">
<Icon
strokeWidth={1}
className={cn(
"size-16 mx-auto sm:mx-0 lg:mx-auto mb-8 sm:mb-0 lg:mb-8",
plan.iconClassName,
)}
/>
<div>
<div className="text-center sm:flex lg:block items-center gap-4 mb-12 sm:mb-4 lg:mb-12">
<Text as="h6" className="sm:mb-0 lg:mb-2">
{plan.name}
</Text>
{isFree ? (
<Text as="h4" className="text-default sm:mb-0 lg:mb-2">
{plan.price}
</Text>
) : (
<Text
as="h4"
className="text-default mb-12 sm:mb-0 lg:mb-12 flex items-center gap-2 justify-center"
>
{plan.price}
<span className="text-xs font-normal">/ month</span>
</Text>
)}
</div>
<ul className="list-none ps-0 w-max sm:w-auto lg:w-max mx-auto sm:columns-2 lg:columns-1">
{features.map((feature, index) =>
index < plan.included ? (
<li
key={feature}
className="flex items-center gap-1 py-1.25"
>
<Check className="size-3.5 text-success" />
{feature}
</li>
) : (
<li
key={feature}
className="flex items-center gap-1 py-1.25 text-subtle"
>
<Minus className="size-3.5" />
{feature}
</li>
),
)}
</ul>
<Button variant={plan.variant} className="w-full mt-9">
{plan.cta}
</Button>
</div>
</div>
</Card.Body>
</Card>
);
})}
</div>
</div>
);
}"use client";
import { Check } from "lucide-react";
import { Badge, Button, Card, Switch, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const plans = [
{
name: "Single",
description: "For teams that need to create project plans with confidence.",
price: "$0",
cta: "Start Free Trial",
variant: "outline",
cardClassName: "bg-default",
dividerClassName: "border-subtle",
featuresTitle: "Track team projects with free:",
features: [
{ label: "Timeline" },
{ label: "Advanced Search" },
{ label: "Custom fields", badge: "New", badgeColor: "success" },
{ label: "Task dependencies" },
{ label: "Private teams & projects" },
],
moreLink: "More about single",
},
{
name: "Business",
description:
"For teams and companies that need to manage work across initiatives.",
price: "$29",
cta: "Get Business",
variant: "filled",
cardClassName: "bg-primary-lighter",
dividerClassName: "border-primary-light",
featuresTitle: "Everything in Premium, plus:",
features: [
{ label: "Portfolios" },
{ label: "Lock custom fields" },
{ label: "Onboarding plan" },
{ label: "Resource Management" },
{ label: "Lock custom fields" },
],
moreLink: "More about Business",
},
{
name: "Extended",
description: "For organizations that need additional security and support.",
price: "$99",
cta: "Purchase",
variant: "outline",
cardClassName: "bg-default",
dividerClassName: "border-subtle",
featuresTitle: "Everything in Business, plus:",
features: [
{ label: "Portfolios" },
{ label: "Tags", badge: "Coming Soon", badgeColor: "primary" },
{ label: "Onboarding plan" },
{ label: "Resource Management" },
],
moreLink: "More about Extended",
},
] as const;
export default function Pricing2() {
return (
<Card className="border-0 bg-default p-6">
<Card.Header className="border-subtle px-0 flex justify-between items-center">
<Text as="h6" size="base" fontWeight="semibold">
Billed Annually
</Text>
<div className="form-check form-switch">
<label className="form-check-label" htmlFor="pricingSwitch2">
Monthly
</label>
<Switch id="pricingSwitch2" />
<label className="form-check-label" htmlFor="pricingSwitch2">
Yearly
</label>
</div>
</Card.Header>
<Card.Body className="p-0">
<div className="grid lg:grid-cols-3">
{plans.map((plan) => (
<Card
key={plan.name}
className={cn(
"border-0 rounded-none max-w-130 w-full mx-auto",
plan.cardClassName,
)}
>
<Card.Body className="p-6">
<div
className={cn(
"border-b text-center pb-6 mb-6",
plan.dividerClassName,
)}
>
<Text as="h5" fontWeight="medium" className="text-default">
{plan.name}
</Text>
<Text>{plan.description}</Text>
<Text as="h4" className="my-6">
{plan.price}
<span className="text-sm font-normal">/ month</span>
</Text>
<Button variant={plan.variant}>{plan.cta}</Button>
</div>
<Text
as="h6"
size="base"
fontWeight="semibold"
className="text-default mb-3"
>
{plan.featuresTitle}
</Text>
<ul className="list-none ps-0">
{plan.features.map((feature, index) => (
<li
key={index}
className="text-base flex items-center py-1 gap-2"
>
<Check className="size-4.5 text-success" />
{feature.label}
{"badge" in feature && (
<Badge variant="subtle" color={feature.badgeColor}>
{feature.badge}
</Badge>
)}
</li>
))}
</ul>
<a className="text-base no-underline" href="#">
{plan.moreLink}
</a>
</Card.Body>
</Card>
))}
</div>
</Card.Body>
<Card.Footer className="text-center py-6 border-t border-subtle">
<Text as="h6" fontWeight="semibold">
Looking for personal or small team task management?
</Text>
<Text size="base">Try the basic version of Hummingbird</Text>
</Card.Footer>
</Card>
);
}"use client";
import { Check, Minus } from "lucide-react";
import { Badge, Button, Card, Switch, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const plans = [
{
name: "Starter",
description:
"Perfect for individuals and hobbyists starting their journey.",
price: "$0",
period: "/ forever",
featuresTitle: "What's included:",
features: [
"Up to 1,000 leads",
"Basic email support",
"Standard integrations",
],
excluded: ["Custom branding", "Advanced analytics"],
cta: "Get Started",
popular: false,
},
{
name: "Professional",
description:
"Everything you need to automate workflows and scale your team.",
price: "$19",
period: "/ month",
featuresTitle: "Everything in Starter, plus:",
features: [
"Unlimited leads & contacts",
"Remove branding",
"Advanced email automation",
"Custom fields, forms & tracking",
"Priority 24/7 support",
],
excluded: [],
cta: "Start free trial",
popular: true,
},
{
name: "Enterprise",
description: "Dedicated power and security for large-scale operations.",
price: "$49",
period: "/ month",
featuresTitle: "Everything in Pro, plus:",
features: [
"Dedicated account manager",
"Custom SLAs & reporting",
"Advanced security options (SSO)",
"Unlimited data & export",
"Early access to new features",
],
excluded: [],
cta: "Contact Sales",
popular: false,
},
];
export default function Pricing3() {
return (
<div className="max-w-7xl mx-auto py-10 px-6">
<div className="text-center max-w-3xl mx-auto mb-16">
<Badge variant="subtle" className="mb-4 px-4">
Pricing that scales with you
</Badge>
<Text as="h3" className="mb-4 text-default">
Simple, transparent pricing. No surprises.
</Text>
<Text size="lg" className="text-muted">
Start for free, then upgrade when you need more power. All plans
include standard support and core features.
</Text>
<div className="form-check form-switch justify-center mt-8">
<label className="form-check-label" htmlFor="pricingSwitch3">
Monthly
</label>
<Switch id="pricingSwitch3" defaultChecked />
<label className="form-check-label" htmlFor="pricingSwitch3">
Annually
</label>
</div>
</div>
<div className="grid lg:grid-cols-3 mt-8 items-stretch gap-8">
{plans.map((plan) => (
<Card
key={plan.name}
className={cn(
"rounded-4xl max-w-103 w-full mx-auto",
plan.popular
? "bg-subtle border border-primary relative"
: "bg-default",
)}
>
{plan.popular && (
<div className="absolute top-0 inset-x-0 flex justify-center -translate-y-1/2">
<Badge size="lg">Most Popular</Badge>
</div>
)}
<Card.Body className="p-10 flex flex-col h-full">
<Text
as="h6"
className={plan.popular ? "text-primary mt-2" : undefined}
>
{plan.name}
</Text>
<Text size="sm" className="text-muted mb-6">
{plan.description}
</Text>
<Text
as="h4"
className="text-default mb-10 flex items-baseline gap-1"
>
{plan.price}
<span className="text-sm font-normal text-muted">
{plan.period}
</span>
</Text>
<Text size="sm" fontWeight="medium" className="text-default mb-4">
{plan.featuresTitle}
</Text>
<ul className="list-none ps-0 mb-6">
{plan.features.map((feature) => (
<li key={feature} className="flex items-center gap-2 py-1.25">
<Check className="size-4 text-primary" />
{feature}
</li>
))}
{plan.excluded.map((feature) => (
<li
key={feature}
className="flex items-center gap-2 py-1.25 text-subtle"
>
<Minus className="size-4" />
{feature}
</li>
))}
</ul>
<Button
variant={plan.popular ? "filled" : "subtle"}
className="w-full mt-auto"
>
{plan.cta}
</Button>
</Card.Body>
</Card>
))}
</div>
</div>
);
}"use client";
import { Check, File, Globe, Leaf, Star } from "lucide-react";
import { Badge, Button, Card, Switch, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const plans = [
{
name: "Basic",
description: "A great starting point for individuals and hobbyists.",
price: "$0",
featuresTitle: "Core features:",
features: ["1 Project", "Basic analytics", "Community support"],
cta: "Get Started Free",
color: "info",
checkClassName: "text-info",
cardClassName: "from-info/5",
icon: Leaf,
iconClassName: "-top-4 right-0 text-info",
popular: false,
},
{
name: "Starter",
description: "For small teams that need more power and coordination.",
price: "$12",
featuresTitle: "Everything in Basic, plus:",
features: [
"Up to 10 Projects",
"Advanced analytics",
"Priority email support",
],
cta: "Subscribe Now",
color: "info",
checkClassName: "text-info",
cardClassName: "from-info/10",
icon: File,
iconClassName: "top-4 right-0 text-info",
popular: false,
},
{
name: "Professional",
description: "Designed for growing businesses with complex needs.",
price: "$39",
featuresTitle: "Everything in Starter, plus:",
features: [
"Unlimited Projects",
"Remove branding",
"Custom integrations & API",
"24/7 Phone support",
],
cta: "Start 14-day trial",
color: "primary",
checkClassName: "text-primary",
cardClassName: "from-primary/10 border-primary",
icon: Star,
iconClassName: "top-4 right-6 text-primary",
popular: true,
},
{
name: "Enterprise",
description: "Dedicated power and security for large-scale operations.",
price: "$99",
featuresTitle: "Everything in Pro, plus:",
features: [
"Dedicated account manager",
"Custom SLAs & reporting",
"Advanced security options (SSO)",
"Unlimited data & export",
],
cta: "Contact Sales",
color: "info",
checkClassName: "text-info",
cardClassName: "from-info/5",
icon: Globe,
iconClassName: "top-4 right-4 text-info",
popular: false,
},
] as const;
export default function Pricing4() {
return (
<div className="max-w-7xl mx-auto py-10 px-6">
<div className="text-center max-w-2xl mx-auto mb-16">
<Badge variant="subtle" color="info" className="mb-4 px-4">
Flexible Plans
</Badge>
<Text as="h3" className="mb-4 text-default">
Plans tailored for every team size
</Text>
<Text size="lg" className="text-muted">
Whether you're a soaring startup or an established enterprise, we
have a plan perfectly suited to match your scale.
</Text>
<div className="form-check form-switch justify-center mt-8">
<label className="form-check-label" htmlFor="pricingSwitch4">
Monthly
</label>
<Switch id="pricingSwitch4" defaultChecked />
<label className="form-check-label" htmlFor="pricingSwitch4">
Annually
</label>
</div>
</div>
<div className="grid md:grid-cols-2 gap-8 items-stretch mt-12">
{plans.map((plan) => {
const Icon = plan.icon;
return (
<Card
key={plan.name}
className={cn(
"bg-linear-to-b to-transparent rounded-4xl relative",
plan.cardClassName,
)}
>
<div className="absolute inset-0 overflow-hidden pointer-events-none rounded-4xl">
<Icon
fill="currentColor"
className={cn(
"absolute size-40 opacity-[0.04]",
plan.iconClassName,
)}
/>
</div>
{plan.popular && (
<div className="absolute top-0 inset-x-0 flex justify-center -translate-y-1/2 z-20">
<Badge size="lg">Most Popular</Badge>
</div>
)}
<Card.Body className="p-8 sm:p-10 flex flex-col h-full">
<Text
as="h6"
className={plan.popular ? "text-primary mt-2" : undefined}
>
{plan.name}
</Text>
<Text size="sm" className="text-muted mb-6">
{plan.description}
</Text>
<Text
as="h4"
className="text-default mb-8 flex items-baseline gap-1"
>
{plan.price}
<span className="text-sm font-normal text-muted">
/ month
</span>
</Text>
<Text
size="sm"
fontWeight="medium"
className="text-default mb-4"
>
{plan.featuresTitle}
</Text>
<ul className="list-none ps-0 mb-6">
{plan.features.map((feature) => (
<li
key={feature}
className="flex items-center gap-2 py-1.25"
>
<Check className={cn("size-4", plan.checkClassName)} />
{feature}
</li>
))}
</ul>
<Button
variant={plan.popular ? "filled" : "subtle"}
color={plan.color}
className="w-full mt-auto"
>
{plan.cta}
</Button>
</Card.Body>
</Card>
);
})}
</div>
</div>
);
}"use client";
import { Fragment } from "react";
import { Check } from "lucide-react";
import { Badge, Button, Table, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
type Value = string | boolean;
const sections: {
title: string;
rows: {
feature: string;
values: [Value, Value, Value];
highlight?: number;
}[];
}[] = [
{
title: "Core Platform",
rows: [
{ feature: "Active Projects", values: ["10", "100", "Unlimited"] },
{ feature: "Team Members", values: ["Up to 5", "Up to 50", "Unlimited"] },
{ feature: "File Storage", values: ["5GB", "100GB", "Custom Limits"] },
],
},
{
title: "Analytics & Reporting",
rows: [
{
feature: "Historical Data",
values: ["30 days", "1 year", "Unlimited"],
},
{ feature: "Custom Dashboards", values: [false, true, true] },
{ feature: "Scheduled Reports", values: [false, false, true] },
],
},
{
title: "Support & Security",
rows: [
{
feature: "Customer Support",
values: [
"Email only",
"Priority Email & Chat",
"24/7 Dedicated Support",
],
highlight: 2,
},
{ feature: "Single Sign-On (SSO)", values: [false, false, true] },
],
},
];
function renderValue(value: Value) {
if (value === true) {
return <Check className="size-5 text-success mx-auto" />;
}
return value === false ? "—" : value;
}
export default function Pricing5() {
return (
<div className="max-w-7xl mx-auto py-16 px-6">
<div className="text-center max-w-2xl mx-auto mb-16">
<Badge variant="subtle" className="mb-4 px-2 py-1">
Feature Match
</Badge>
<Text as="h3" className="mb-4 text-default">
Compare all features
</Text>
<Text size="lg" className="text-muted">
A detailed features comparison to help you choose the best plan for
your team.
</Text>
</div>
<div className="overflow-x-auto">
<Table>
<Table.Header>
<Table.Row className="bg-subtle">
<Table.Head className="w-1/4 p-6 align-bottom border-0 z-10">
<Text as="h4" className="text-default mb-2">
Plans
</Text>
<Text
size="sm"
fontWeight="normal"
className="text-muted mb-0 text-nowrap"
>
See what's included at each tier.
</Text>
</Table.Head>
<Table.Head className="w-1/4 p-6 text-center align-bottom border-0 min-w-50">
<Text as="h6" size="sm" className="text-muted mb-2">
Starter
</Text>
<Text as="h5" fontWeight="bold" className="text-default mb-6">
$29
<span className="text-sm text-muted font-normal">/mo</span>
</Text>
<Button variant="subtle" size="sm" className="w-full">
Choose Starter
</Button>
</Table.Head>
<Table.Head className="w-1/4 p-6 text-center align-bottom border-0 min-w-50">
<div className="inline-flex mb-2 items-center gap-2">
<Text as="h6" size="sm" className="text-primary mb-0">
Professional
</Text>
<Badge>Popular</Badge>
</div>
<Text as="h5" fontWeight="bold" className="text-default mb-6">
$99
<span className="text-sm text-muted font-normal">/mo</span>
</Text>
<Button size="sm" className="w-full shadow-sm">
Upgrade to Pro
</Button>
</Table.Head>
<Table.Head className="w-1/4 p-6 text-center align-bottom border-0 min-w-50">
<Text as="h6" size="sm" className="text-muted mb-2">
Enterprise
</Text>
<Text
as="h5"
fontWeight="bold"
className="text-default mb-6 hover:text-primary transition-colors"
>
Custom
</Text>
<Button variant="subtle" size="sm" className="w-full">
Contact Sales
</Button>
</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{sections.map((section) => (
<Fragment key={section.title}>
<Table.Row>
<Table.Cell colSpan={4} className="font-bold text-default">
{section.title}
</Table.Cell>
</Table.Row>
{section.rows.map((row) => (
<Table.Row key={row.feature}>
<Table.Cell>{row.feature}</Table.Cell>
{row.values.map((value, index) => (
<Table.Cell
key={index}
className={cn(
"text-center",
index === row.highlight && "font-medium text-primary",
)}
>
{renderValue(value)}
</Table.Cell>
))}
</Table.Row>
))}
</Fragment>
))}
</Table.Body>
</Table>
</div>
</div>
);
}