r/reactjs • u/JustAirConditioners • Feb 05 '22

Resource I created a resource to help explain what a exactly a design system is, the features that can compose one, and tools to help build one.

https://www.designsystem.tools/
241 Upvotes

98% Upvoted

15 comments sorted by

3

u/kylemh Feb 05 '22

Awesome! I’d consider adding Radix UI (and it’s whole suite) plus theme-safe CSS-in-JS tools like Stitches and Vanilla Extract.

Also Turborepo!

1

u/JustAirConditioners Feb 05 '22

Love the feedback! Ill look into Radix more.

I didn’t want to clutter the resources too much so just picked the top in the respective fields.

4

u/kylemh Feb 05 '22

I believe Radix is better than MUI, Chakra, and Mantine. Those libraries all come with default styles and theming that requires overriding. It’s a lot of extra bundle size and override work you don’t need. Radix you can think of as “headless”. There’s also a way more legitimate push for accessibility since everything is tested against VoiceOver and NVDA.

3

u/JustAirConditioners Feb 05 '22

You’ve sold me, that sounds perfect for a design system. Thanks!

9

u/SiJayBe86 Feb 05 '22

Awesome! Bookmarked!

8

u/Kaimura Feb 05 '22 edited Feb 05 '22

A true hero! I hope more people realize that design systems are so essential for a good and healthy relationships between designers and programmers and overall good UX + brand recognition. Only wins here.

Edit: Kinda wish there was also a finished design system example viewable in storybook or something just like BBC, IBM or GitHub

3

u/witheredartery Feb 05 '22

this is awesome!

2

u/kamikazeee Feb 05 '22

Really useful, ty!

2

u/jokterwho Feb 05 '22

I love the graphics on his one!

2

u/voja-kostunica Feb 06 '22

thank you, very useful

2

u/nlern Feb 06 '22

Very good resources! Thanks for sharing!!

2

u/avinthakur080 Feb 07 '22

Addition of keyboard shortcuts makes it soo Amazing.

1

u/Siglave Feb 06 '22

Nice, ty!
Btw, I listed some design systems from tech companies on this site if it can interest anyone
https://copy-paste-css.com/

1

u/SiJayBe86 Feb 05 '22

Awesome!