5 ms·

Shadxn: An experimental CLI tool that builds upon shadcn-UI CLI

30 points by marrouchi 3y ago

CooCooCaCha 3y ago
So this is basically a package manager for react components?
- verdverm 3y ago
  It sits in a weird place because 1. Some things are added to your project through package.json the normal way 2. Some things are added to your project by vendoring (copy/paste) a file or two, now with configurable source I can imagine companies wanting a consistent set of components that are easily installed (hence shadxn), but why not turn that into an internal/private npm module?
felixrieseberg 3y ago
> In the vast and ever-evolving landscape of web development, certain projects not only capture the imagination of developers worldwide but also redefine the paradigms of design and functionality. A bit of feedback: Seeing this amount of non-speak and arrogance in the first sentence of the "getting started" readme has me immediately tune out and put this project aside. If there is anything good here, I won't see it.
- ramon156 3y ago
  On top of that, this screams ChatGPT. I could be very wrong, but ChatGPT is good at this word spaghetti
  - marrouchi 3y ago
    I'm considering rewriting the article to make sound more natural.
- marrouchi 3y ago
  I agree, I need this kind of feedback, this gives me guidance in writing. Appreciate it
  - marrouchi 3y ago
    I have reviewed the article, i hope this sounds closer to what you are expecting
reactordev 3y ago
Not to dissuade or discourage but having a cli tool on top a cli tool on top a cli tool is kind of ridiculous and says a lot more about web dev these days. Wouldn’t someone using Shadcn just use their cli and install all the things? Wouldn’t a company using Shadcn have their own git or npm of which they can install custom private packages? I’m at a loss at what exactly the value prop of this is.
- switz 3y ago
  I'm not OP, but I appreciate the earnestness of your question so I'll try to answer. I believe the answer comes from this line: > Custom Registry Support This is effectively the shadcn CLI, but with the ability to add custom sources of content in the form of registries. Imagine you want to add a shadcn component, a fontawesome icon, or another custom library component. Wouldn't it be nice to have it all accessible via one unified interface. Anything that promotes more code-owning and fewer dependencies for lower level items (components, icons, etc.) is a win in my book. Similar prior art is sly-cli: https://sly-cli.fly.dev https://sly-cli.fly.dev @OP: I'd consider renaming your project to avoid co-opting the shadcn name, though. For your benefit and for shadcn's.
  - reactordev 3y ago
    “Imagine you want to add a shadcn component, a fontawesome icon, or another custom library component. Wouldn't it be nice to have it all accessible via one unified interface.” Don’t we have that already with rollup in vite? I simply import it into my jsx and use it. Npm is that interface. I guess I just don’t understand the pain this is trying to solve. I import Shadcn components, I import fontawesome icons, or hero icons, or SVG, or whatever you want. The rollup bundles everything into my public folder ready to be content-delivered. All of this is done with vite. Sly uses vite. So again, a cli tool on top a cli tool on top a cli tool just so you don’t have to import a sheet with svg’s you probably won’t use. Reducing bundle size. Great. Abstracting it all on top of an ecosystem on top of an ecosystem? Not great. Sorry. I’ll never have a use for sly or shadxn or anything that simply abstracts the layer beneath and claim it’s innovative. Vite is doing the work.
nc0 3y ago
Wasn't the goal of ShadCN UI to be easy to use, without the need for a custom ecosystem? Not to discourage but this seems to go against the goal of the package at first. AFAIK, we're supposed to "just" copy and past the components
- marrouchi 3y ago
  The goal of ShadCN UI for ease of use remains. The option for a custom ecosystem is just an extension for those who need it, without complicating things for users happy with the straightforward "copy and paste" approach. It's about offering more flexibility while keeping the original simplicity intact.
