Shadcn + Next.js 13 is HEAVEN | A QUICK GUIDE
Ғылым және технология
Check out my web dev courses below🔥
developedbyed.com
-------------------------------------------------------------------------------------------------
Shadcn is becoming my new favourite way to build out UI's together with Tailwind. In today's episode i'll just show you a quick walktrough on how you can add themes, add a dark mode and show you the process on how you can install components in your Next 13 app.
ui.shadcn.com/
-------------------------------------------------------------------------------------------------
👨💻Connect with me
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
-------------------------------------------------------------------------------------------------
🎶 Dope music
C Y G N - Bikini Palm-trees chll.to/d0798a7f
C Y G N - Emotions chll.to/bfeb2b66
C Y G N - Let it go chll.to/41ba6c49
#react #tailwindcss #shadcn
Пікірлер: 114
The Next.js 13 course is getting closer to be released, it will be completely revamped with shadcn + tRPC/server actions and a couple of entirely new chapters! Thanks for everything ✨✨
@marvinkr
9 ай бұрын
Haha loved the button pun 😂 Will the course also include Tanstack & Driizzle?
@developedbyed
9 ай бұрын
Yeah both of these!
@Zaromir
9 ай бұрын
my body is so ready
@zdmgy3778
9 ай бұрын
I need a specific time.😀
@trburaktr16
8 ай бұрын
When will the course be updated? I can't wait to buy it.
It really is! I've applied this combination on certain projects and it's SO simple to program with!
@sjonny-depp
7 ай бұрын
Yes, but can be way too much overwhelming with huge chunks of code for a simple dropdown or button.
@fbenfrank
2 ай бұрын
@@sjonny-deppyou always have the option to code it yourself.
Awesome video, will try it in my next project! It’s gonna be a huge time saver
I tried to make shadcn for the app my department is working on. My company tried to make a shadcn for the company. And then I saw this and I just... wow. This bloke is gold.
holy moly, i thought i was gonna have to go with mui. Shadcn looks like the right way to go
Hey! Thanks for sharing. At work we chose Preline UI and I tried it for one of my personal projects. But for the next one, I wanted to try shadcn ui. Your video helped me to make the decision. :)
The disappearing effect on switching modes made me subscribe liked the video 🤣
Yessss here is the video I wanted
This is a really great man!
looks awesome, I will give it a shot !
Wonderful definitely I should make use of it
Great video! What's the name of the VSC theme?
One quick fix, in the zod section you said that the username is looking for not more than 5 chars buts it's the opposite, it's looking for min 5 chars in it
Sir, Have you tried NextUI ? Should I go with NextUi or shadcn ?
This is awesome
Which VSCode theme you are using ?
Hey Ed! Not related to the video but I’m really interested in getting your react course. Is it still up to date? Thanks!
Could you help me with something, the shad cn components are styling properly if theyre used within the app folder but not if theyre used on a pages folder, i also added the routes to the css config but it still remains broken, how comd
Which vscode extensions and theme are u using? Everything’s so smooth :)
@booom5572
5 ай бұрын
Bump! What theme is this!
For the custom theme, we need to copy paste it like u did for red. Is there a way to do it based on user input like in the website? The user will click red, blue, orange, etc and it will change accordingly
@Houseofstartup
9 ай бұрын
Same question
@kiranojha8811
8 ай бұрын
You'll have to keep track of multiple theme variables and use js to dynamically change that
which one to use Radix Themes or shadcn themes ??
00:25 | Your face scared me a little 🤣
Suggestion for one of the next videos. ShadeCN + Storybook.
I always like to just install everything by not specifying a component when using the shadcn add command.
nice to hear that author voice and "clean" English.
What is the name of the theme please , i tried nightowl but the colors here are lighter
Hey Ed can you do sencha Extjs?
Is there any guide for designers? (like all about Figma stuff and etc.) We're building a new product and our team decided to use an open-source design-system, so im on it. But all I've found about shadcn is dozen tons of developer stuff (and poor design file in Figma Community) and as you can guess I don't give a hack what all of this means. So I'm just interested of what kind of adjustments I can do and how the handoff process using this library is organised at all.
Why they not provide warning, info variant of buttons by default
yep it is 😊
It seems pretty neat. I'll give it a try for my next project
You know it's good when the account has Morty as a pp
I love u!
6:53 how is he getting these suggestions is there a vs code extension for this or what?
nice one
How do I add all the color options available for end user?
@anonymoussloth6687
9 ай бұрын
Same question
What a chad!
Hey how can build array Tags Ui using shadcn
funniest youtuber ever lol
How would i do this without using typescript?
I think Mantine UI 7.0 is better alternative. Would like you to review it if possible.
@aurelianspodarec2629
8 ай бұрын
its not xd
Where do i get desktop background like yours?
@Quabbe2
9 ай бұрын
Internet has some wallpapers
I found this a bit difficult to follow a long, the code snippets for className I manually typed out because I couldn't find the navbar styling, I feel I had to pause the video every few seconds just to write out what you were doing, but it felt exhausting and incoherent as to what I am doing
I love your videos. I would also love to buy your courses but in my country's currency, they're too expensive. 😥
@kkkotiqqq
3 ай бұрын
Dont buy his courses, this is a crap
Sir please make a complete course on GSAP with Three JS
@btssugahit4663
9 ай бұрын
Seriously threejs is giving me headaches and heart attacks
@imsofckinenergized
5 ай бұрын
@@btssugahit4663😂 Yeah Same here
cant install it on nextjs (JS project) :/
Cool! You have created another bare simple page that says nothing about more sophisticated cases where I have found shadcn to be inconvenient.
@developedbyed
9 ай бұрын
Just edit the actual UI component, how would it be inconvenient?
@abdu1wahid105
8 ай бұрын
Sometimes a little CSS is all thats required... that's whats so good about utility classes, you decide to use them on a per case basis. 👌Fomo-ing into the latest UI won't instantly catapult learner coders into seasoned Software engineers.
its not working from my project
Why Next.JS over Nuxt.JS?
@mario_luis_dev
8 ай бұрын
bc NoNuxt November is approaching…
Next UI
No pagination
I use ant.design for my UI‘s
@imsofckinenergized
5 ай бұрын
Yeah it's good But PrimeReact is better than that. I recently switched to PrimeReact after I found that.
Can you make a video with Shadcn without typescript and next?
Looks like hell to me, and why there’s so many bots in this video?
we upgraded bbbbbbttch
Can you please make video on shadcn ui form and how to integrate select,radio, and checkbox in form
funny thing is: stating you use Next.js 13 has no correlation whether you use app or pages router.
@developedbyed
9 ай бұрын
Did you see the app folder there? That means it’s app router
…/Learning/woooo 😂
At this stage webdev is witchcraftery
csd
its been a month buddy & you're outdated😂 now do the same with next14 for us!
shadcn is extremelly lagging
please. Why my visual studio code when writing classname dont show the list existing like you. Teach me please
@developedbyed Trust me Dev ED was the better name in my opinion
type your message
sadiqu hasan 123
This is awesome
nice one
Hey how can build array Tags Ui using shadcn
This is awesome
This is awesome
This is awesome
This is awesome
This is awesome
This is awesome
This is awesome
This is awesome
nice one
nice one
nice one
nice one
nice one
nice one
nice one
nice one
nice one
nice one