Menu
Pricing 12
<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
<div class="container max-w-xl">
<div class="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
<p class="mb-3 font-semibold md:mb-4">Tagline</p>
<h1 class="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">Pricing plan</h1>
<p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div class="h-full border border-border-primary px-6 py-8 md:p-8">
<h2 class="mb-1 text-md font-bold leading-[1.4] md:text-xl">Basic plan</h2>
<p>Lorem ipsum dolor sit amet</p>
<div class="my-8 h-px w-full bg-border-primary"></div>
<h3 class="my-2 text-6xl font-bold md:text-9xl lg:text-10xl">
$19<span class="text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl">/mo</span>
</h3>
<p>
or
<!-- -->$199<!-- -->
yearly
</p>
<div class="mt-6 md:mt-8">
<button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary bg-background-alternative text-text-alternative px-6 py-3 w-full"
title="Get started"
>
Get started
</button>
</div>
<div class="my-8 h-px w-full bg-border-primary"></div>
<div class="grid grid-cols-1 gap-y-4 py-2">
<div class="flex self-start">
<div class="mr-4 flex-none self-start">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path>
</svg>
</div>
<p>Feature text goes here</p>
</div>
<div class="flex self-start">
<div class="mr-4 flex-none self-start">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path>
</svg>
</div>
<p>Feature text goes here</p>
</div>
<div class="flex self-start">
<div class="mr-4 flex-none self-start">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path>
</svg>
</div>
<p>Feature text goes here</p>
</div>
</div>
</div>
<div class="h-full border border-border-primary px-6 py-8 md:p-8">
<h2 class="mb-1 text-md font-bold leading-[1.4] md:text-xl">Business plan</h2>
<p>Lorem ipsum dolor sit amet</p>
<div class="my-8 h-px w-full bg-border-primary"></div>
<h3 class="my-2 text-6xl font-bold md:text-9xl lg:text-10xl">
$29<span class="text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl">/mo</span>
</h3>
<p>
or
<!-- -->$299<!-- -->
yearly
</p>
<div class="mt-6 md:mt-8">
<button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary bg-background-alternative text-text-alternative px-6 py-3 w-full"
title="Get started"
>
Get started
</button>
</div>
<div class="my-8 h-px w-full bg-border-primary"></div>
<div class="grid grid-cols-1 gap-y-4 py-2">
<div class="flex self-start">
<div class="mr-4 flex-none self-start">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path>
</svg>
</div>
<p>Feature text goes here</p>
</div>
<div class="flex self-start">
<div class="mr-4 flex-none self-start">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path>
</svg>
</div>
<p>Feature text goes here</p>
</div>
<div class="flex self-start">
<div class="mr-4 flex-none self-start">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path>
</svg>
</div>
<p>Feature text goes here</p>
</div>
<div class="flex self-start">
<div class="mr-4 flex-none self-start">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path>
</svg>
</div>
<p>Feature text goes here</p>
</div>
<div class="flex self-start">
<div class="mr-4 flex-none self-start">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"
></path>
</svg>
</div>
<p>Feature text goes here</p>
</div>
</div>
</div>
</div>
</div>
</section>
"use client";
import { Button } from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { BiCheck } from "react-icons/bi";
type Feature = {
icon: React.ReactNode;
text: string;
};
type PricingPlan = {
planName: string;
description: string;
monthlyPrice: string;
yearlyPrice: string;
features: Feature[];
button: ButtonProps;
};
type Props = {
tagline: string;
heading: string;
description: string;
pricingPlans: PricingPlan[];
};
export type Pricing12Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Pricing12 = (props: Pricing12Props) => {
const { tagline, heading, description, pricingPlans } = {
...Pricing12Defaults,
...props,
};
return (
<section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
<div className="container max-w-xl">
<div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
<p className="mb-3 font-semibold md:mb-4">{tagline}</p>
<h1 className="mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">{heading}</h1>
<p className="md:text-md">{description}</p>
</div>
<div className="grid grid-cols-1 gap-8 md:grid-cols-2">
{pricingPlans.map((pricingPlan, index) => (
<PricingPlan key={index} plan={pricingPlan} />
))}
</div>
</div>
</section>
);
};
const PricingPlan = ({ plan }: { plan: PricingPlan }) => (
<div className="h-full border border-border-primary px-6 py-8 md:p-8">
<h2 className="mb-1 text-md font-bold leading-[1.4] md:text-xl">{plan.planName}</h2>
<p>{plan.description}</p>
<div className="my-8 h-px w-full bg-border-primary" />
<h3 className="my-2 text-6xl font-bold md:text-9xl lg:text-10xl">
{plan.monthlyPrice}
<span className="text-2xl font-bold md:text-3xl md:leading-[1.3] lg:text-4xl">/mo</span>
</h3>
<p>or {plan.yearlyPrice} yearly</p>
<div className="mt-6 md:mt-8">
<Button {...plan.button} className="w-full">
{plan.button.title}
</Button>
</div>
<div className="my-8 h-px w-full bg-border-primary" />
<div className="grid grid-cols-1 gap-y-4 py-2">
{plan.features.map((feature, index) => (
<div key={index} className="flex self-start">
<div className="mr-4 flex-none self-start">{feature.icon}</div>
<p>{feature.text}</p>
</div>
))}
</div>
</div>
);
export const Pricing12Defaults: Props = {
tagline: "Tagline",
heading: "Pricing plan",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
pricingPlans: [
{
planName: "Basic plan",
description: "Lorem ipsum dolor sit amet",
monthlyPrice: "$19",
yearlyPrice: "$199",
features: [
{ icon: <BiCheck className="size-6" />, text: "Feature text goes here" },
{ icon: <BiCheck className="size-6" />, text: "Feature text goes here" },
{ icon: <BiCheck className="size-6" />, text: "Feature text goes here" },
],
button: { title: "Get started" },
},
{
planName: "Business plan",
description: "Lorem ipsum dolor sit amet",
monthlyPrice: "$29",
yearlyPrice: "$299",
features: [
{ icon: <BiCheck className="size-6" />, text: "Feature text goes here" },
{ icon: <BiCheck className="size-6" />, text: "Feature text goes here" },
{ icon: <BiCheck className="size-6" />, text: "Feature text goes here" },
{ icon: <BiCheck className="size-6" />, text: "Feature text goes here" },
{ icon: <BiCheck className="size-6" />, text: "Feature text goes here" },
],
button: { title: "Get started" },
},
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
