Upcoming Shadcn Components are AMAZING!
HTML-код
- Опубликовано: 10 сен 2024
- Get ready for the latest and greatest Shadcn components - they are AMAZING! Stay tuned for the upcoming release and see for yourself why these new components are great!
Next video to watch:
• How to implement Shadc...
⚔️ Join The Horde
- Discord: / discord
- Github: github.com/The...
Some of the projects to check:
Connector: github.com/The...
AI Framework: github.com/The...
Orcish Admin: github.com/The...
#webdevelopment #orcdev #shadcn #newcomponents #shadcnnews #news #react #nextjs #typescript
Join the Mighty Horde! Subscribe! ⚔
LETSGO! ShadCN is great indeed. We intend to use the Figma ShadCN template > to react (good idea for a video as well!)
Shadcn is indeed fantastic. They’re just getting started and won’t be stopping anytime soon!
Using the Figma Shadcn template and converting it to React sounds like a brilliant idea, I'll see what I can do ⚔
The sidebar(s) look great... One thing, though, they should have the sidebar drawer pull out underneath or push the work document/page so that in mobile it looks more native.
Actually they have it, you just have to dig a little bit on their GitHub.
Here it is: github.com/shadcn-ui/ui/blob/main/apps/www/components/mobile-nav.tsx
I'm using it on my website, you can just keep your nav items in some array or something like that, and depending on the resolution import mobile-nav or sidebar :D
So excited for this update. Radix was great but shadcn made it so much easier.
Yes! It’s so easier!
I’m curious to see what they’ll build next, I love the direction they’re headed!
Speaking of sidebars, is there anyway to make a fixed sidebar without making the main content overlaping it? what i do is go to main content wrapper and add left margin or padding with width of the sidebar, is this the right approach or there is a professional way? (Using tailwind)
That's basically the right approach to do that. There are of course other ways, for example to use grid, to have 1 grid column for sidebar, and 4 for the main content.
It's easier with some padding to push the main content, and for mobile view you can just remove that padding.
If we're talking about Next.js just do it in layout file and you don't have to worry about it anymore, all pages are going to be in the {children} main content ⚔️
@@orcdev i kinda did the same thing to replicate the "nextjs" thing, i made an AppLayout component where the sidebar are is on the top followed by another div thats gonna contain the main content and passed it as children props, the two are wrapped with a flexbox div direction is row and instead of giving the sidebar a position of fixed i replaced it with stickey, it worked but i still dont know if thats a good or right way to do it. What you think about this one?
@@user-uz9me3nb6n Sounds good to me! Important thing is that it's in one file only, so if you potentially find some errors, that you can fix it in that AppLayout only.
Google rewindui sidebar
@@HelloFromNick Looking great! Thanks for this one!
Also nice themes
Shadcn uses forwardref which isn't available in react 19.
They have already prepared everything my friend. Radix has a PR, and Shadcn will update right after them.
github.com/shadcn-ui/ui/discussions/3695
You say you're a "dark mode type" but you're one of the few people I've seen use X and shadcn on light mode 🤔
I always have system settings on, so it automatically switches :D
Dark mode… use it.
Using system settings :D
@@orcdev please… my eyes are searing. Literally couldn’t watch the video.
@@damonguzman hahah sorry on that, somehow everything on my computer is dark mode except X :D
shadcn??? More like CHADcn
hahahaah nice one! MEGAGIGACHADcn :D :D :D