{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-02",
  "description": "A pricing table with a dropdown menu.",
  "dependencies": [
    "motion/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing-02/page.tsx",
      "content": "import PricingTable from \"@/registry/blocks/pricing-02/components/pricing-table\"\n\nexport default function Page() {\n  return (\n    <div className=\"relative mx-auto max-w-7xl border-x\">\n      <PricingTable />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/pricing/page.tsx"
    },
    {
      "path": "registry/blocks/pricing-02/components/pricing-table.tsx",
      "content": "import { forwardRef } from \"react\"\nimport NextLink, { type LinkProps } from \"next/link\"\nimport { Menu, MenuButton, MenuItem, MenuItems } from \"@headlessui/react\"\nimport * as Headless from \"@headlessui/react\"\nimport {\n  CheckIcon,\n  ChevronUpDownIcon,\n  MinusIcon,\n} from \"@heroicons/react/16/solid\"\n\nimport { Button } from \"@/components/ui/button\"\n\nimport { Container } from \"./container\"\nimport { Subheading } from \"./text\"\n\nconst Link = forwardRef(function Link(\n  props: LinkProps & React.ComponentPropsWithoutRef<\"a\">,\n  ref: React.ForwardedRef<HTMLAnchorElement>\n) {\n  return (\n    <Headless.DataInteractive>\n      <NextLink ref={ref} {...props} />\n    </Headless.DataInteractive>\n  )\n})\nconst tiers = [\n  {\n    name: \"Starter\" as const,\n    slug: \"starter\",\n    description: \"Everything you need to start selling.\",\n    priceMonthly: 99,\n    href: \"#\",\n    highlights: [\n      { description: \"Up to 3 team members\" },\n      { description: \"Up to 5 deal progress boards\" },\n      { description: \"Source leads from select platforms\" },\n      { description: \"RadiantAI integrations\", disabled: true },\n      { description: \"Competitor analysis\", disabled: true },\n    ],\n    features: [\n      { section: \"Features\", name: \"Accounts\", value: 3 },\n      { section: \"Features\", name: \"Deal progress boards\", value: 5 },\n      { section: \"Features\", name: \"Sourcing platforms\", value: \"Select\" },\n      { section: \"Features\", name: \"Contacts\", value: 100 },\n      { section: \"Features\", name: \"AI assisted outreach\", value: false },\n      { section: \"Analysis\", name: \"Competitor analysis\", value: false },\n      { section: \"Analysis\", name: \"Dashboard reporting\", value: false },\n      { section: \"Analysis\", name: \"Community insights\", value: false },\n      { section: \"Analysis\", name: \"Performance analysis\", value: false },\n      { section: \"Support\", name: \"Email support\", value: true },\n      { section: \"Support\", name: \"24 / 7 call center support\", value: false },\n      { section: \"Support\", name: \"Dedicated account manager\", value: false },\n    ],\n  },\n  {\n    name: \"Growth\" as const,\n    slug: \"growth\",\n    description: \"All the extras for your growing team.\",\n    priceMonthly: 149,\n    href: \"#\",\n    highlights: [\n      { description: \"Up to 10 team members\" },\n      { description: \"Unlimited deal progress boards\" },\n      { description: \"Source leads from over 50 verified platforms\" },\n      { description: \"RadiantAI integrations\" },\n      { description: \"5 competitor analyses per month\" },\n    ],\n    features: [\n      { section: \"Features\", name: \"Accounts\", value: 10 },\n      { section: \"Features\", name: \"Deal progress boards\", value: \"Unlimited\" },\n      { section: \"Features\", name: \"Sourcing platforms\", value: \"100+\" },\n      { section: \"Features\", name: \"Contacts\", value: 1000 },\n      { section: \"Features\", name: \"AI assisted outreach\", value: true },\n      { section: \"Analysis\", name: \"Competitor analysis\", value: \"5 / month\" },\n      { section: \"Analysis\", name: \"Dashboard reporting\", value: true },\n      { section: \"Analysis\", name: \"Community insights\", value: true },\n      { section: \"Analysis\", name: \"Performance analysis\", value: true },\n      { section: \"Support\", name: \"Email support\", value: true },\n      { section: \"Support\", name: \"24 / 7 call center support\", value: true },\n      { section: \"Support\", name: \"Dedicated account manager\", value: false },\n    ],\n  },\n  {\n    name: \"Enterprise\" as const,\n    slug: \"enterprise\",\n    description: \"Added flexibility to close deals at scale.\",\n    priceMonthly: 299,\n    href: \"#\",\n    highlights: [\n      { description: \"Unlimited active team members\" },\n      { description: \"Unlimited deal progress boards\" },\n      { description: \"Source leads from over 100 verified platforms\" },\n      { description: \"RadiantAI integrations\" },\n      { description: \"Unlimited competitor analyses\" },\n    ],\n    features: [\n      { section: \"Features\", name: \"Accounts\", value: \"Unlimited\" },\n      { section: \"Features\", name: \"Deal progress boards\", value: \"Unlimited\" },\n      { section: \"Features\", name: \"Sourcing platforms\", value: \"100+\" },\n      { section: \"Features\", name: \"Contacts\", value: \"Unlimited\" },\n      { section: \"Features\", name: \"AI assisted outreach\", value: true },\n      { section: \"Analysis\", name: \"Competitor analysis\", value: \"Unlimited\" },\n      { section: \"Analysis\", name: \"Dashboard reporting\", value: true },\n      { section: \"Analysis\", name: \"Community insights\", value: true },\n      { section: \"Analysis\", name: \"Performance analysis\", value: true },\n      { section: \"Support\", name: \"Email support\", value: true },\n      { section: \"Support\", name: \"24 / 7 call center support\", value: true },\n      { section: \"Support\", name: \"Dedicated account manager\", value: true },\n    ],\n  },\n]\n\nexport default function PricingTable() {\n  const selectedTier = tiers[0]\n  return (\n    <Container className=\"py-24\">\n      <table className=\"w-full text-left\">\n        <caption className=\"sr-only\">Pricing plan comparison</caption>\n        <colgroup>\n          <col className=\"w-3/5 sm:w-2/5\" />\n          <col\n            data-selected={selectedTier === tiers[0] ? true : undefined}\n            className=\"w-2/5 data-selected:table-column max-sm:hidden sm:w-1/5\"\n          />\n          <col\n            data-selected={selectedTier === tiers[1] ? true : undefined}\n            className=\"w-2/5 data-selected:table-column max-sm:hidden sm:w-1/5\"\n          />\n          <col\n            data-selected={selectedTier === tiers[2] ? true : undefined}\n            className=\"w-2/5 data-selected:table-column max-sm:hidden sm:w-1/5\"\n          />\n        </colgroup>\n        <thead>\n          <tr className=\"max-sm:hidden\">\n            <td className=\"p-0\" />\n            {tiers.map((tier) => (\n              <th\n                key={tier.slug}\n                scope=\"col\"\n                data-selected={selectedTier === tier ? true : undefined}\n                className=\"p-0 data-selected:table-cell max-sm:hidden\"\n              >\n                <Subheading as=\"div\">{tier.name}</Subheading>\n              </th>\n            ))}\n          </tr>\n          <tr className=\"sm:hidden\">\n            <td className=\"p-0\">\n              <div className=\"relative inline-block\">\n                <Menu>\n                  <MenuButton className=\"text-foreground flex items-center justify-between gap-2 font-medium\">\n                    {selectedTier.name}\n                    <ChevronUpDownIcon className=\"fill-foreground size-4\" />\n                  </MenuButton>\n                  <MenuItems\n                    anchor=\"bottom start\"\n                    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]\"\n                  >\n                    {tiers.map((tier) => (\n                      <MenuItem key={tier.slug}>\n                        <Link\n                          scroll={false}\n                          href={`/pricing?tier=${tier.slug}`}\n                          data-selected={\n                            tier === selectedTier ? true : undefined\n                          }\n                          className=\"group data-focus:bg-muted flex items-center gap-2 rounded-md px-2 py-1\"\n                        >\n                          {tier.name}\n                          <CheckIcon className=\"hidden size-4 group-data-selected:block\" />\n                        </Link>\n                      </MenuItem>\n                    ))}\n                  </MenuItems>\n                </Menu>\n                <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center\">\n                  <ChevronUpDownIcon className=\"fill-foreground size-4\" />\n                </div>\n              </div>\n            </td>\n            <td colSpan={3} className=\"p-0 text-right\">\n              <Button variant=\"outline\">Get started</Button>\n            </td>\n          </tr>\n          <tr className=\"max-sm:hidden\">\n            <th className=\"p-0\" scope=\"row\">\n              <span className=\"sr-only\">Get started</span>\n            </th>\n            {tiers.map((tier) => (\n              <td\n                key={tier.slug}\n                data-selected={selectedTier === tier ? true : undefined}\n                className=\"px-0 pt-4 pb-0 data-selected:table-cell max-sm:hidden\"\n              >\n                <Button variant=\"outline\">Get started</Button>\n              </td>\n            ))}\n          </tr>\n        </thead>\n        {[...new Set(tiers[0].features.map(({ section }) => section))].map(\n          (section) => (\n            <tbody key={section} className=\"group\">\n              <tr>\n                <th\n                  scope=\"colgroup\"\n                  colSpan={4}\n                  className=\"px-0 pt-10 pb-0 group-first-of-type:pt-5\"\n                >\n                  <div className=\"text-primary -mx-4 rounded-lg bg-[#F3F4F6] px-4 py-3 text-sm/6 font-semibold dark:bg-[#F9FAFB]/[0.02]\">\n                    {section}\n                  </div>\n                </th>\n              </tr>\n              {tiers[0].features\n                .filter((feature) => feature.section === section)\n                .map(({ name }) => (\n                  <tr\n                    key={name}\n                    className=\"border-border border-b last:border-none dark:border-white/20\"\n                  >\n                    <th\n                      scope=\"row\"\n                      className=\"text-muted-foreground px-0 py-4 text-sm/6 font-normal\"\n                    >\n                      {name}\n                    </th>\n                    {tiers.map((tier) => {\n                      const value = tier.features.find(\n                        (feature) =>\n                          feature.section === section && feature.name === name\n                      )?.value\n\n                      return (\n                        <td\n                          key={tier.slug}\n                          data-selected={\n                            selectedTier === tier ? true : undefined\n                          }\n                          className=\"p-4 data-selected:table-cell max-sm:hidden\"\n                        >\n                          {value === true ? (\n                            <>\n                              <CheckIcon className=\"size-4 fill-cyan-500\" />\n                              <span className=\"sr-only\">\n                                Included in {tier.name}\n                              </span>\n                            </>\n                          ) : value === false || value === undefined ? (\n                            <>\n                              <MinusIcon className=\"fill-muted-foreground size-4\" />\n                              <span className=\"sr-only\">\n                                Not included in {tier.name}\n                              </span>\n                            </>\n                          ) : (\n                            <div className=\"text-sm/6\">{value}</div>\n                          )}\n                        </td>\n                      )\n                    })}\n                  </tr>\n                ))}\n            </tbody>\n          )\n        )}\n      </table>\n    </Container>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}