Generating code for the Pricing Card component

This guide provides instructions on using Figma to shadcn/ui plugin to generate code for pricing card component we created in the components chapter.

For this lesson you need to have the Pricing Card component created in Figma that we covered in this lesson.

Instructions

Ensure you have a default and primary card variant ready. Note that the plugin requires selecting a component instance or frame, not the main component frame.
If you have a main component, use Alt (Option on Mac) to drag instances out of the main component frame.
Select the first card and rename it to "Pricing Card Default." Rename the second card to "Pricing Card Primary."
Open the plugin and select the first card, "Pricing Card Default." Add this card and press "Generate Code."
Copy the CLI command generated by the plugin.
Open your code editor, paste the CLI command into the terminal, and run it.
Check if the component renders correctly by importing the pricing card. Delete the word "default" from the export function if it's not needed.
Run the project to ensure the card is generated and responsive by default.
Repeat the steps for the primary card. Run the server to verify the new card renders properly.
Confirm that both cards are ready, responsive, and can be used in your website sections.