Let's Build a Component Library Using Shadcn's UI Components

Поділитися
Вставка
  • Опубліковано 29 жов 2024

КОМЕНТАРІ • 47

  • @akahades11
    @akahades11 Рік тому +5

    You deserve more recognition. Keep up the good work! I liked and subscribed in hopes of more quality contents like this.

    • @raj_talks_tech
      @raj_talks_tech  Рік тому +1

      Happy that you found value, will try and do my best !

  • @CandraDarmawan-e7q
    @CandraDarmawan-e7q 11 місяців тому +1

    Yeay!, my subs make it hit 1k.
    thank you for your hard work and share to the people

  • @yashkhd1100
    @yashkhd1100 Рік тому +3

    This was great...liked and subscribed..!! One addition with this already great video can be setting up pro grade library structure with Nx or Turbo workspace

    • @raj_talks_tech
      @raj_talks_tech  Рік тому +1

      Thanks Yash. I am a barebones guy, I like minimal build-tooling setup and scale it based on my needs. Some CLI tools have a lot of boilerplate !

  • @Mohammed-019
    @Mohammed-019 Рік тому +1

    This is the video I was looking for, I am wait for more quality contents like this.❤

    • @raj_talks_tech
      @raj_talks_tech  Рік тому +1

      Glad you liked it! Will try to come up with more quality content

  • @tiagoagm
    @tiagoagm Рік тому +2

    Very good man. Great tutorial. Thanks

  • @vuluu4066
    @vuluu4066 Рік тому +3

    Although we have the tree-shacking for the components, the shadcn-ui-library-starter/dist/style.css still includes css of all the exposed components. Do you have any solutions to solve it?

    • @raj_talks_tech
      @raj_talks_tech  Рік тому

      Hey,
      Thanks for the question I haven't tried this out yet, but it could be that this is a limitation of tailwindcss.
      In the final build of your app, do you see tailwindcss purging unused css ?

    • @vuluu4066
      @vuluu4066 Рік тому

      ​@@raj_talks_tech A potential solution is that setting up a monorepo for the Component Library. Each component has their own Vite config to build and to expose js, css artifacts.

    • @raj_talks_tech
      @raj_talks_tech  Рік тому +1

      That could work. But isn't that an overkill ? I assume chakra-ui had such a setup like that but they never seem to recommend it. But yeah should work !
      Or you could try pandacss instead of tailwindcss

  • @mrbanana6969
    @mrbanana6969 7 місяців тому +1

    Nice tutorial. I set my test app to be ts instead of js and the variant props (i.e. variant and size for Button) are not typed. So there is no intellisense/ I can essentially add any prop to the button in importing apps, despite the d.ts files for the button being build properly. any ideas why this would be ?

    • @raj_talks_tech
      @raj_talks_tech  7 місяців тому

      Not sure looks like a dev environment problem. Never tried this setup, usually if you are using JS it shouldn't complain unless u add a //@ts-check at the top of the file

  • @huakun
    @huakun 3 місяці тому

    Thanks! I was doing exactly this but couldn't get tree shaking working. Saved me several hundred KB!

  • @Shubham-yc6nz
    @Shubham-yc6nz Рік тому +1

    Thanks quality content. I didn't understand everything but not bad

    • @raj_talks_tech
      @raj_talks_tech  Рік тому

      Appreciate the feedback, can you tell me what you dint understand so that I can improve my next videos

  • @waffle-codes-js
    @waffle-codes-js Рік тому +3

    I promise I'm not trying to be a jerk, I had a hard time with the word as well..
    Component is pronounced: Kuhm-poh-nuhnt. The first O makes more of an 'UH' sound, The second "o" sounds the same as the letter, e.g. "oh".

    • @raj_talks_tech
      @raj_talks_tech  Рік тому +1

      haha yes you are right. I often miss pronounce it. Thanks for the feedback!

  • @eca8799
    @eca8799 7 місяців тому +1

    is this possible to do in an existing app project?

    • @raj_talks_tech
      @raj_talks_tech  7 місяців тому +1

      Should be if you have tailwindcss support

  • @CardCollectorKing
    @CardCollectorKing Рік тому +1

    Any possibility of going through form components using shadcn?

    • @raj_talks_tech
      @raj_talks_tech  Рік тому

      Hey,
      I will add it to my list of things to consider. Thanks for the feedback !

  • @JoshPalmeroc
    @JoshPalmeroc 5 місяців тому

    Do you know how to include the css within the components automatically? It would be nice if the consumer of the library doesn't additionally need to import a css file. Thanks for the video btw very helpful!

    • @raj_talks_tech
      @raj_talks_tech  5 місяців тому +1

      U could write ur own plugin for tailwind, or just build and import the css file

  • @Assoehosselaar
    @Assoehosselaar Рік тому +1

    Amazing video!

  • @Phantom-pj1ls
    @Phantom-pj1ls Рік тому +1

    What about if I dont want to use Tailwind? Can I still use shadcn?

    • @raj_talks_tech
      @raj_talks_tech  Рік тому +1

      Most likely not. Because all the components still use tailwind classes heavily.

    • @Phantom-pj1ls
      @Phantom-pj1ls Рік тому

      @@raj_talks_tech Yeah it sucks! It's an awesome tool and I hope someday we can use it with other than Tailwind! I had to make some tweaks even to get basic color change between active/inactive tabs!

    • @raj_talks_tech
      @raj_talks_tech  Рік тому

      ​@@Phantom-pj1ls Or you can try and convert the tailwind css classes to css-module classes and use them like a normal CSS. That would also be an option.

    • @Phantom-pj1ls
      @Phantom-pj1ls Рік тому

      @@raj_talks_tech I could but that wasn't the problem! The problem is that for some reason this data-[state=active]: "bg color here" doesn't seem to work css directly like in Tailwind! I had to use a hook to toggle between active tabs and with that state changing color!

  • @JD-eu8re
    @JD-eu8re Рік тому

    what do we change so that we don't have to install Tailwind in the consumer App ?

    • @raj_talks_tech
      @raj_talks_tech  Рік тому

      I mean you dont have to, you only have to import the index.css from this library you are building. Once your library bundle is ready then you can simply work with that. Look at the example project !

  • @DioArsya
    @DioArsya Рік тому +1

    wow this is so cooool 🎉

  • @pluraltest9242
    @pluraltest9242 Рік тому +1

    Awesome content

  • @jamesnelson174
    @jamesnelson174 Рік тому +1

    Great tutorial, How can i build my own npm package from shadcn and only use and build the only components i want. i want to have it on npm package too. I want to be able to use it in other projects not just by copy pasting.
    Thank you... Anticipating your response.

    • @raj_talks_tech
      @raj_talks_tech  Рік тому

      Hey James,
      Thanks the code is in the description and you just have to do an npm build and publish it to the public npm registry, and you are good to go!
      In your target apps, you can add them as an npm module and use it!

    • @jamesnelson174
      @jamesnelson174 Рік тому +1

      @@raj_talks_tech thanks for the reply. Can u do an example on ur channel so we all learn.? Thank you again

    • @raj_talks_tech
      @raj_talks_tech  Рік тому

      Will consider it for future videos !

  • @Randomguy48279xyz
    @Randomguy48279xyz Рік тому

    👍

  • @mujtabakamal9538
    @mujtabakamal9538 Рік тому +1

    How can I import this library in NextJs app

    • @raj_talks_tech
      @raj_talks_tech  Рік тому

      You can publish it and then import it. But if you are using Next.js then I would say follow the instructions for setting up the library at ui.shadcn.com

    • @mujtabakamal9538
      @mujtabakamal9538 Рік тому

      thanks