Shadcn UI Crash Course #1 - Introduction & Setup

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ก.ย. 2024
  • 📂🥷🏼 Access the course files on GitHub:
    github.com/iam...
    💻🥷🏼 Next.js Masterclass:
    netninja.dev/p...
    💻🥷🏼 Next.js Crash Course:
    • Next.js 13 Crash Cours...
    🔗🥷🏼 Shadcn/ui docs - ui.shadcn.com/...
    🔗🥷🏼 VS Code - code.visualstu...

ความคิดเห็น • 75

  • @richardwilliam7030
    @richardwilliam7030 10 หลายเดือนก่อน +58

    I don't know about everyone but I've waited so long for a better full course on shadcn.. Thanks so much

    • @NetNinja
      @NetNinja  10 หลายเดือนก่อน +7

      You're very welcome! :) hope it helps Richard

    • @richardwilliam7030
      @richardwilliam7030 10 หลายเดือนก่อน +2

      @@NetNinja you always deliver and I'm glad I subscribed up 4 years ago 😀.
      Nodejs ,react.
      To be honest with you,you make difficult stuff simple to the immediate beginner.
      Let link up🙂

    • @letfoobar
      @letfoobar 10 หลายเดือนก่อน +5

      Full course for copy/paste component lib?

  • @lowisxix
    @lowisxix 10 หลายเดือนก่อน +6

    Aww man, finally an entire shadcn crash course. Can't wait for the next episode!

  • @sumonchandra5992
    @sumonchandra5992 10 หลายเดือนก่อน +3

    Can't wait for the next lesson. Please upload tutorials as soon as possible. ❤❤ And thank you for such content.

  • @UAng-ro9kt
    @UAng-ro9kt 9 หลายเดือนก่อน +2

    Thanks for showing the global.css file, it solved my issue.

  • @khandoor7228
    @khandoor7228 10 หลายเดือนก่อน +1

    Love Shadcn, looking forward to this series.

  • @ead5590
    @ead5590 10 หลายเดือนก่อน +3

    Yessss! Thanks a lot for this Shaun. This and Tailwind are gonna really help with speeding up my client projects

  • @orangeblossom9968
    @orangeblossom9968 10 หลายเดือนก่อน +1

    new playlist, new knowledge, awesome, thanks a lot!

  • @lonewanderer6333
    @lonewanderer6333 8 หลายเดือนก่อน

    You are a the teacher I needed but didn't deserve

  • @chuksvalentine3735
    @chuksvalentine3735 10 หลายเดือนก่อน +1

    This is amazing. I have being waiting for a tutorial like this. I will keep following the tutorial

  • @Arcanist1010
    @Arcanist1010 10 หลายเดือนก่อน

    woww, thank you so much!!
    I just started planning to learn shadcn UI an hours ago but I dont find any crash course for Shadcn UI here in youtube, and I am planning to just learn MUI or ChakraUI because of its crash course availability in youtube.
    But woah, I am so thankful that you posted about shadcn UI, big thumbs up for you, I've been your subscriber since I am learning Vanilla JavaScript.

    • @recursion.
      @recursion. 2 หลายเดือนก่อน

      but woah 🤓🤓🤓

    • @Arcanist1010
      @Arcanist1010 2 หลายเดือนก่อน

      @@recursion. ​Okay fatherless kid

  • @nirajdeshmukh7514
    @nirajdeshmukh7514 10 หลายเดือนก่อน

    Thank you very much for this course. I was looking lastest video tutorial of shadcn UI. but yours came!

  • @parenteseswebdev
    @parenteseswebdev 6 หลายเดือนก่อน +1

    I know Html & Css. Would my next learning be Javascript?

  • @SideOfHustle
    @SideOfHustle 10 หลายเดือนก่อน

    going to need to upgrade that nextjs masterclass to 14!

  • @saadniaxi1623
    @saadniaxi1623 10 หลายเดือนก่อน +1

    Sir Big fan of yours. Can we have a separate fan request video on "React/vite with atleast js" so we can add shadcn in previous projects

  • @marvii13
    @marvii13 6 หลายเดือนก่อน +3

    can u plz complete this course ..we are in real need for it 😭

  • @Yamattack1
    @Yamattack1 5 หลายเดือนก่อน

    The end of the video was like a flash bang

    • @NetNinja
      @NetNinja  5 หลายเดือนก่อน +1

      Pow!! keeps you on your toes :)

  • @cloudcoding030
    @cloudcoding030 10 หลายเดือนก่อน +2

    at 4:50, now there's two tailwind config file: one ends .ts and the other with .js. The question is which one is going to be used by next.js?

  • @tornike1s
    @tornike1s 6 หลายเดือนก่อน

    if you add extra videos about ShadCN woould be so great!

  • @rayusaki88
    @rayusaki88 10 หลายเดือนก่อน

    Waiting for this. Thank you 🙏🏻

  • @gamingcroctv4523
    @gamingcroctv4523 หลายเดือนก่อน

    we meet again net ninja!

  • @zainsyed9811
    @zainsyed9811 7 หลายเดือนก่อน

    Awesome tutorial. Thanks

  • @mumk
    @mumk 10 หลายเดือนก่อน

    exciting course, lets gooo

  • @TheALOKROY
    @TheALOKROY หลายเดือนก่อน

    Starting today

  • @leonvanrijswijk8409
    @leonvanrijswijk8409 10 หลายเดือนก่อน +1

    Could you do a series about HTMX ? That would be great.

  • @donald_hook
    @donald_hook 9 หลายเดือนก่อน

    Great tutorial! I am sure you get this question all the time... sorry - what VS code theme are you using?

  • @samadams4751
    @samadams4751 10 หลายเดือนก่อน

    First and thanks coach, Please NextUI next tutorial

  • @theouterspace5285
    @theouterspace5285 10 หลายเดือนก่อน

    Thanks for this Shaun your the best.

  • @zunnoorainrafi5985
    @zunnoorainrafi5985 10 หลายเดือนก่อน

    Thanks for this tutorial

  • @enriquecoscarelli712
    @enriquecoscarelli712 10 หลายเดือนก่อน

    Mate, this is exactly what I need right now. How did you know?

  • @panzagamesplay902
    @panzagamesplay902 5 หลายเดือนก่อน

    Great video

  • @EthanDray-uu3vm
    @EthanDray-uu3vm 2 หลายเดือนก่อน

    I'm working on a project using svelte with shadcn. I'm trying to add text within the Slider Thumb of the shad slider, with no success. Do you know of any documentation or how I could go about this? Any insight is greatly appreciated!

  • @abujihadsalahudin
    @abujihadsalahudin 10 หลายเดือนก่อน

    Wow amazing

  • @goodsamaritan208
    @goodsamaritan208 10 หลายเดือนก่อน

    Shadcn or Radix? Which should I choose? It made sense to choose shadcn before launch of RadixUI Themes but why should I choose shadcn now? Perhaps because shadcn uses Tailwindcss?

  • @neontuts5637
    @neontuts5637 10 หลายเดือนก่อน +1

    Thanks for starting shadcn playlist. There are two tailwind config files in the project one with .js and another with .ts . Which one to keep?

    • @devsirat
      @devsirat 10 หลายเดือนก่อน +1

      When using typescript, it should be the .ts version.
      By default the cli suggests the .js version but you need type out tailwind.config.ts when prompted for the filename.

    • @neontuts5637
      @neontuts5637 10 หลายเดือนก่อน

      @@devsirat Thanks! got it 👍

  • @patolorde
    @patolorde 10 หลายเดือนก่อน

    Great nice library

  • @kim92se64
    @kim92se64 10 หลายเดือนก่อน

    what a great !!! awesome

  • @michaelkurzewski2937
    @michaelkurzewski2937 10 หลายเดือนก่อน +2

    Maybe it's a silly question, but I was wondering if it's possible to set it up with React/Vite? I'm not really a big fan of Nextjs. There were to many breaking changes 12-13, which broke lots of functionality in my codebase, so I gave up on it. For my purposes, React is enough.

    • @nirajdeshmukh7514
      @nirajdeshmukh7514 10 หลายเดือนก่อน

      Same goes to me..

    • @pasokoner
      @pasokoner 10 หลายเดือนก่อน +3

      Yes it's possible. You can just think of it as bunch of components that gets copied into your codebased. It's not really specific to NextJS.

    • @theangelofspace155
      @theangelofspace155 10 หลายเดือนก่อน

      I dont like nextJS either. I would love if my favorite youtube stop making or the tutorial in mextJS and instead use vite for the frontend to give us the flexibility to add any backend stack 😢

    • @saadniaxi1623
      @saadniaxi1623 10 หลายเดือนก่อน

      Same question. It irritates so much that it won't work correctly with vite/react with js

  • @madmaxdev
    @madmaxdev 10 หลายเดือนก่อน

    Amazing

  • @learner8084
    @learner8084 5 หลายเดือนก่อน

    Just start watching the video. One thing caught my attention. The files and folders icon looks great. Could anyone let me know which extension I can install to get those icons ? Thanks very much !

  • @aryomuhammad8254
    @aryomuhammad8254 6 หลายเดือนก่อน

    goood

  • @mauriziostrazzullo1419
    @mauriziostrazzullo1419 10 หลายเดือนก่อน

    What's the use of knowing if AI is going to replace us all anyway?

  • @muhammadalfaris100
    @muhammadalfaris100 4 หลายเดือนก่อน

    Hi, can i know what tools using for recording ?

  • @gyamfiemmanuelntaadu5452
    @gyamfiemmanuelntaadu5452 10 หลายเดือนก่อน

    Do you have any tutorials on animation. Can be with framer motion or any library or even without

  • @Terminus265
    @Terminus265 10 หลายเดือนก่อน

    Oh my God

  • @Whatthebug
    @Whatthebug 10 หลายเดือนก่อน

    Hello Shaun,
    I am currently on your Laravel tutorial.
    Is there any way to connect Laravel to Oracle Database?
    And view progress(Creation of tables and rows etc) along side it.
    If yes, can you link me some materials. I have looked some of the videos online but are not completely clear to me.

  • @PHYSICSINNEPALI
    @PHYSICSINNEPALI 7 หลายเดือนก่อน

    can i use shadcn without having typescript in my project ?

  • @AmineWebDev
    @AmineWebDev 10 หลายเดือนก่อน

    should i use next.js? because i wanna use react with laravel.

  • @madmaxdev
    @madmaxdev 10 หลายเดือนก่อน

    React-query, zustand coming?

  • @destocot1729
    @destocot1729 10 หลายเดือนก่อน

    theres a tailwind.config.js and a tailwind.config.ts should i delete one?

  • @vladimirdmitrienko8158
    @vladimirdmitrienko8158 10 หลายเดือนก่อน

    Does anyone have issue, when you open an app "Recipes for Ninjas
    home " Not in the center, they align to right side

  • @sunnypepple6571
    @sunnypepple6571 8 หลายเดือนก่อน

    What if I dont want to use Typescript?

  • @christiancharlesgales2515
    @christiancharlesgales2515 6 หลายเดือนก่อน

    what are the extensions you use?

  • @slaytons4727
    @slaytons4727 20 วันที่ผ่านมา

    3:32 nodejs 16??

  • @AzaB2C
    @AzaB2C 10 หลายเดือนก่อน

    Why use Shadcn instead of MUI?

    • @theangelofspace155
      @theangelofspace155 10 หลายเดือนก่อน +1

      If you have every use MUI, and you actually do unit testing, you can probably answer yourself, if not, 1) se people just dont like the material theme, 2) the nexted and astract components use for MUI male ot hard for you to work with them, (try doing unit test on a select component, amd integrate them into react hook-form, add a zod-resolvee, and then redo your test). 3) every component is huge. .

  • @iamnin0
    @iamnin0 8 หลายเดือนก่อน

    are you using nextjs 14?

  • @user-lk5uj2mb8z
    @user-lk5uj2mb8z 10 หลายเดือนก่อน

    why dont js? pls guilde to js

  • @boot-strapper
    @boot-strapper 5 หลายเดือนก่อน

    the moment you see someone using powershell you know its time to move on. Lol

  • @santoshkumarmarar7048
    @santoshkumarmarar7048 10 หลายเดือนก่อน

    Can you please make video on form and select as soon as possible

  • @mbepe
    @mbepe 10 หลายเดือนก่อน

    React MUI is most similar

  • @chezzzysanchez5855
    @chezzzysanchez5855 5 หลายเดือนก่อน

    can I use shadcn without tailwind css?

    • @Team-hf7iu
      @Team-hf7iu หลายเดือนก่อน +1

      I don't think you can, infact you shouldn't as shadcn uses alot of tailwind css