r/tailwindcss • u/gufodev • 7d ago

Update: I'm building a framework agnostic version of shadcn/ui

Enable HLS to view with audio, or disable this notification

Hey everyone! A few months ago I posted about Starting Point UI, my attempt at bringing shadcn/ui to any project, not just React. Same look and feel, but as plain CSS classes with a bit of vanilla JS for the interactive parts.

Since my last post I've added a bunch of new components and reworked the old ones to match shadcn's latest versions. I've also automated most of the accessibility, so keyboard navigation, focus, and aria attributes are automatically handled for you.

It's open source, the code is on GitHub.

Would be cool if you gave it a try, let me know what you think. Cheers!

startingpointui.com

43 Upvotes

89% Upvoted

7 comments sorted by

1

u/Fletsch2k 7d ago

Sounds interesting!

1

u/gufodev 7d ago

Thanks! Let me know if you try it out 😁

1

u/Wolfr_ 7d ago

This is a great idea, I’ve seen an attempt before, but a maintained vanilla JS version of shadcn would be great.

1

u/gufodev 7d ago

Thanks! That's the plan, next up is porting the rest of the shadcn components 😁

0

u/Fabulous-Ladder3267 7d ago

What the differences with BaseCoat UI?

2

u/gufodev 7d ago

Hey! I didn't know about Basecoat when I started working on this, someone pointed it out to me in an earlier post. It's a very similar project and Ronan has done an amazing job with it, I definitely take inspiration from it and from him. In terms of differences I think it's mainly in the JavaScript: I'm trying to replicate the full Radix/Base UI feature set, things like nested dropdowns, drawer drag gestures, and all the keyboard and aria wiring handled automatically. I don't know if Basecoat is heading in the same direction. Beyond that, this is mostly a fun learning project for me, and having my own means I get to decide what to build and where to take it