Pricing card component

Creating card component

1. Add a text element.
2. Apply the text-lg/semibold typography style and set text color to base/foreground.
3. Add a Description below the title.
4. Use text-sm/normal style and base/muted-foreground color.
5. Paste your content using Paste and Match Style.
6. Select both text elements and press Shift + A to create an auto-layout frame.
7. Name this frame Flex Vertical and apply a spacing-1 gap.
8. Duplicate this frame using Alt and move it to the bottom.
9. Update the text and change the top text style to text-2xl/semibold.
10. Update the price description below with text-sm/normal style and base/muted-foreground color.
11. Group the top and price blocks into a new Flex Vertical frame.
12. Start building a list using a check icon and text.
13. Set icon size to w-5 and h-5.
14. Apply base/muted-foreground color to the text.
15. Wrap icon and text in a frame with spacing-2 gap and name it List Item.
16. Duplicate List Item to create a full list.
17. Wrap the list in a frame with spacing-4 gap.
18. Select all icons and apply base/primary color.
19. Combine the top content block and list in one frame with spacing-6 gap.
20. Ensure left group has Fill set for height.
21. Add an Outline Button from Assets.
22. Wrap all elements in a final container frame.
23. Set width to Fill and apply 24px padding and spacing.
24. Set background to base/card, border to base/border, rounded-2xl radius.
25. Update button text and name the component Pricing Card.
26. Create a component from it and add a Mobile variant.
27. In the Mobile version, change layout to vertical, height to Hug, width to 360px, and spacing to spacing-3.
28. Group both variants under Breakpoint as Desktop and Mobile.
29. Duplicate the component with Alt + Shift to create a new Type variant.
30. Change background and border to base/primary, update text colors, reduce description opacity to 80%.
31. Change the button to Secondary and name the new variant Primary.
32. Open Propstar plugin and generate a property table.
33. Your component is now complete and production-ready.

Creating pricing section

Now, when you have both card components created you can easily use them within Pro Blocks to create your unique sections. Follow the guide below to create a pricing section that will use the new cards.

1. Install Pro Blocks styles: npx shadcn@latest add https://pro-blocks-v4.vercel.app/r/pro-blocks-styles.json
2. Install the Empty Landing Page section: npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=empty-lp-section-2&key=YOUR_LICENSE_KEY"
3. Duplicate the empty-lp-section-2.tsx file.
4. Rename it to custom-pricing-section.tsx.
5. Rename the function EmptyLpSection2() to CustomPricingSection().
6. Change the section title and paragraph to match our design in Figma.
7. Import your new cards.
8. Replace the placeholder div with a div containing your cards:

<div className="flex flex-col gap-4 lg:flex-row lg:gap-6">
  <PricingCardDefault />
  <PricingCardPrimary />
</div>

‍

That's it! Our new pricing section is responsive and ready to use.