Academy·theming

Creating new color variables

In this lesson, you will learn to enhance your styling by adding custom variables.

11 of 45

Menu

Home Preview Pricing

Products

Figma Kit Pro Blocks Figma Plugin Templates Themes

Resources

Docs Academy Blog Roadmap Help & Contact

Legal

Licensing Agreement Terms & Conditions Privacy Policy Cookies

Components

Accordion Alert Alert Dialog Aspect Ratio Avatar Badge Breadcrumb Button Button Group Calendar Card Carousel Chart Checkbox Collapsible Combobox Command Context Menu Data Table Date Picker Dialog Drawer Dropdown Menu Empty Field Form Hover Card Input Input Group Input OTP Item Kbd Label Menubar Navigation Menu Pagination Popover Progress Radio Group Resizable Scroll-area Select Separator Sheet Sidebar Skeleton Slider Sonner Spinner Switch Table Tabs Textarea Toggle Toggle Group Tooltip Typography

Landing Page Blocks

404 Sections Banners Bento Grids Blog Sections CTA Sections Comparison Sections Contact Sections Empty LP Sections FAQ Sections Feature Sections Footers Gallery Sections Header Sections Hero Sections LP Navbars Landing Page Examples Logo Sections Patterns Pricing Sections Rich Text Sections Stats Sections Team Sections Testimonials Sections

Application Blocks

App Shells Application Examples Buttons Cards Description Lists Empty Sections Navbars Page Headers Section Footers Section Headers Sections Settings Sign in Sign up Table Headers

This project is independent and not affiliated with Figma or shadcn/ui.
Copyright © 2025 Matt Wierzbicki