Interest in Shadcn UI?

Most of us doing frontend have heard about Shadcn UI at this point. It’s a CLI that provides a set number of components (based on React and Tailwind) and other supporting code for building UIs, but instead of being a traditional UI library, it helps you copy paste the base components into your project so you can make them your own.

It has gotten very popular and IMO strikes a nice balance between pre-baked UI lib and the flexibility of changing the source easily. I feel it fits the ReScript mindset well.

I think that a Shadcn setup that covers most of Shadcn UI would be a big boost to the ReScript ecosystem. It’d be a quick and easy way to add high quality UI components to your app, and at the same time be maintainable since you own the component fully after adding it to your project. You just maintain it like any other component in your project.

Making a ReScript version of Shadcn

Shadcn is a set of ~50 or so components, based on various well established UI component “libs” like Radix UI.

Shadcn has the concept of registries. It’s a way of setting up your own repository of base components, including all the files needed for each. We could set up our own registry for ReScript. That registry could then contain all the base components, with the addition of ReScript bindings for each component.

With a little bit of conf in your project, you could then use it like this:

npx shadcn@canary add rescript/button

And it would install everything needed to use the component in your repo, including ReScript bindings.

How we can do this

Essentially, the work involved here would be:

  1. Do some basic setup for the registry itself, including guidelines for quality assurance of the bindings etc
  2. Create bindings for each of the ~50 components

Point 1 is easy to just bootstrap. And, if we are a couple who are interested in this, point 2 shouldn’t be that difficult either. It’d just be a matter of getting the work done.

Interested?

Key here is to gather up a few people who are interested in doing the initial work. There’s some prior art with Radix bindings etc if you search GitHub, so we wouldn’t be starting completely from scratch. But still, it’ll be some initial effort.

This will only work if we’re a few willing and able who go together share the initial workload. So, are you interested in helping out with creating the initial bindings? Please post in this thread!

4 Likes

I didn’t know about shadcdn, I really like the philosophy, I tend to be irritated by common UI libs that always end up not being customizable enough and I eventually roll my own component. If we want to make these components as customizable as possible, the ideal would be to convert them to rescript.

I do a lot of UI, so I could be interested in joining this effort.

1 Like

Converting them to ReScript makes sense as well, and a lot of the code we write to bind to them will definitely be useful for a proper re-roll. But I think we should start out by just binding, so we get something out there as soon as possible. Then we can gradually convert them, or even provide alternate versions of them in pure ReScript.

Downside of converting them and not just binding, outside of it taking a lot more time, is the maintainability.

But I agree with both sentiments!

2 Likes