Learning by Developing Next.js Projects

The repo is part of the Certified Web 3 and Metaverse Developer Program

You are required to build two versions of each project, one with TailwindCSS and the other with Chakra UI

After completeting these project you will learn the latest UI Design Trends for this repo

8 Reasons Why I Love Chakra-UI

Watch Chakra UI with Segun Adebayo, the Creator of Chakra UI

Learning Videos:

Learn how to use Chakra UI like a Pro

Build a Modern User Interface with Chakra UI

Learning Material:

Next Learning Repo

Getting Started with Chakra UI

Chakra UI Components

Styled System

Responsive Style

Templates:

Templates

Chakra Templates UI Kit

Purity UI Dashboard - Chakra Admin Template

Purity UI Dashboard - Figma

Figma Resources:

Design Workflow with Chakra UI and Figma

Chakra UI Figma Kit

Chakra UI - Design Kit for Figma

Figma Variants Tutorial: UI Design for Developers Video

Design System:

Build Your Own Design System with ChakraUI Video

How to build a UI design system

Yogi Starter Kit for Backlight Design System based on Chakra UI

Blacklight Design System

Build and Ship a Design System in 8 Steps Using Backlight

Color Resources:

You can use websites like Themera, Smart Swatch, Coolors or Palx to generate a palette. It can also be used to define your own colorScheme palette. You can also check out the default theme.

Other Resources:

Awesome Chakra UI Resources

Design Heaven: Videos, Images, etc.