Shadcn/ui is without a doubt the most popular component library. It become crazy popular in the previous year or so. Nevertheless it's not perfect and doesn't cover all use cases. In this article we'll explore the most popular extensions I found to make this cool library even better. Let's begin.
1. Onborda
Onborda is like finding a secret weapon for your onboarding process. This sleek extension takes the shadcn/ui framework and transforms it into a powerful tool for creating user onboarding experiences. The step-by-step flow builder is intuitive, making it a breeze to craft engaging welcome tours or feature introductions. What really shines is how seamlessly it integrates with existing shadcn/ui projects - you'd think it was part of the original library. While it's fantastic for straightforward onboarding flows, complex, highly customized sequences might require some extra elbow grease. For teams looking to elevate their user onboarding game without starting from scratch, Onborda is a gem that's worth its weight in conversions. Check out the Onborda demo here.
2. shadcn-ui-expansions
Stumbled upon shadcn-ui-expansions while hunting for ways to beef up my shadcn/ui toolkit, and it's been a game-changer. This nifty package serves up a buffet of fresh components that play nice with the shadcn/ui ecosystem. The Date Time Picker and Infinite Scroll components are standout additions, filling gaps I was missing with shadcn. UI could use some improvement compared to the original but still follows the similar style. For devs looking to expand their shadcn/ui arsenal without reinventing the wheel, this extension is a solid bet, even if you might need to roll up your sleeves for some fine-tuning. Browse all components here.
3. Emblor
Emblor is a highly customizable, accessible, and fully-featured tag input component built with Shadcn UI. I recently worked on a project that required a component very similar to Emblor. Unfortunately, I didn't know about Emblor at that time, it could have saved me some time. Component looks great, you wouldn't even notice it doesn't come with shadcn by default and of course it's totally customizable. Check out the demo and docs on official website here.
4. File Vault
File Vault brings a much-needed file management solution to the shadcn/ui ecosystem. This extension offers a slick, drag-and-drop interface for handling file uploads, complete with progress tracking and error handling. The UI is clean and intuitive, staying true to shadcn's design ethos. While it excels at basic file operations, power users might find themselves wishing for more advanced features like batch processing or detailed metadata editing. Nevertheless, for developers looking to add polished file management capabilities to their shadcn/ui projects without reinventing the wheel, File Vault is a solid choice that can save countless hours of development time.
5. Minimal Tiptap Editor
Shadcn Minimal Tiptap brings the power of rich text editing to shadcn/ui with surprising elegance. This extension marries the robust Tiptap editor with shadcn's sleek design principles, resulting in a WYSIWYG editor that doesn't scream "I'm a third-party component!" The minimalist approach is refreshing, offering just enough formatting options without overwhelming users. It's a breeze to integrate, and the TypeScript support is top-notch. However, "minimal" is the operative word here - if you're after advanced features like collaborative editing or complex formatting, you might need to build on top of this foundation. For projects that need a clean, user-friendly text editor that plays nice with shadcn/ui, this Tiptap implementation hits the sweet spot between functionality and simplicity. You can check out the demo here.
Bonus: shadcn-date-picker
If you plan to use default Shadcn Date Picker it will probably not work well for Date of Birth use cases because user does not have the option to switch year or month. Therefore, the user will have to scroll with arrows until he finds the right year of birth, the older he is the more work he'll have :). That's why I built this simple extension by combining Select and Scrollarea components. You can checkout the demo here but it works very simple. Just install these components, copy shadcn-date-picker.tsx from here, and import it in your project.
To work with me, contact me via my website.
If you enjoyed this post I'd love it if you could give me a follow on Twitter by clicking on the button below! :)
Top comments (0)