ShadCN’s Revolutionary New CLI

[@cardiderek]

Just love this channel man. The mic sound, the background, the quality of code, expertise, Oregon background vibes... just love it dude

[@cardiderek]

I'm a former developer from Apple and recently found your content. Thank you for being open minded on using AI. I'm noticing a trend from some "smart" developers who I've worked with to bash on AI and it never made sense. We should be using it rather than fighting it.

[@Bangs_Theory]

Pretty soon they'll have no choice, either they use it or be left standing in the dust.

[@1ForTheShieldz]

Should be banning it before there are no jobs

[@mrerikstephens]

I don't disagree, BUT... as an "AI" (it's just an algorithm) skeptic, I recently used chatgpt to help me with some mapping & flyover functions. I was pleasantly surprised with how useful it was. I'm still skeptical about how much it depends on human input. What happens when its primary training input is its own output? The term I'm hearing is "model collapse". As practitioners, I think it's something we should be ready for if & when the time comes that this tool becomes as useful as a screen door on a submarine.

[@cardiderek]

@@mrerikstephens I'm sorry do you come from a neural network background? sounds like you're more of an engineer who's only exposure to AI is through NLP when ChatGPT released? It's no more of "just an algorithm" than you are buddy. Get off ChatGPT and read some papers if you want to be more informed.

[@tyroneonokue1342]

Just found your page!.I Would pay for this! love how straight forward and short this is!

[@turokII]

I’ve been loving the regular shadcn-ui and radix workflows, will have to try this! I’d love more Payload CMS and n8n content too, those have been top of mind recently

[@seetlive]

This is awesome, I love it ❤Well done ShadCN team 👍

[@ramiassi4167]

i feel like this is the future and it definitely deserve more hype

[@Pareshbpatel]

Nice introduction to ShadCN's CLI. Thanks, Jack {2024-11-04}

[@81NARY]

I did convert login and sidebar to remix, just change the link from next link to remix's link, "href" to "to" as well and change the cookie stuff to use remix's createCookie. But I'd say just wait as mr. chad said they are working on a better sidebar.

[@loquek]

I've been using ParkUI and it's had a CLI for a while, I don't know if that's interesting to note. Also it sit ontop of a lot of work that handles state and UI components with types etc... it's definitely worth a look

[@truthalwaysprevails662]

I will sit this one out. Well shadcn in itself is impressive but this ai cli stuff is half-baked. Let's see if this gets better in future.

[@Seanmclem]

You could spend your whole life dismissing random things after learning the term “half baked”. You’ll miss out on a lot. This implementation looks pretty good as it is.

[@jordanallen9536]

Fair comment, but I do love this idea. Hate being stuck with a single UI lib and trying to accommodate unique requirements. I actually use the react native reusables lib that's an extension of this. A good step in the right direction

[@truthalwaysprevails662]

@@jordanallen9536 yes, the idea

[@Ilikecats_youtube]

We really need Shadcn to support more frameworks outside of React. Solidjs would be great

[@g-kkone1662]

Amazing Jack ! Thanks to share it with me !

[@khaled_osman]

"if you thought over reliance on libraries or forking github repos and losing out on updates was bad, well we made it even worse and brought copy pasting code back" - shadcn, game changer in 2024.

[@jimiscott]

Agreed - Come back to us in a couple of years - you're either wildly rich because of all the maintenance fees their clients have paid them or bankrupt as they have no more clients.

[@jherr]

If you look at what's IN the files, it's usually ~5 lines that invoke a headless with specific tailwind styles. So it's basically what you'd write if you used a headless library, and if you did write it, it would be in your code base, just like this is.

[@tom.watkins]

Missing the point big time here I think. The merit of copy and paste is that you own the code. If you find an issue, you can fix it yourself, likewise you can do the same if you need more functionality. The maintenance headache is usually when you go all in using a package and then later down the line it gets abandoned and you're totally stuck

[@adampielach4942]

AI is a revolution. This is rather an evolution of UI libraries. It's just a matter of time until other UI libraries will do the same thing and people will continue to use the ones liked most. In the end, your manager/boss will tell you to make custom components library and all that would not give you any edge.

[@somewonderfulguy]

I think it will take time for me to rewire myself to build code like this. I still haven't dove into Tailwind...

[@darz_k.]

