Pricing 02
Pricing 02 is a React and Tailwind CSS layout component from Eldora UI, licensed MIT. Copy it and paste it into your project.
Eldora UI
MIT
layout
What it is
Pricing 02 is a React and Tailwind CSS layout component from Eldora UI, licensed MIT. Copy it and paste it into your project.
How to use it
Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.
Five free copies a month. No card.
Needs
npm i motion/react
Licence
This component comes from Eldora UI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.
Pricing 02
import PricingTable from "@/registry/blocks/pricing-02/components/pricing-table"
export default function Page() {
return (
<div className="relative mx-auto max-w-7xl border-x">
<PricingTable />
</div>
)
}
import { forwardRef } from "react"
import NextLink, { type LinkProps } from "next/link"
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react"
import * as Headless from "@headlessui/react"
import {
CheckIcon,
ChevronUpDownIcon,
MinusIcon,
} from "@heroicons/react/16/solid"
import { Button } from "@/components/ui/button"
import { Container } from "./container"
import { Subheading } from "./text"
const Link = forwardRef(function Link(
props: LinkProps & React.ComponentPropsWithoutRef<"a">,
ref: React.ForwardedRef<HTMLAnchorElement>
) {
return (
<Headless.DataInteractive>
<NextLink ref={ref} {...props} />
</Headless.DataInteractive>
)
})
const tiers = [
{
name: "Starter" as const,
slug: "starter",
description: "Everything you need to start selling.",
priceMonthly: 99,
href: "#",
highlights: [
{ description: "Up to 3 team members" },
{ description: "Up to 5 deal progress boards" },
{ description: "Source leads from select platforms" },
{ description: "RadiantAI integrations", disabled: true },
{ description: "Competitor analysis", disabled: true },
],
features: [
{ section: "Features", name: "Accounts", value: 3 },
{ section: "Features", name: "Deal progress boards", value: 5 },
{ section: "Features", name: "Sourcing platforms", value: "Select" },
{ section: "Features", name: "Contacts", value: 100 },
{ section: "Features", name: "AI assisted outreach", value: false },
{ section: "Analysis", name: "Competitor analysis", value: false },
{ section: "Analysis", name: "Dashboard reporting", value: false },
{ section: "Analysis", name: "Community insights", value: false },
{ section: "Analysis", name: "Performance analysis", value: false },
{ section: "Support", name: "Email support", value: true },
{ section: "Support", name: "24 / 7 call center support", value: false },
{ section: "Support", name: "Dedicated account manager", value: false },
],
},
{
name: "Growth" as const,
slug: "growth",
description: "All the extras for your growing team.",
priceMonthly: 149,
href: "#",
highlights: [
{ description: "Up to 10 team members" },
{ description: "Unlimited deal progress boards" },
{ description: "Source leads from over 50 verified platforms" },
{ description: "RadiantAI integrations" },
{ description: "5 competitor analyses per month" },
],
features: [
{ section: "Features", name: "Accounts", value: 10 },
{ section: "Features", name: "Deal progress boards", value: "Unlimited" },
{ section: "Features", name: "Sourcing platforms", value: "100+" },
{ section: "Features", name: "Contacts", value: 1000 },
{ section: "Features", name: "AI assisted outreach", value: true },
{ section: "Analysis", name: "Competitor analysis", value: "5 / month" },
{ section: "Analysis", name: "Dashboard reporting", value: true },
{ section: "Analysis", name: "Community insights", value: true },
{ section: "Analysis", name: "Performance analysis", value: true },
{ section: "Support", name: "Email support", value: true },
{ section: "Support", name: "24 / 7 call center support", value: true },
{ section: "Support", name: "Dedicated account manager", value: false },
],
},
{
name: "Enterprise" as const,
slug: "enterprise",
description: "Added flexibility to close deals at scale.",
priceMonthly: 299,
href: "#",
highlights: [
{ description: "Unlimited active team members" },
{ description: "Unlimited deal progress boards" },
{ description: "Source leads from over 100 verified platforms" },
{ description: "RadiantAI integrations" },
{ description: "Unlimited competitor analyses" },
],
features: [
{ section: "Features", name: "Accounts", value: "Unlimited" },
{ section: "Features", name: "Deal progress boards", value: "Unlimited" },
{ section: "Features", name: "Sourcing platforms", value: "100+" },
{ section: "Features", name: "Contacts", value: "Unlimited" },
{ section: "Features", name: "AI assisted outreach", value: true },
{ section: "Analysis", name: "Competitor analysis", value: "Unlimited" },
{ section: "Analysis", name: "Dashboard reporting", value: true },
{ section: "Analysis", name: "Community insights", value: true },
{ section: "Analysis", name: "Performance analysis", value: true },
{ section: "Support", name: "Email support", value: true },
{ section: "Support", name: "24 / 7 call center support", value: true },
{ section: "Support", name: "Dedicated account manager", value: true },
],
},
]
export default function PricingTable() {
const selectedTier = tiers[0]
return (
<Container className="py-24">
<table className="w-full text-left">
<caption className="sr-only">Pricing plan comparison</caption>
<colgroup>
<col className="w-3/5 sm:w-2/5" />
<col
data-selected={selectedTier === tiers[0] ? true : undefined}
className="w-2/5 data-selected:table-column max-sm:hidden sm:w-1/5"
/>
<col
data-selected={selectedTier === tiers[1] ? true : undefined}
className="w-2/5 data-selected:table-column max-sm:hidden sm:w-1/5"
/>
<col
data-selected={selectedTier === tiers[2] ? true : undefined}
className="w-2/5 data-selected:table-column max-sm:hidden sm:w-1/5"
/>
</colgroup>
<thead>
<tr className="max-sm:hidden">
<td className="p-0" />
{tiers.map((tier) => (
<th
key={tier.slug}
scope="col"
data-selected={selectedTier === tier ? true : undefined}
className="p-0 data-selected:table-cell max-sm:hidden"
>
<Subheading as="div">{tier.name}</Subheading>
</th>
))}
</tr>
<tr className="sm:hidden">
<td className="p-0">
<div className="relative inline-block">
<Menu>
<MenuButton className="text-foreground flex items-center justify-between gap-2 font-medium">
{selectedTier.name}
<ChevronUpDownIcon className="fill-foreground size-4" />
</MenuButton>
<MenuItems
anchor="bottom start"
className="ring-border min-w-(--button-width) rounded-lg bg-white p-1 shadow-lg ring-1 [--anchor-gap:6px] [--anchor-offset:-4px] [--anchor-padding:10px] dark:bg-[#3F3F46]"
>
{tiers.map((tier) => (
<MenuItem key={tier.slug}>
<Link
scroll={false}
href={`/pricing?tier=${tier.slug}`}
data-selected={
tier === selectedTier ? true : undefined
}
className="group data-focus:bg-muted flex items-center gap-2 rounded-md px-2 py-1"
>
{tier.name}
<CheckIcon className="hidden size-4 group-data-selected:block" />
</Link>
</MenuItem>
))}
</MenuItems>
</Menu>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center">
<ChevronUpDownIcon className="fill-foreground size-4" />
</div>
</div>
</td>
<td colSpan={3} className="p-0 text-right">
<Button variant="outline">Get started</Button>
</td>
</tr>
<tr className="max-sm:hidden">
<th className="p-0" scope="row">
<span className="sr-only">Get started</span>
</th>
{tiers.map((tier) => (
<td
key={tier.slug}
data-selected={selectedTier === tier ? true : undefined}
className="px-0 pt-4 pb-0 data-selected:table-cell max-sm:hidden"
>
<Button variant="outline">Get started</Button>
</td>
))}
</tr>
</thead>
{[...new Set(tiers[0].features.map(({ section }) => section))].map(
(section) => (
<tbody key={section} className="group">
<tr>
<th
scope="colgroup"
colSpan={4}
className="px-0 pt-10 pb-0 group-first-of-type:pt-5"
>
<div className="text-primary -mx-4 rounded-lg bg-[#F3F4F6] px-4 py-3 text-sm/6 font-semibold dark:bg-[#F9FAFB]/[0.02]">
{section}
</div>
</th>
</tr>
{tiers[0].features
.filter((feature) => feature.section === section)
.map(({ name }) => (
<tr
key={name}
className="border-border border-b last:border-none dark:border-white/20"
>
<th
scope="row"
className="text-muted-foreground px-0 py-4 text-sm/6 font-normal"
>
{name}
</th>
{tiers.map((tier) => {
const value = tier.features.find(
(feature) =>
feature.section === section && feature.name === name
)?.value
return (
<td
key={tier.slug}
data-selected={
selectedTier === tier ? true : undefined
}
className="p-4 data-selected:table-cell max-sm:hidden"
>
{value === true ? (
<>
<CheckIcon className="size-4 fill-cyan-500" />
<span className="sr-only">
Included in {tier.name}
</span>
</>
) : value === false || value === undefined ? (
<>
<MinusIcon className="fill-muted-foreground size-4" />
<span className="sr-only">
Not included in {tier.name}
</span>
</>
) : (
<div className="text-sm/6">{value}</div>
)}
</td>
)
})}
</tr>
))}
</tbody>
)
)}
</table>
</Container>
)
}