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
Introduction to plugin

Introduction to plugin

In this chapter, you will learn how to efficiently set up and use our plugin.

Introduction

This chapter provides a complete guide to setting up and using the Figma to shadcn/ui plugin, an AI-powered tool that transforms your Figma designs into production-ready React components.

You'll learn how to configure your license and API keys, set up billing with Google AI Studio or Anthropic AI, and follow design best practices to ensure optimal code generation. The chapter covers everything from initial setup through the actual code generation process, helping you streamline your design-to-development workflow.

By the end of this chapter, you'll be able to efficiently convert your Figma designs into clean, responsive shadcn/ui components with just a few clicks.

Up next
License key
In order to use our plugin without limitations you need an active license key. This short guide explains how to get the license key from your Lemon Squeezy account.