How to Build (Good) Admin Dashboards || React & TailwindCSS

Building admin dashboards can be tough to get right for us developers. There's SO MANY little things that need to go right to make it look and feel professional.

So today we're going to build one! We'll build it using React with NextJS and TailwindCSS, and we'll cover a whole bunch of tips on what you should look out for to make sure that any dashboards you build going forward come out looking awesome.

(p.s. apologies for the weird focus at the beginning of the video, I have no idea what I'm doing with a camera yet so bare with me 😂)

📚 Project Links

🔗 My Links

Timeline:
0:00 - Introduction
0:27 - Don't reinvent the wheel (inspiration resources)
2:45 - Sizing panels
7:02 - Sizing text & contrast (account toggle)
16:11 - Consider your users (cmdk search bar)
28:08 - Slowly add contrast (nav options)
33:05 - Account for page growth (plan picker section)
37:08 - Align everything (top bar)
41:46 - Use different types of contrast selectively (stat cards)
50:04 - Don't reinvent the wheel 2 (adding charts)
59:14 - Use color purposefully (recent transactions table)

[hehimselfishim]

first full course? nice, will watch it over the weekend.

[jannickpedersen]

I have been a pro member for 5 months, and its really the one time fee worth it. Thanks Tom for making frontend a little more deluxe!

[rjtdas]

Nice!
Quick trick: You can create directory even when you select "New file", Just add an extra slash at the end example "Dashboard/", or "Dashboard/Dashboard.tsx"

[natiforish]

Tom you are the GOAT man.
Everything so clean and understandable.
We want more like that!

[oussamaelhousni]

Best frontend content i have ever watched, thank you tom

[collinsk]

Very clear and comprehensive tutorial! 🔥🔥

[muzammilali]

Just love your content Tom, Thank you so much for this 🙌

[Pking]

Needed this you went crazy with this one 😤😤

[FrancoBarrera-nvrt]

Thank you very much for the project, very entertaining

[TimCollins]

Exactly what I was looking for, thank you!

[Aljunskie]

Congratulations you've got a new follower

[ske]

Hi Tom!
I just finished watching your videos and it was great !. But I'm wondering about what Vscode extension did you use on the video? Big thanks from me :D

[houseofdragons]

Epic face reveal + Epic content
LFG!!

[IntrovertedCoder]

Hi Tom! I use your free components all the time in my projects. Thank you for building them. Also, is there any ETA on the course?

[thomasdinhk]

hi, which vscode theme are you using? I really like that cyan unsaved indicator

[favanzzo]

tom, your content is just next level. any plans on doing a react course (besides framer motion course), cheers.

[thomasdinhk]

1:05:19 hi, how do you get rid of the scrollbar, thanks!

[ramsey]

Why make the sidebarsticky when you can make the main content scroll instead?

[harshitpant]

How far fe has come that instead of traditionally creating these dashboards component now In one click you can either copy them.

[ComfyCosi]

for the Comd+K you could even use a <kbd> element. Also your mic is in focus but your face is not, lul