https://github.com/panaverse/styling-nextjs-projects

Learning Next.js Styling with TailwindCSS and Chakra UI
https://github.com/panaverse/styling-nextjs-projects

chakra-ui nextjs tailwindcss typescript

Last synced: 2 months ago
JSON representation

Learning Next.js Styling with TailwindCSS and Chakra UI

• Host: GitHub
• URL: https://github.com/panaverse/styling-nextjs-projects
• Owner: panaverse
• License: mit
• Created: 2022-08-15T14:18:58.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-11T08:33:46.000Z (about 2 years ago)
• Last Synced: 2024-04-17T04:26:57.253Z (9 months ago)
• Topics: chakra-ui, nextjs, tailwindcss, typescript
• Homepage:
• Size: 1.61 MB
• Stars: 45
• Watchers: 3
• Forks: 15
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Learning by Developing Next.js Projects

[The repo is part of the Certified Web 3 and Metaverse Developer Program](https://www.panaverse.co/)

## 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](https://github.com/panacloud-modern-global-apps/ui-design-trends)

[8 Reasons Why I Love Chakra-UI](https://levelup.gitconnected.com/8-reasons-why-i-love-chakra-ui-bad36e821282)

[Watch Chakra UI with Segun Adebayo, the Creator of Chakra UI](https://www.youtube.com/watch?v=l7nyRBxQ9vo)

Learning Videos:

[Learn how to use Chakra UI like a Pro](https://www.chakrauiforbeginners.com/)

[Build a Modern User Interface with Chakra UI](https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106)

Learning Material:

[Next Learning Repo](https://github.com/panacloud-modern-global-apps/nextjs)

[Getting Started with Chakra UI](https://chakra-ui.com/getting-started)

[Chakra UI Components](https://chakra-ui.com/docs/components)

[Styled System](https://styled-system.com/getting-started)

[Responsive Style](https://chakra-ui.com/docs/styled-system/responsive-styles)

Templates:

[Templates](https://chakra-templates.dev/)

[Chakra Templates UI Kit](https://www.figma.com/community/file/935959613109017886)

[Purity UI Dashboard - Chakra Admin Template](https://www.creative-tim.com/product/purity-ui-dashboard)

[Purity UI Dashboard - Figma](https://www.figma.com/community/file/1017053507572291952)

Figma Resources:

[Design Workflow with Chakra UI and Figma](https://www.youtube.com/watch?v=Gm7qHn9Y_Ro)

[Chakra UI Figma Kit](https://www.figma.com/community/file/971408767069651759) 

[Chakra UI - Design Kit for Figma](https://segunadebayo.gumroad.com/l/KbHtQ)

[Figma Variants Tutorial: UI Design for Developers Video](https://www.youtube.com/watch?v=b9XSghqBVxI)

Design System:

[Build Your Own Design System with ChakraUI Video](https://www.youtube.com/watch?v=epJuxo8FKFA)

[How to build a UI design system](https://www.secretstache.com/blog/ui-design-system/)

[Yogi Starter Kit for Backlight Design System based on Chakra UI](https://github.com/divriots/starter-yogi)

[Blacklight Design System](https://backlight.dev/)

[Build and Ship a Design System in 8 Steps Using Backlight](https://tympanus.net/codrops/2022/01/24/build-and-ship-a-design-system-in-8-steps-using-backlight/)

Color Resources:

You can use websites like [Themera](https://themera.vercel.app/), [Smart Swatch](https://smart-swatch.netlify.app/), [Coolors](https://coolors.co/) or [Palx](https://palx.jxnblk.com/) to generate a palette. It can also be used to define your own [colorScheme](https://github.com/chakra-ui/chakra-ui/discussions/2846) palette. You can also check out the [default theme](https://chakra-ui.com/docs/styled-system/theme).

Other Resources:

[Awesome Chakra UI Resources](https://github.com/chakra-ui/awesome-chakra-ui)

[Design Heaven: Videos, Images, etc.](https://github.com/dimitrisraptis96/design-heaven)