Master how to build modern interfaces with Panda.

In this course, you'll learn all the fundamentals of building scalable design systems and responsive interfaces using, Panda CSS — a zero runtime CSS-in-JS solution.

Create scalable design systems and build components with confidence using Panda CSS.

70+
lessons
6+
hours of content
12+
modules
7+
hands-on exercises
Checkmark
Styling Foundation
Checkmark
Layout Patterns
Checkmark
Color Mode
Checkmark
Recipes
Checkmark
Design Tokens
Checkmark
Theming
Checkmark
Migration
Checkmark
Monorepo
Creating Panda Mastery with Sage was such a joy ride. I got to pour everything I know and love about Panda CSS into this course – from curriculum crafting, to practical design to code examples to hands-on projects with solutions. Whether you're just getting started with Panda or not, this course is guaranteed to give you an excellent learning experience!
Esther Adebayo
Esther AdebayoDeveloper Advocate, Chakra
Gradient ArcPanda Logo

What's inside?

A collection of exercise-driven, self-paced lessons for you to master Panda CSS like a pro

Intro

Introduction

3 lessons
·
6m 12s
Introduction to this course
01:31
What Makes Panda Different?
02:31
Panda CSS in 120 Seconds
02:10
Styling Foundation

Styling Foundation

7 lessons
·
38m 22s
Installing Panda CSS
02:02
Styling Basics
06:25
Responsive Design
04:19
Nested styles and Conditions
03:04
Merging Stylesnew
10:56
Exercise
00:49
Solution
10:47
Layout Pattern

Layout Patterns

8 lessons
·
28m 15s
Introduction
01:12
Flexbox Patterns
03:33
Grid Patterns
02:07
Container Queries
02:42
Creating Autoflex Pattern
01:33
Creating Scrollable Pattern
04:04
Exercise
00:35
Solution
12:29
Color Mode

Color Mode

5 lessons
·
13m 10s
Setting Up Color Mode
02:39
Light & Dark Mode Styling
03:35
Responding to System Preferences
01:29
Exercise
00:39
Solution
04:48
Recipe

Recipes

8 lessons
·
25m 13s
Introduction
01:25
Thinking in Recipes
04:06
Creating a Badge Recipe
02:41
Using Virtual Colors
04:09
Compound Variants
03:40
Convert to JSX Component
03:29
Exercise
00:56
Solution
04:47
Slot Recipe

Slot Recipes

6 lessons
·
58m 58s
Introduction to Slot Recipes
02:20
Creating an Alert Recipe
09:58
Creating a Tabs Recipe
10:09
Converting to JSX component
07:07
Exercise
00:29
Solution
28:55
Config Recipe

Config Recipes

6 lessons
·
15m 17s
Atomic vs Config Recipe
02:01
Migrating Badge Recipe
03:09
Migrating Alert Recipe
02:39
Just in Time Styles
01:38
Exercise
00:43
Solution
05:07
Design Token

Design Tokens

9 lessons
·
38m 33s
What are Design Tokens?
01:42
Exploring Default Tokens
02:31
Using Design Tokens
05:57
Customizing Core Tokens
06:07
Customizing Semantic Tokens
08:06
Color Opacity Modifier
03:37
CSS Variablesnew
03:09
Exercise
00:58
Solution
06:26
Migration

Migration

5 lessons
·
15m 30s
Runtime -> Static CSS-in-JS
00:49
Migrating Styled Component
04:04
Migrating Styled Component II
03:55
Migrating Emotion
06:42
Migrating Stitches
Soon
Theming

Theming

6 lessons
·
25m 43s
Introduction
01:25
Typography Styles
05:51
Layer Styles
05:25
Creating Presets
02:52
Multi-brand Theming
10:10
Creating Motion Styles
Soon
JSX Style Prop

Jsx Style Props

4 lessons
·
16m 7s
Introduction to Style Props
01:23
Jsx Factory
05:44
Recipe as JSX
03:19
Slot Recipes as JSX
05:41
Monorepo

Monorepo

4 lessons
·
27m 18s
Introduction to Monorepo
01:26
Configuring Packages
09:47
Creating a shared UI library
08:45
Customizing The Preset
07:20
I'm excited to help you deeply learn the ins and outs of Panda CSS in this course. It goes beyond the basics and dives deep into the core features that makes Panda a powerful styling solution. Panda Mastery will equip you with the skills and confidence to build robust design systems
Segun Adebayo
Segun AdebayoCreator, Panda CSS
It's time to master

Panda CSS

A collection of exercise-driven, self-paced lessons for you to master Panda CSS like a pro

Full Access
$99
Team discount.
33% off of $149
Buy Now
Checkmark
Lifetime access to modules
Checkmark
70+ video lessons
Checkmark
Access to design resources
Checkmark
New videos added regularly
Checkmark
Flexible learning at your pace
Stream every video
Live code playground
Hands-on Exercises
Source code
Creator Interviews
Gradient Arc
StarBonus: Worth $1,500Star

Creator Interviews

Learn from the creators of Panda CSS about the design decisions behind Panda CSS, how it was built, and more.

EstherEsther

Building the Panda Compiler w/ Alex

Play
EstherEsther

Creating Park UI Preset w/ Chris

Play
EstherEsther

The Design Intent for Panda w/ Sage

Play

Meet the course creators

Hey! We're Sage and Esther. Collectively, we've been working in the frontend developer tooling space over the past decade.

panda mastery creator
Sage is the creator of Panda CSS, and maintainer of popular projects such as Chakra UI, Ark, and Zag.js
Sage
panda mastery creator
Esther is a seasoned developer advocate who is passionate about developer education and community building
Esther

Frequently Asked Questions

Is there a team license available?

Yes, we offer team licenses for organizations with unlimited users. When purchasing a team license, please use a shared email address that all team members can access. This ensures that everyone on your team can easily access the course materials. For more information on team licensing or to make a purchase, please contact us at support@chakra-ui.com.

Is there a regional or PPP discount?

Yes. If you reside in a country with significantly lower purchasing power, send us an email and you'll receive a regional discount for a lower price.

How do I convince my manager to buy this course for me?

Employers want to invest in resources that help their team deliver better results more quickly. We believe Panda Mastery is an incredibly worthwhile investment. Use this template to persuade them

Is there a student discount?

Yes. If you're actively enrolled in an educational program, send us an email and you'll receive 30% off the course price.

What about a receipt, so I can be reimbursed?

After purchasing the course, you'll receive an email receipt/invoice from LemonSqueezy. You'll be able to add the name and address is necessary to get a reimbursement.

Is this course beginner-friendly?

This course isn't intended for absolute frontend beginners. We require that you have some experience with CSS and JS frameworks like React, Vue or Solid.js.

What is your refund policy?

All sales are final. Due to the digital nature of our content and the immediate access to course materials, we do not offer refunds at this time.

How can I contact you for support or questions?

If you have any questions, need support, or want to reach out for any reason, please don't hesitate to contact us at support@chakra-ui.com. We're here to help and will respond to your inquiry as soon as possible.