From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Atomic design

Atomic design

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Atomic design

“

Welcome back, let's discuss the atomic design. Atomic design is used when we want our system to have high UI reusability. Have you ever visited a Salesforce website or a CRM application? Any website that has lots of user controls and wants design consistency throughout the website, Atomic Design is a best fit. That's how the Atomic Design code structure looks like. If you have multiple types of buttons, date pickers, input fields, search bar in your application, it makes more sense to use Atomic Design for components reusability. making a change to a button CSS if it's used in 100 places. Using the Atomic Design, you can easily handle this. Let's discuss the pros of using Atomic Design. It gives you a strong UI hierarchy, design consistency, you want to make a change in in one place and it reflects throughout the application. It's great for building component libraries, such as ShadCN, Material UI. They all use the same kind of atomic design architecture. Next we are going to discuss…

Contents