bigdecafenergy 3y ago
I had a similarly inspired idea recently but more deeply git/vcs-based https://github.com/MichaelBelousov/forkage https://github.com/MichaelBelousov/forkage, which would use arbitrary git providers for a registry and encourages editing your dependency's content but then you can promote your edits to a fork and search/diff other forks of packages. fyi there's about 0 progress in that repo besides the README laying out the hypothetical CLI and file structure.
presentation 3y ago
Don’t have any thoughts about this cli tool but am I the only one that thinks that the ShadCN components, besides looking pretty, actually are not good? I used it in a project and regret it since the actual code is written in a way that does not lend itself to modular usage (the form components are particularly bad) with wrappers upon contexts upon wrappers obscuring the true abstraction; I don’t like Tailwind so I had to rewrite all the styles; and ultimately it’s just a wrapper on Radix UI which already is a reasonable abstraction (though even further, React Aria seems nicer from the get-go). Ended up just rewriting practically everything it produced to not suck. EDIT: actually read the README here, I guess this is cool in that I could register components that, unlike ShadCN, don’t suck, and still lead to the same vendored approach that allowed me to rewrite all the ShadCN components. It seems kind of ridiculous as the other commenters mentioned that this is a cli for a registry on top of a cli from another registry…
- Clueed 3y ago
  I agree, if you don't like a key feature of a library, like tailwind-based styling which is meant to be customized, then that library is probably not for you. The form component is more the exception for its complexity but forms are also very complex on the web. Being a wrapper on top of Radix is kind of the point. You can't build a nice-looking MVP in an afternoon with Radix - you need one afternoon just to style every state of button - but with shadcn you can. Their experiment is to give you the ability to still spend an afternoon styling the button later without having to hack around a complex library. Your ability to rewrite it even away from tailwind is exactly the point. Ever tried rewriting MUI to use tailwind?
- JoeyJoJoJr 3y ago
  I chose Shadcn for my latest project. I don’t regret choosing it but I didn’t anticipate how much tweaking it requires. One example, and maybe I am using it incorrectly but the dialogue component didn’t accommodate for any overflow - the overflowing content is just cut off by the window.
  - marrouchi 3y ago
    Shadxn will allow you to reuse your tweaked dialog component

30 points by marrouchi 3y ago

CooCooCaCha 3y ago

So this is basically a package manager for react components?

verdverm 3y ago
It sits in a weird place because 1. Some things are added to your project through package.json the normal way 2. Some things are added to your project by vendoring (copy/paste) a file or two, now with configurable source I can imagine companies wanting a consistent set of components that are easily installed (hence shadxn), but why not turn that into an internal/private npm module?

felixrieseberg 3y ago

> In the vast and ever-evolving landscape of web development, certain projects not only capture the imagination of developers worldwide but also redefine the paradigms of design and functionality. A bit of feedback: Seeing this amount of non-speak and arrogance in the first sentence of the "getting started" readme has me immediately tune out and put this project aside. If there is anything good here, I won't see it.

ramon156 3y ago
On top of that, this screams ChatGPT. I could be very wrong, but ChatGPT is good at this word spaghetti
- marrouchi 3y ago
  I'm considering rewriting the article to make sound more natural.
marrouchi 3y ago
I agree, I need this kind of feedback, this gives me guidance in writing. Appreciate it
- marrouchi 3y ago
  I have reviewed the article, i hope this sounds closer to what you are expecting

reactordev 3y ago

Not to dissuade or discourage but having a cli tool on top a cli tool on top a cli tool is kind of ridiculous and says a lot more about web dev these days. Wouldn’t someone using Shadcn just use their cli and install all the things? Wouldn’t a company using Shadcn have their own git or npm of which they can install custom private packages? I’m at a loss at what exactly the value prop of this is.