Tailwind is recommended - very quick to learn, and speeds up development. It's a good tool if you want to design while you're developing - or just trying things out. Still feels like css, and best to have good knowledge of css - but tailwind takes care of all the specificity issues etc., with some add-on extensions in your code editor - it'll arrange the classes in the proper order for you. Only drawback I see is the html code looking a bit verbose if you have many many classes in there, but I think it pays off.

[@aymenbachiri-yh2hd]

❤❤

[@huang47tw]

oh shoot I always thought it's shaCDN I was so wrong 😑

[@hello19286]

Now I can add untested AI slop into my codebase even faster, truly revolutionary!

[@Lucas-gt8en]

Have you tried it recently? It’s very competent at basic to intermediate designs in my experience

[@hello19286]

@@Lucas-gt8en I have, it outputs sub-junior level garbage that would never pass code review in a serious company.

[@jherr]

It gives a starting point. I used v0 this morning to have it create me an image capture component and it got it ~90% right. There was one small ref issue. But it was a whole lot quicker than writing it myself.

[@kristianlavigne8270]

That’s what it takes to be a 10x “FE Ninja developer” 😅

[@praweewongsa]

awesome tools!

[@JoelKallstrom-jp6gr]

It took you a month to do a sidebar? You should do a video on that - what the specific challenges were and how much time this would have saved you.

[@jherr]

Revving, endless revving. I will say that it was in parallel with other things.

[@JoelKallstrom-jp6gr]

@@jherr been there!

[@my_yt666]

Awesome! A fanstastic SaaS boilerplate based on shadcn/ui: Achromatic dev

[@cristianmargineanu1458]

I use nextui, it's just perfect for what I need

[@AnthonyCandaele]

Very cool, can one also use the new CLI for an Astro.js project?

[@MrJettann]

Jack, can you make video about memory optimizations in next js and how to optimize first load of the page in next as well? Would be so amazing! In my projects it's often in red color

[@Tanner-cz4bd]

would you still recommend react query with next.js 14 app router?

[@curiousmind1991]

holy shit, great looking

[@KenBanksPEng]

Would like to see the api support a few different styling options besides tailwind, including no styles.

[@mattburgess5697]

Serious question, how do you learn this? Like, I am looking at the Shadcn webpage and NONE of this is on there. Things like `--src-dir` are not listed in the documentation at all, either on the CLI page or on the NextJS specific instructions. Though admittedly it does show in the -h option for the command. Ditto login-form. Where is that? Where's that from? It doesn't show anywhere at all on the documentation. Edit: oh, it's a "block", not a component. Fun. Edit: I go to the blocks page and the charts aren't there. There is a separate charts page but it's completely different, and seems to want me to paste the content instead of having an install command.

[@pollywops9242]

Is it like scoped styles/props in Astro?(Which i barely understand too lol)

[@Jeremygrmn]

Since when was a side bar added to shadcn???

[@PointEndClick]

This video is awesome.

[@ai.aspirations]

awesome!!! Thausend Thanks!

[@chat-jpt]

what is your recording software and camera setup? Love it.

[@jherr]

medium.com/@jherr2020/how-to-set-up-your-mirrorless-dslr-for-zoom-youtube-twitch-etc-004bb13da216 Software is a combination of Adobe Premiere and Screeflow.

[@Gainmackain1]

I’m hyped…

[@beshoyrmansour]

AMAZING! 🥳🥳🌠🌠👍👍

[@blizzy78]

The login button on the home page should have been , not

[@anandpbgupta]

Looks really nice! How can I integrate it with a python based backend? Also can I make it work with fasthtml or that does not makes sense?

[@jherr]

Shadcn docs say that it supports Laravel. I'm not current on Laravel so I can't guarantee that. Can't speak to fasthtml. AFAIK it's just a templating system.

[@AmazingTechMedia]

Try using reflex, a fullstack python framework. Take a look at their docs where you can wrap react components.

[@BishalKhatri-j6u]

Which browser is that ? It looks awesome

[@jherr]

Arc.

[@1ALrX]

what a coincidence with all the wordpress stuff going on :) this is the new wordpress lol

[@theasdazx]

Hey Jack, have you ever been sponsored by vercel? If you ever did, would/did you make clear that the video is sponsored?

[@george_davituri]

👍

[@mister-hajime]

I wish it didn't have a dependency with tailwind, adding it to my current project was so much pain I stopped trying

[@ИванИванов-ц5ю6х]

main question, why to use nextjs for admin? seems like ceo is not needed here

[@sjoerdvermeijden]

Do you work in google chrome? What is that sidebar you have on the left?

[@fernandobarretocosta]

