Pricing Table

1"use client"
2import {
3  PricingTable,
4  PricingTableCard,
5  PricingTableCardSlot,
6  PricingTableCardBadge,
7  PricingTableCardButton,
8  PricingTableCardContent,
9  PricingTableCardDescription,
10  PricingTableCardFooter,
11  PricingTableCardHeader,
12  PricingTableCardList,
13  PricingTableCardListIcon,
14  PricingTableCardListItem,
15  PricingTableCardListText,
16  PricingTableCardPrice,
17  PricingTableCardTitle,
18  PricingTableGrid,
19  PricingTableSwitch,
20  PricingTableSwitchGroup,
21  PricingTableSwitchItem,
22} from "@/registry/default/ui/pricing-table"
23import { BadgeCheck } from "lucide-react"
24 
25export function ExamplePricingTable01() {
26  return (
27    <PricingTable>
28      <PricingTableSwitchGroup>
29        <PricingTableSwitchItem value="monthly">Monthly</PricingTableSwitchItem>
30        <PricingTableSwitch />
31        <PricingTableSwitchItem value="yearly">
32          Yearly 20% off
33        </PricingTableSwitchItem>
34      </PricingTableSwitchGroup>
35      <PricingTableGrid>
36        <PricingTableCard>
37          <PricingTableCardHeader>
38            <PricingTableCardTitle>Basic</PricingTableCardTitle>
39            <PricingTableCardDescription>
40              Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis,
41              impedit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
42            </PricingTableCardDescription>
43            <PricingTableCardSlot>
44              <PricingTableCardPrice monthly={25} yearly={20} suffix="/mo" />
45            </PricingTableCardSlot>
46          </PricingTableCardHeader>
47          <PricingTableCardContent>
48            <PricingTableCardList>
49              {Array.from({ length: 3 }).map((_, index) => (
50                <PricingTableCardListItem key={index}>
51                  <PricingTableCardListIcon>
52                    <BadgeCheck />
53                  </PricingTableCardListIcon>
54                  <PricingTableCardListText>
55                    Lorem ipsum dolor sit amet.
56                  </PricingTableCardListText>
57                </PricingTableCardListItem>
58              ))}
59            </PricingTableCardList>
60          </PricingTableCardContent>
61          <PricingTableCardFooter>
62            <PricingTableCardButton>Subscribe to Basic</PricingTableCardButton>
63          </PricingTableCardFooter>
64        </PricingTableCard>
65        <PricingTableCard highlight>
66          <PricingTableCardBadge>Popular</PricingTableCardBadge>
67          <PricingTableCardHeader>
68            <PricingTableCardTitle>Pro</PricingTableCardTitle>
69// … truncated