5 UI Kits That Will Make Your SaaS Look Premium
ฝัง
- เผยแพร่เมื่อ 17 พ.ค. 2024
- Make your SaaS look premium using these amazing UI kits.
→ Untitled UI (www.untitledui.com)
→ Stratis UI (www.stratisui.com)
→ Material design kit (www.figma.com/community/file/...)
→ Apple Design Resources (developer.apple.com/design/re...)
→ Base Gallery by Uber (base.uber.com/6d2425e9f/p/294...)
#saas #business #ui #development
---------------------------------------------------------------
Watch Next:
• Stay Highly Productive...
---------------------------------------------------------------
Follow here for more content:
⭐ MAIN CHANNEL ‧ / @simonhoiberg
🎙️ ZERO TO MILLION SAAS ‧ / @zerotomillionsaas
✉️ NEWSLETTER ‧ simonl.ink/newsletter
🧵 THREADS ‧ simonl.ink/threads
📷 INSTAGRAM ‧ simonl.ink/instagram
📱 TIKTOK ‧ simonl.ink/tiktok
🌐 LINKEDIN ‧ simonl.ink/linkedin
After reading several comments, I concluded that many people confuse UI Kits with functional UIs or Frontend libraries. The presented *UI Design kits* are more targeted toward designers and are optimized for mocking up projects inside tools like Figma and Sketch.
They could or could not have a counterpart version in code (like Google or Bootstrap, to give you an example). If they don't have this portion, you could pair it with other UI frontend technologies (like MUI, Shadcn UI, Vuetify). A front-end developer would have to match the styles from the UI Kits or customize it to have that level of parity. There is some level of effort in doing that, but less than building from scratch, plus you get the best UI practices from these libraries for free.
Yes, that's spot on.
Can you make more videos on UI design as I am soon starting my own Saas project and I really love all of the UI designs in all of your projects, or maybe you can drop the link to the LinkedIn profile of your UI designer😁
Tailwind ui, Shadcn ui, Next ui, etc were missing.
Great ones!
So bored of those. No one needs to hear about shadcn again
best in the business.❤, currently building my saas with that.
@@maskedvillainaioh really, what have you made so far?
I will definitely check them out! Recently had a really bad experience with that hype "shadcn/ui" library. It turned out it's a BIG LIE! They say you can copy those components to your project and then customize the way you want, it's a bullshit. It's just a crappy wrapper on top of radix, you can't really customize it, the only thing you can do is to restyle it using tailwind, that's it, but why? radix itself has theming capabilities. And in general the components are extremely limited and dummy...
hi shadcnui vs nextui which is better when it comes to customization. thanks for the video?
Why the channels I like are uploading new videos in the same day? Great video btw Simon!
Haha, I guess Saturday afternoon (here in EU), is just generally a good day and time 😊
Thanks! Appreciate it.
Thanks Simon. I used the paid version of TailwindCSS
The timing was perfect. I'm building some tools and was looking for a good react ui kit. You mentioned chakraui in previous videos, don't you use it anymore?
Yes, we're using ChakraUI in combination with the first two UI libraries mentioned in this video.
ChakraUI is a component library for React, which isn't the same as a UI design library - in fact, you need both, and ChakraUI (being themeable and customizable), plays perfect together with these UI kits.
Great line-up! More primitive level than Untitled UI, but would definitely love to see reshaped.so on the future videos 🙌
Nice suggestion, thanks!
hey simon this is great video, can you also make video on how to manage all thing in notion
Thank you! And yes, as per popular request, I'll have a much more in-depth video on my Notion setup coming soon.
From what I understood, these UI kits only export to Figma/Sketch and you have to code them by yourself. I’m just wondering if it is worth it to code all this, when you could use a page builder like Guthenberg or Elementor to simplify the building process. It is very hard to beat something that is almost drag n’ drop - productivity-wise
Absolutely. We use Chakra UI, which is a component library for React.
This allows us to theme the components according to our Figma designs, and still get a lot of functionality out of the box 😁
@@SimonHoibergExplains Hi Simon, great video and thanks for sharing! Is there a specific reason you're using Chakra UI instead of other options like Tailwind UI?
How did these differ from UI tool kits like daisyUI and shadcn?
I haven't worked with daisyUI or shadcn, so I couldn't say.
I'll check them out 🙌
ask chatgpt
What about using design systems?
These packages does come with design systems, e.g. Untitled UI.
what is less fake in this video?
Hmmm very interesting
**googling what a UI kit is**
🤔. Why does no one tell me these things? I’ve been doing stuff from scratch so often
Is your coffee smoke CGI? 😅😅
Yeah 😂
When building a SaaS, a very popular framework to do so is NextJS 13-14, with it's features like server components its important to have a compatible library. for example tailwind. I will choose CSS libraries build on top of tailwind like NextUI. Which is completely customizable.