Awesome tool, so many potential usages for easy getting started guides, tutorials and more. You don’t have to clone a demo now and copy the code over, they can just provide the registry to pop it straight into your project!
not the clearest video from a script editing. especially in all the auth trudging setup. would be helpful to frame what is about to happen in full so theres some anchoring in where we are in the narrative. the presentation of the information was all the same, even a quick excali of all the stages of what's being built and referencing where we're at now would help a lot. we see in contrast
The video is great, thank you for your work. WorkOS is not bad, but I would like a video about self-hosting authorization solutions? Something easy peasy
Pretty cool stuff! Idk why it bothers me that you type `rm -fr` instead of `rm -rf` even though the flags are interchangeable and it’s functionally equivalent 😅 More like, “remove fr fr, no cap” lol
I use them interchangeably. AFAIK there is no canonically correct way. This is one of those toilet paper over the top or under the bottom type situations. :)
@@jherr I’m going to be that guy. Research has shown that toilet paper over the top is more hygienic as the paper is less likely to touch the wall, and is less likely to require hand-contact with the wall. The wall next to the toilet is likely to be the most germ-ridden place in the bathroom other than the toilet itself.
So I love this concept, and unlike most other commenters I do actually have a use case I see fit for this. However what I struggle to understand is how you created the json. You kinda quickly brushed over it, which I guess is fine because the video itself is more about exploring the possibility of doing it, rather than doing it. However I'd love to see how you set that up. As far as I gather, you created a tool or something you called "differ" or something which spat out usable json. Does this work with any code snippets you make? It looked like it was based on git or something, but I'm really lost at that step. Maybe I'm just blind but going to the github repo isn't really clarifying it further for me. Other than that, great video :D
It's an OSS utility called shadcn-differ. You run it with `npx shadcn-differ` and it compares the current state of the repo versus the initial commit. So establish your baseline with your initial commit. It should have shadcn installed. Then set up your code and run `npx shadcn-differ` and it will output the JSON to STDOUT.
@@jherr So there is no easy way to keep working in the same project and only output the json for parts of it? Here I'm thinking imagine I made my own ui library, and I wanted to install it in the same fashion as shadcn. I'd like to just have all the components I make live in the same repo, but now in order to use this tool, I'd basically have to create a dummy repo each time I'm updating or creating new components, where I copy them into the dummy repo, then run the differ. It would be cool if I could just run the cli in a way where I could specify which component I want to generate the JSON for and it just does it, and base it on the structure that exists for that component already. One could even imagine this step being run when building your site, (ie the component documentation site), so that as an author you just need to worry about the components, then the json output will always be built and deployed alongside your changes. Obviously I don't know why this CLI is using git for reference, I'm sure there is a very good explanation, I just wish it would be a lot easier, granted this is a lot easier than creating the json yourself, but still. I feel like there is room for improvement.
@@JuicyBenji I can see why it fits your use case. You can create any tool you want and build the JSON file however you choose. You just need to look at the JSON format and try it out for yourself. The tool I created and OSS'ed does it this way because that fits the model of infra teams in companies or SaaS providers. Those teams are looking to help folks set up projects with everything they need all wired up. So, you start with a baseline, set up the project, and then you create the JSON file with the delta between the two.
Honestly think v0 is crap. Frequently fails on simple components. When it does get something right it tends to just be generic shadcn, which you can do manually to avoid having all your code in one massive block
Great video Jack and very innovative way to use ShadCn! I am curious if this were to be used in a production context, do we know at all if this so called 'hack' is likely to be supported in the future by the ShadCn team? Since the thought of building a future set of whitelabelled UI for multiple clients with the various .json files would be compelling, but would be awful if ShadCn deprecates support for this (if its thought of by them as an unintentional workaround) 😅
The JSON support will be there, but it's possible the format may change, right? It's not an official contract. So I'm asking the ShadCN folks to roll the differ into the CLI so that it can be all maintained together and folks can depend on the format.
you are great ! amazing tool you made ! thanks I love the concept (btw Pro-nextJS is amazing). A quick question: would like it possible to update a json setup based on some changes applied after the initial creation ?
Can this tool work if I want to run codemods also? I've been working on a similar idea for a more niche tech stack, but I would love to leverage this shadcn tool instead if possible
Cloning the repo would give you static versions of all of the dependencies. You'd need to keep the repo up to date with versions. Also, cloning the repo has no way of adding code to an existing repo, this method supports that.
@@jherr wait updates too? What happens if I rename, edit, or move one of the files? Feels like we need another video covering real world workflows. Getting started is nice for copy paste but what happens after that? So far this feels like an anti pattern.
@@cintron3d Is this more of a critique of ShadCN's copy/paste mechanism in general, or this additional functional of have externally supported JSON templates? Because it sounds like a critique of ShadCN's copy/paste. If that's the case I'd recommend that you look at the files that ShadCN is pasting into your project. They are very small. It's usually 5-10 lines that brings in a headless libraries then creates a component that styles the headless components. Which is what you'd have to write for yourself if you didn't use ShadCN. The reason it's pasting the code into your repo is that you are encouraged to change it. Want to change the border radius on the button? Just change it in the file. You don't need a theme provider because the theme is in the implementation of the components. That may or may not be to your liking, but it's a reasonable approach to using headless components. As for moving the files, I'm not sure why you'd do that. You can move the files if you want, but you'd need to update the components.json file to point to the new location so that the next time you used `npx shadcn add ...` they would go to the wrong place. If you just moved around the files arbitrarily you're basically opting out of ShadCN.
@@trejohnson7677 no I would copy paste one file lol How does this handle merging into existing repos, updates after the original files have been moved or modified. This comment section is so hyped on the fact that we can do this and not talking about if we should do this.
@@cintron3d i mean, it's additive. I suppose if you had the exact same file under the exact same path, then you'll overwrite it. oops. git restore. it seems to me once you slap up your components, you're good to go. frankly there's specific tooling for this, such as nx generators, or bit's module federation, but as someone who works w/ both, i can say just slapping junk into json will get the goddamn job done.
Well, no, you have a reference project. But the JSON that it creates is version-less, and it can be used to add to an existing project as well as create a new project, which is something a clone can't do.
@@jherr Merging into an existing project is novel. Still, I'm struggling to see where this would be practical. It's a paradigm shift from adding a dependency, to merging in some code that you will have to own from here on out. I already do this in special cases but don't want that to be the norm.
@@cintron3d This is just an extension of `npx shadcn add carousel`. To support carousel ShadCN needs to bring in a dependency on a headless carousel. So if you had your own carousel component you can now say `npx shadcn add raw.github.com/you/carousel/shadcn.json` and it will import your carousel code with any dependencies you need. Now that's just an example for a carousel. That could be anything. It could be a simple component like a carousel, or it could be something bigger like an auth provider, or instrumentation, or analytics. But the basics are the same, here are some dependencies, here are some files, integrate them into the app. And ShadCN takes care of putting them in the right place, and in the case of `add` warning the developer when they are about to overwrite files. As far as to whether it's practical, if adding components is practical, then this is too. And I definitely think we'll be seeing design systems and infra teams go in similar directions. Maybe not identical with this. But I can definitely see MUI, as an example, having a UI builder on their site and then having a CLI tool similar to this to bring those designs into an app. And the mechanisms would need to be roughly similar; here are the dependencies, and the files, etc.
They could have just published the additional component code like aceternity or magicUI does + npm install requirements. Wrappers around wrappers... this is what we're getting
@@jherr it just doesn't make much sense to me how they can't sit down and figure out incremental functionality for the damn thing. v0's got to be a net loss for them.
![“อ.เบียร์ คนตื่นธรรม” มาตามคำเรียกร้อง แหกศาสตร์ฮวงจุ้ย เตือนสติอย่างมงาย | แฉ 7 พ.ย. 67 [1/3]](http://i.ytimg.com/vi/5fc4S3xBNfc/mqdefault.jpg)
Love this original video idea!! cant wait to see this start popping up in repos everywhere!
Wow this is really game changer!!! I know the powerful from Shadcn but now this open big possibilities!! Amazing content
Versioning of this stuff may get tricky, but otherwise looks very interesting and promising! Thanks for the video.
This is really awesome. It's better than creating a custom npm component. Thanks a lot
shadcn takes copy and paste to the next level by saving the copy and paste part. thanks for the video!
Learned something new! As always, thanks Jack!
nice! I am gonna create some of my own components
Thanks for your research!
Awesome tool, so many potential usages for easy getting started guides, tutorials and more.
You don’t have to clone a demo now and copy the code over, they can just provide the registry to pop it straight into your project!
I love your garden
not the clearest video from a script editing. especially in all the auth trudging setup. would be helpful to frame what is about to happen in full so theres some anchoring in where we are in the narrative. the presentation of the information was all the same, even a quick excali of all the stages of what's being built and referencing where we're at now would help a lot. we see in contrast
stfu and just slap minified js into a field of a json object l0l
The video is great, thank you for your work. WorkOS is not bad, but I would like a video about self-hosting authorization solutions? Something easy peasy
Pretty cool stuff!
Idk why it bothers me that you type `rm -fr` instead of `rm -rf` even though the flags are interchangeable and it’s functionally equivalent 😅
More like, “remove fr fr, no cap” lol
I use them interchangeably. AFAIK there is no canonically correct way. This is one of those toilet paper over the top or under the bottom type situations. :)
@@jherr I 100% agree. Maybe it’s a generational gap (I’m old too, but relatively new to programming)
`rm -rf` forever 😂
@@jherr I’m going to be that guy. Research has shown that toilet paper over the top is more hygienic as the paper is less likely to touch the wall, and is less likely to require hand-contact with the wall. The wall next to the toilet is likely to be the most germ-ridden place in the bathroom other than the toilet itself.
@@Innesb Good thing I go over the top then!
So I love this concept, and unlike most other commenters I do actually have a use case I see fit for this. However what I struggle to understand is how you created the json. You kinda quickly brushed over it, which I guess is fine because the video itself is more about exploring the possibility of doing it, rather than doing it. However I'd love to see how you set that up. As far as I gather, you created a tool or something you called "differ" or something which spat out usable json. Does this work with any code snippets you make? It looked like it was based on git or something, but I'm really lost at that step. Maybe I'm just blind but going to the github repo isn't really clarifying it further for me.
Other than that, great video :D
It's an OSS utility called shadcn-differ. You run it with `npx shadcn-differ` and it compares the current state of the repo versus the initial commit. So establish your baseline with your initial commit. It should have shadcn installed. Then set up your code and run `npx shadcn-differ` and it will output the JSON to STDOUT.
@@jherr So there is no easy way to keep working in the same project and only output the json for parts of it?
Here I'm thinking imagine I made my own ui library, and I wanted to install it in the same fashion as shadcn. I'd like to just have all the components I make live in the same repo, but now in order to use this tool, I'd basically have to create a dummy repo each time I'm updating or creating new components, where I copy them into the dummy repo, then run the differ.
It would be cool if I could just run the cli in a way where I could specify which component I want to generate the JSON for and it just does it, and base it on the structure that exists for that component already. One could even imagine this step being run when building your site, (ie the component documentation site), so that as an author you just need to worry about the components, then the json output will always be built and deployed alongside your changes.
Obviously I don't know why this CLI is using git for reference, I'm sure there is a very good explanation, I just wish it would be a lot easier, granted this is a lot easier than creating the json yourself, but still. I feel like there is room for improvement.
@@JuicyBenji I can see why it fits your use case. You can create any tool you want and build the JSON file however you choose. You just need to look at the JSON format and try it out for yourself.
The tool I created and OSS'ed does it this way because that fits the model of infra teams in companies or SaaS providers. Those teams are looking to help folks set up projects with everything they need all wired up. So, you start with a baseline, set up the project, and then you create the JSON file with the delta between the two.
I've created the components for my form with v0. Crazy how good quality code it generates. Saved me an hour.
Honestly think v0 is crap. Frequently fails on simple components. When it does get something right it tends to just be generic shadcn, which you can do manually to avoid having all your code in one massive block
@@nickwoodward819brother i fucking hear u. I can’t get it past 500 lines
@@trejohnson7677 why would you want an 500 line component, lol. This is not a magical tool that will create anything for you.
Great video Jack and very innovative way to use ShadCn!
I am curious if this were to be used in a production context, do we know at all if this so called 'hack' is likely to be supported in the future by the ShadCn team?
Since the thought of building a future set of whitelabelled UI for multiple clients with the various .json files would be compelling, but would be awful if ShadCn deprecates support for this (if its thought of by them as an unintentional workaround) 😅
The JSON support will be there, but it's possible the format may change, right? It's not an official contract. So I'm asking the ShadCN folks to roll the differ into the CLI so that it can be all maintained together and folks can depend on the format.
you are great ! amazing tool you made ! thanks I love the concept (btw Pro-nextJS is amazing). A quick question: would like it possible to update a json setup based on some changes applied after the initial creation ?
Innovation from Shad
just amazing stuff
Which extension are you using to highlight part of the code in vs code during your presentation
None. That's completely manual in post.
can you provide the configuration for the terminal it looks so good what theme are you using
Here is the .oh-my-posh configuration. gist.github.com/jherr/2266b85556b8f8dc65c4e0e512f62ed7
Awesome feature
Awesome!
Which terminal are using is it kitty and what configuration you have made to look the prompt so nice and also with your cursor terminal
It's oh-my-posh with a custom configuration. gist.github.com/jherr/2266b85556b8f8dc65c4e0e512f62ed7
Can this tool work if I want to run codemods also? I've been working on a similar idea for a more niche tech stack, but I would love to leverage this shadcn tool instead if possible
Not as it is, no. I suppose that could be a possibility. I had to PR the CLI to make this tool work and they were very receptive to the PR.
Hey! Can somone explain to me why is this different from just cloning a repository with all the code you want to share?
Cloning the repo would give you static versions of all of the dependencies. You'd need to keep the repo up to date with versions. Also, cloning the repo has no way of adding code to an existing repo, this method supports that.
@@jherr wait updates too? What happens if I rename, edit, or move one of the files? Feels like we need another video covering real world workflows. Getting started is nice for copy paste but what happens after that? So far this feels like an anti pattern.
@@cintron3d Is this more of a critique of ShadCN's copy/paste mechanism in general, or this additional functional of have externally supported JSON templates? Because it sounds like a critique of ShadCN's copy/paste. If that's the case I'd recommend that you look at the files that ShadCN is pasting into your project. They are very small. It's usually 5-10 lines that brings in a headless libraries then creates a component that styles the headless components. Which is what you'd have to write for yourself if you didn't use ShadCN.
The reason it's pasting the code into your repo is that you are encouraged to change it. Want to change the border radius on the button? Just change it in the file. You don't need a theme provider because the theme is in the implementation of the components. That may or may not be to your liking, but it's a reasonable approach to using headless components.
As for moving the files, I'm not sure why you'd do that. You can move the files if you want, but you'd need to update the components.json file to point to the new location so that the next time you used `npx shadcn add ...` they would go to the wrong place. If you just moved around the files arbitrarily you're basically opting out of ShadCN.
Why do this instead of fork/copy from another repo?
ur gunna use git clone for one file lol. u should see whats under the porcelain guy.
@@trejohnson7677 if it's one file I click view raw and copy paste. Hardly need all this infrastructure for that.
@@trejohnson7677 no I would copy paste one file lol
How does this handle merging into existing repos, updates after the original files have been moved or modified. This comment section is so hyped on the fact that we can do this and not talking about if we should do this.
@@cintron3d i mean, it's additive. I suppose if you had the exact same file under the exact same path, then you'll overwrite it. oops. git restore. it seems to me once you slap up your components, you're good to go. frankly there's specific tooling for this, such as nx generators, or bit's module federation, but as someone who works w/ both, i can say just slapping junk into json will get the goddamn job done.
Woah. What have you done? 🧠
Interesting. might get tricky if you the component want's to apply certain changes to a file instead of overwriting the whole file.
Yeah, that's problematic. Might be nice to have a patch option with a fall-back to a complete overwrite?
how is this better than npm create ?
Because it can be applied to existing projects as well as creating new projects. In the Vite example it's applied to an existing project.
That's some cool stuff, but Linux devs be like , isn't that what Git patch is for ?
Erm... What happened to git clone
Right? Why would I go to this much trouble to create a JSON file when I'll need to maintain a clone-able getting started project anyway?
Well, no, you have a reference project. But the JSON that it creates is version-less, and it can be used to add to an existing project as well as create a new project, which is something a clone can't do.
@@jherr Merging into an existing project is novel. Still, I'm struggling to see where this would be practical. It's a paradigm shift from adding a dependency, to merging in some code that you will have to own from here on out. I already do this in special cases but don't want that to be the norm.
@@cintron3d This is just an extension of `npx shadcn add carousel`. To support carousel ShadCN needs to bring in a dependency on a headless carousel. So if you had your own carousel component you can now say `npx shadcn add raw.github.com/you/carousel/shadcn.json` and it will import your carousel code with any dependencies you need. Now that's just an example for a carousel. That could be anything. It could be a simple component like a carousel, or it could be something bigger like an auth provider, or instrumentation, or analytics. But the basics are the same, here are some dependencies, here are some files, integrate them into the app. And ShadCN takes care of putting them in the right place, and in the case of `add` warning the developer when they are about to overwrite files.
As far as to whether it's practical, if adding components is practical, then this is too. And I definitely think we'll be seeing design systems and infra teams go in similar directions. Maybe not identical with this. But I can definitely see MUI, as an example, having a UI builder on their site and then having a CLI tool similar to this to bring those designs into an app. And the mechanisms would need to be roughly similar; here are the dependencies, and the files, etc.
They could have just published the additional component code like aceternity or magicUI does + npm install requirements.
Wrappers around wrappers... this is what we're getting
2bad you have to click retry 10k times2 work w/ v0.
Hahah, yeah, I noticed that, I was "in line" with V0 for like an hour and a half once.
@@jherr it just doesn't make much sense to me how they can't sit down and figure out incremental functionality for the damn thing. v0's got to be a net loss for them.