Academycomponents

Pricing card component

This lesson covers the creation of a more complex and fully responsive Pricing Card component using shadcn/ui styles.

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.

24 of 45