Shadxn: An experimental CLI tool that builds upon shadcn-UI CLI(github.com)
github.com
Shadxn: An experimental CLI tool that builds upon shadcn-UI CLI
https://github.com/anis-marrouchi/shadxn
21 comments
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…
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…
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?
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?
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.
Shadxn will allow you to reuse your tweaked dialog component
Thanks for pointing this out.
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.
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.
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
@OP: I'd consider renaming your project to avoid co-opting the shadcn name, though. For your benefit and for shadcn's.
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
@OP: I'd consider renaming your project to avoid co-opting the shadcn name, though. For your benefit and for shadcn's.
“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.
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.
The innovation here is not bundling, it’s owning the code in your codebase instead of relying on external packages. If you want to make changes to components, icons, etc. it is better to have the raw files and be able to change them, than have to wrap or manipulate them via other methods. That’s the difference here.
I want my own button component, not one that requires upgrades, changes, or a million hidden deps.
I want my own button component, not one that requires upgrades, changes, or a million hidden deps.
Thank you not at all. Ok, this is not cli that build on top of a cli. Its an cli that adapts to your specific need. So you don't need a new cli, you only need a registry. a url from where your provision your custom components
More than what?
I had a similarly inspired idea recently but more deeply git/vcs-based 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.
fyi there's about 0 progress in that repo besides the README laying out the hypothetical CLI and file structure.
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
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.
So this is basically a package manager for react components?
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?
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?
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.