The code behind shadcn/ui CLI

Поделиться
HTML-код
  • Опубликовано: 9 янв 2025

Комментарии • 38

  • @RaymaxOfficial
    @RaymaxOfficial 5 месяцев назад +1

    I just found a treasured video !!! 😮😮 I am surprised and glad to find this channel. Awesome content!! Highly highly recommended

  • @developerpranav
    @developerpranav Год назад

    So detailed and valueable code knowledge, always wondered to shadcn created his CLI. thanks for this great video!

  • @brayan_joan
    @brayan_joan Год назад +1

    Underrated channel for devs , great video Elie ✌️

    • @elie2222
      @elie2222  Год назад

      Really appreciate it 🙏🙏

  • @oz4549
    @oz4549 Год назад +1

    Great channel, subscribed. Please more content like this. Thank you for taking the time to educate.

    • @elie2222
      @elie2222  Год назад +1

      Thanks! Appreciate the kind words

  • @cforcoder
    @cforcoder Год назад +2

    Very Full video sir, Thankyou for your Great explanation. Sir, can you tell how i can learn to make NPM packages from beginning to Master. Please

    • @elie2222
      @elie2222  Год назад

      Good idea for a future video

  • @devsami
    @devsami Год назад +1

    Just got to know about this channel, loved it❤
    Please bring more similar content!! 👍👍
    A quick question on this video, as you mentioned that registry contains the actual components right, so do they manually create cli/registry json files from those components, or they have a script to update those json files whenever a new component is introduced or enhanced.

    • @elie2222
      @elie2222  Год назад

      Thanks for the kind words ❤️ the files get added to your own project when you run the cli. If you want you could even copy and paste those files into your project without the cli. The shadcn components do get updated over time and to accept those updates you either run the cli again or copy paste the new versions in. There’s no real need to update them. But if you want to you run add. Or diff, to see how they’ve changed. If shadcn wants to overwrite a component it will warn you before you do it.

  • @Neil_Jordan
    @Neil_Jordan Год назад

    Subscribed. Please more content like this. Thanks for sharing

  • @mania9092
    @mania9092 17 дней назад +1

    Can you please also so same video for nexjs itself?

    • @elie2222
      @elie2222  14 дней назад

      Ya. That would be awesome. Would need to find the time to dig into it

  • @snipercool4169
    @snipercool4169 Год назад

    keep uploading open source content love it 🥰

    • @elie2222
      @elie2222  Год назад

      Appreciate the support ❤️

  • @imkir4n
    @imkir4n 6 месяцев назад +1

    awesome. subbed

    • @elie2222
      @elie2222  6 месяцев назад

      Appreciated!

  • @OnlyJavascript
    @OnlyJavascript Год назад +1

    nice one. Shadcn UI date-picker needs tune up. can you please do a video on that. If i have to select my birthday, I have to navigate for 10 mins and pick my birth date. can u please show us how to fix that component?

    • @elie2222
      @elie2222  Год назад

      I'd use a different component to choose DOB if you're forced to click 100 times. Or add your own dropdown to the calendar to easily select year (and maybe month).
      Under the hood shadcn/ui uses React Day Picker for the Calendar component:
      react-day-picker.js.org/

    • @OnlyJavascript
      @OnlyJavascript Год назад

      @@elie2222 nah..I tuned it up a bit and fixed it.

    • @OnlyJavascript
      @OnlyJavascript Год назад

      @@elie2222 btw..nice tut . loved it.

  • @t1gr235
    @t1gr235 Год назад +1

    nice content

  • @yuxiang4218
    @yuxiang4218 Год назад

    great video. thanks for sharing

    • @yuxiang4218
      @yuxiang4218 Год назад +1

      just a minor thing. The screen studio effect make a bit dizzy when try to follow the code.

    • @elie2222
      @elie2222  Год назад +1

      Thanks for the feedback. I've tried to limit that. I'll limit it even more in the future.

  • @prashlovessamosa
    @prashlovessamosa Год назад

    Thanks for sharing.

  • @parthmahajan6535
    @parthmahajan6535 Год назад +1

    Earned a Sub :)

  • @krishnakantchaurasia269
    @krishnakantchaurasia269 Год назад

    Subscribed ...

  • @milon27
    @milon27 Год назад +1

    great

  • @dontknow3117
    @dontknow3117 Год назад

    Nice to have you❤ Stay Safe🕍✡️🇮🇱

  • @hakuna_matata_hakuna
    @hakuna_matata_hakuna Год назад

    this pproject can get annoying , had to write a cli to turn the variables into daisyui theme , am not a designer and making the colors from scratch was annoying , the CLI setup part itself is very poopy if you're using it in anything either than nextjs app router , i mght write something better to generate the components.json , the code structure itself os some of the most confusing I've read in an open source javascript CLI , like filers with over 200 lines of function that can be broken up , stuff referencing each other in odd patterns , 5/10 for the code quality

    • @elie2222
      @elie2222  Год назад +1

      Why not just use Daisy UI how it's supposed to be set up? Why try merge it with the shadcn/ui CLI? I use Tremor, shadcn/ui, and some Tailwind UI components and I've never run into an issue. Just use the components you need and I only use the shadcn/ui CLI for the shadcn components.
      The one part I found strange was the need to use a registry instead of just importing. I asked Shadcn about it and he said it was so you always get the latest version. But that would be true running it as an npx script too. And if anything this approach breaks versioning. I assume there is a reason he chose that approach but I don't understand it.
      I've only used the CLI with Next.js so can't comment on other usage.
      What's an example of a CLI you thought was better written?

    • @hakuna_matata_hakuna
      @hakuna_matata_hakuna Год назад

      @@elie2222 I mostly use shadcn with daisy UI for the themes , the have like 15 prebuilt easy to configure themes, am not a designer and find no joy in fiddling around with css variables until I find one that works. I can't think of a better CLI tool off my head because if it's good enough you don't notice , there's little annoying things with the CLI init step , it uses placeholders instead of just a default value that you can jump in there and edit instead of having to remember that components path should be in the format @/components/UI . Another thing is the defaults it'll still ask you if you're using the app dir even when you install it in remix , like why? . Besides that it's fine you could always copy around the components.json if the init command is too annoying.
      Another thing I wish it did was keep a list of components you've installed so that you can copy the config and hit add to get them all. The registry thing would be cool too , they seem to be storing the components as strings ina JSON file in the Nextjs API routes. That projects' code is interesting