Introduction to this course

What Makes Panda Different?

Panda CSS in 120 Seconds

Styling Foundation

Installing Panda CSS

Responsive Design

Nested styles and Conditions

Merging Styles

Coming soon

Layout Patterns

Flexbox Patterns

Container Queries

Creating Autoflex Pattern

Creating Scrollable Pattern

Setting Up Color Mode

Light & Dark Mode Styling

Responding to System Preferences

Thinking in Recipes

Creating a Badge Recipe

Using Virtual Colors

Compound Variants

Convert to JSX Component

Introduction to Slot Recipes

Creating an Alert Recipe

Creating a Tabs Recipe

Converting to JSX component

Atomic vs Config Recipe

Migrating Badge Recipe

Migrating Alert Recipe

Just in Time Styles

What are Design Tokens?

Exploring Default Tokens

Using Design Tokens

Customizing Core Tokens

Customizing Semantic Tokens

Color Opacity Modifier

Runtime -> Static CSS-in-JS

Migrating Styled Component

Migrating Styled Component II

Migrating Emotion

Migrating Stitches

Coming soon

Typography Styles

Creating Presets

Multi-brand Theming

Creating Motion Styles

Coming soon

Jsx Style Props

Introduction to Style Props

Slot Recipes as JSX

Introduction to Monorepo

Configuring Packages

Creating a shared UI library

Customizing The Preset

Creator Interviews

Building the Panda Compiler

Creating Park UI

The Design Intent for Panda

Locked Video

Please log in or buy the course to watch

Solution

Figma GithubNext

In this lesson, I'll show you my solution to the profile card component exercise. The goal was to use Panda CSS styling to create the profile card.

You can follow along on your own codebase or view mine by clicking the GitHub button. Feel free to compare side by side.