Getting started
Welcome to the Academy!
What is shadcn/ui?
Getting started in Figma
Website Project (Lesson 1)
Theming
Introduction to theming
Primary color - Method 1. Tailwind CSS
Primary color - Method 2. Custom color
Neutral colors
Font family
Border radius
Creating new color variables
Example - Warning color variables
Creating new themes
Creating new typography styles
Dark mode
Website Project (Lesson 2)
Components
Introduction to components
Editing components
Creating new component variants
Creating new components
Adding custom icons - Method 1. Icon components
Adding custom icons - Method 2. Icon library
Working with the card component
Pricing card component
Website Project (Lesson 3)
Pro Blocks
Introduction to Pro Blocks
Simple landing page
Custom variables collection
Section Title component
Image properties
Pricing section block
Website Project (Lesson 4)
Plugin
Introduction to plugin
License key
API keys & Tokens
Google AI Studio
Anthropic AI
Best practices
Generating code
Exporting variables
Pro Blocks tab
Installing shadcn/ui
Generating code for the Pricing Card component
Website Project (Lesson 5)
Academy
Plugin
Pro Blocks tab

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

Up next
Installing shadcn/ui
This guide provides step-by-step instructions on how to install Shadcn into a NextJS project. It covers the installation of the Shadcn library and its components, ensuring you can start using them in your project.