switz 3y ago
I'm not OP, but I appreciate the earnestness of your question so I'll try to answer. I believe the answer comes from this line: > Custom Registry Support This is effectively the shadcn CLI, but with the ability to add custom sources of content in the form of registries. Imagine you want to add a shadcn component, a fontawesome icon, or another custom library component. Wouldn't it be nice to have it all accessible via one unified interface. Anything that promotes more code-owning and fewer dependencies for lower level items (components, icons, etc.) is a win in my book. Similar prior art is sly-cli: https://sly-cli.fly.dev https://sly-cli.fly.dev @OP: I'd consider renaming your project to avoid co-opting the shadcn name, though. For your benefit and for shadcn's.
- reactordev 3y ago
  “Imagine you want to add a shadcn component, a fontawesome icon, or another custom library component. Wouldn't it be nice to have it all accessible via one unified interface.” Don’t we have that already with rollup in vite? I simply import it into my jsx and use it. Npm is that interface. I guess I just don’t understand the pain this is trying to solve. I import Shadcn components, I import fontawesome icons, or hero icons, or SVG, or whatever you want. The rollup bundles everything into my public folder ready to be content-delivered. All of this is done with vite. Sly uses vite. So again, a cli tool on top a cli tool on top a cli tool just so you don’t have to import a sheet with svg’s you probably won’t use. Reducing bundle size. Great. Abstracting it all on top of an ecosystem on top of an ecosystem? Not great. Sorry. I’ll never have a use for sly or shadxn or anything that simply abstracts the layer beneath and claim it’s innovative. Vite is doing the work.

nc0 3y ago

Wasn't the goal of ShadCN UI to be easy to use, without the need for a custom ecosystem? Not to discourage but this seems to go against the goal of the package at first. AFAIK, we're supposed to "just" copy and past the components

marrouchi 3y ago
The goal of ShadCN UI for ease of use remains. The option for a custom ecosystem is just an extension for those who need it, without complicating things for users happy with the straightforward "copy and paste" approach. It's about offering more flexibility while keeping the original simplicity intact.

bigdecafenergy 3y ago

I had a similarly inspired idea recently but more deeply git/vcs-based https://github.com/MichaelBelousov/forkage https://github.com/MichaelBelousov/forkage, which would use arbitrary git providers for a registry and encourages editing your dependency's content but then you can promote your edits to a fork and search/diff other forks of packages. fyi there's about 0 progress in that repo besides the README laying out the hypothetical CLI and file structure.

presentation 3y ago

Don’t have any thoughts about this cli tool but am I the only one that thinks that the ShadCN components, besides looking pretty, actually are not good? I used it in a project and regret it since the actual code is written in a way that does not lend itself to modular usage (the form components are particularly bad) with wrappers upon contexts upon wrappers obscuring the true abstraction; I don’t like Tailwind so I had to rewrite all the styles; and ultimately it’s just a wrapper on Radix UI which already is a reasonable abstraction (though even further, React Aria seems nicer from the get-go). Ended up just rewriting practically everything it produced to not suck. EDIT: actually read the README here, I guess this is cool in that I could register components that, unlike ShadCN, don’t suck, and still lead to the same vendored approach that allowed me to rewrite all the ShadCN components. It seems kind of ridiculous as the other commenters mentioned that this is a cli for a registry on top of a cli from another registry…

Clueed 3y ago
I agree, if you don't like a key feature of a library, like tailwind-based styling which is meant to be customized, then that library is probably not for you. The form component is more the exception for its complexity but forms are also very complex on the web. Being a wrapper on top of Radix is kind of the point. You can't build a nice-looking MVP in an afternoon with Radix - you need one afternoon just to style every state of button - but with shadcn you can. Their experiment is to give you the ability to still spend an afternoon styling the button later without having to hack around a complex library. Your ability to rewrite it even away from tailwind is exactly the point. Ever tried rewriting MUI to use tailwind?
JoeyJoJoJr 3y ago
I chose Shadcn for my latest project. I don’t regret choosing it but I didn’t anticipate how much tweaking it requires. One example, and maybe I am using it incorrectly but the dialogue component didn’t accommodate for any overflow - the overflowing content is just cut off by the window.
- marrouchi 3y ago
  Shadxn will allow you to reuse your tweaked dialog component