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
Getting started
Website Project (Lesson 1)

Website Project (Lesson 1)

Welcome to your first Practice Lesson! Each chapter in our course will include a practice lesson where you'll apply your newly acquired skills.

What We’ll Do

By the end of this course, you will have created a modern and responsive custom website, designed in Figma and coded using shadcn/ui.

Our course consists of 5 chapters, each with a practice lesson that will guide you in building your website piece by piece:

  1. Getting Started - Set up a Figma file for your website project.
  2. Theming - Customize your website's unique styling by adjusting variables.
  3. Components - Modify crucial components to fit your design.
  4. Pro Blocks - Construct your website using Pro Blocks, editing them to match your style.
  5. Plugin - Use the Figma to shadcn/ui plugin to build a fully functional website.

Let’s Get Started!

In this chapter, you learned how to import the UI kit into your Figma account drafts. Let's use that knowledge to create a file for our Website Project.

Task 1.

  1. Create a fresh copy of the shadcn/ui kit for Figma in your Figma account Drafts.
  2. Rename this file to "Website Project - ShadcnDesign Academy".

‍

That's it! You now have a fresh project to start with. In the next practice lesson, we will edit variables to customize our project styling.

Up next
Introduction to theming
You can quickly adjust the theme of the shadcn/ui components by editing variables and styles. This chapter in our Academy explains how to customize your design system effectively.