Academyplugin

Pro Blocks tab

Learn how to integrate Pro Blocks from Figma into your shadcn/ui project with our plugin. This step-by-step guide will walk you through generating CLI command based on the selected Pro Blocks.

Instructions

  1. Open the Figma to shadcn/ui plugin.
  2. Go to the Pro Blocks tab within the plugin interface.
  3. Identify and select the items that have Pro Blocks in their name.
  4. Press the 'Generate CLI command' button in the plugin to create the command.
  5. Copy the generated command and paste it into your code project's terminal.
  6. Run the command to install the default Pro Blocks into your project.
  7. Adjust the installed Pro Blocks to match your design and content from Figma.

Important

Make sure to install Pro Blocks styles before installing components so each Pro Block displays properly. Use the command: npx shadcn@latest add https://pro-blocks-v4.vercel.app/r/pro-blocks-styles.json

42 of 45