He uses a different browser called Arc. The sidebar your referring to is its OOTB way of managing tabs

[@dokkenrox]

Sounds cool but fact that it requires Tailwind is a dealbreaker for me I'm afraid.

[@TerriTerriHotSauce]

How was I not subscribed to this guy. What's wrong with me

[@thecastiel69]

Sir, I need them to stop. I need to feed my family.

[@SeattleSpursFan1882]

Hey Jack. Thanks for the update and great content as usual. Has the course been updated as well? I tripped over the Shadcn-ui/Shadcn change last week. Easily fixed and adjusted myself, but I thought an update to the Application Setup and Layout section seemed inevitable.

[@jherr]

I'll be updating that soon.

[@dumbfailurekms]

am i dumb or is the blocks page just 15 different side bars now

[@Elfein]

What's up with all the weird bots

[@jherr]

The price of minor popularity I guess.

[@TharakaAbeyratne]

`--src-dir sidebar-01` flags have been removed from the documentation. Any idea why?

[@jherr]

No.

[@PHYSICSINNEPALI]

login -01 or authentication-01 because in their shadcn website i cant see login - 01

[@jherr]

Yeah, the website needs to catch up to where the tool is.

[@leemack4562]

there's really no need for the sensationalism, all of these tools will be forgotten or replaced within a year

[@adampielach4942]

I second that

[@cryMoreLoL]

That’s what everyone said about tailwind.

[@adampielach4942]

@@cryMoreLoL Even though TW sticks around, I don't really like working with it and I hope developers will get over with it as soon as possible

[@caIebthewood]

Hmm I tried this last week but v0 was unresponsive. Will try again, shadcn is awesome, but this might be too much integration for my liking 😅

[@jherr]

You don't have to use it. And I think theoretically you could point it at different URLs if they had the same format.

[@nemeziz_prime]

What browser is Jack using?

[@jherr]

Arc.

[@tilakmadichettitheappdeveloper]

Why did you choose kitty over alacritty ?

[@jherr]

I didn't didn't know about alacritty. I'll have a look.

[@hyperrealhank]

What about turborepos?

[@jherr]

I think this works find in turborepos. Have you found issues with it?

[@paulmclachlan157]

What about a low JS version, i.e using HTMX

[@dumbfailurekms]

bruh

[@prashlovessamosa]

Great I thought why the hell you haven't uploaded anything finally.

[@MichalSikora123]

I really dont understand this hype about shadUI, please explain to me. Most of components are headless imported from different libraries with some basic tailwind styles. Doesnt have good autocomplete, tooltip doesnt have touch support. To use tooltip you have to use like 5 components (provider, trigger, etc). Most basic props and functionalities are missing and you must code it by yourself. it is like started pack for creating custom UI.

[@feldinho]

Why is it the business of a component library to initialize a new Next project? This looks like a weird accumulation of responsibilities.

[@jherr]

They want to make the flow easier to start out an application to get your v0 code running?

[@peterjordanson4201]

Hey, how does the tests on those components are looking like?

[@rayhanuddin1163]

Did you develop any product? 😅 what about css and js file size?😮😮

[@Ss-zg3yj]

You do realize that it's just copying files locally, right? 🤡

[@jherr]

Yep. I've actually commented negatively on that in the past. But then if you look at what's IN the files, it's usually ~5 lines that invoke a headless with specific tailwind styles. So it's basically what you'd write if you used a headless library, and if you did write it, it would be in your code base, just like this is.

[@JohnnysaidWhat]

this unwatchable for me because of the audio being so out of sync while you are talking

[@Niavlysm]

We need that without React ! Why all of those components library has to be react or angular? Web components need more love.

[@neociber24]

There are implementations for other frameworks, that's tj advantage of being copy/paste

[@Niavlysm]

​@@neociber24 maybe, but are they one to one compatibles? What If I want a similar UI across multiple teams using different frameworks ?

[@shadowfaxenator]

We have html and js. Just use them for reusable components, don’t use frameworks, we loose portability and have vendor locking. That’s why I love tailwind+html+some js or alpine+htmx

[@adampielach4942]

Because React is the current enterprise standard if we like it or not. We just go with the flow and wait until the tides bring some refreshment in an upcoming years. We are at the verge of AI and that's what has caught attention of all people in the world, leaving other issues swept under the rug. I guess it's not an "if" question, but rather "when".

[@eduardoborn5573]

haha the dumbest thing in a long time - just copy code into your codebase. Genius