9
10 Comments

What is the best UI "framework" for launching an MVP?

I'm looking to build out a UI for my application and I'm wondering what folks have had the most success with. I'm a talented frontend developer, but would like to build out something quickly without spending too much time pixel-pushing.

The frontend is React and I'm looking at React-based component libraries like Mantine et. al.

I've recently stumbled on Tailwind and specifically, Tailwind UI which entails a cost of $299 up front for a plethora of UI components/designs that are essentially plug-n-play.

What have you used to build out a decent looking UI when launching the first version of your app?

on November 1, 2022
  1. 4

    Another frontend engineer here. Two answers - I'll give you the answer you don't want first and then the one you do.

    My first answer is it doesn't matter. If you just want to get moving quickly, these component frameworks are all going to get the job done, and their differences are not related to the "pick up and hackability" of the library. Most of the nuance comes down to preference - how you want to style things, or the component apps. Every entrepreneur I've seen who has been successful has just picked the frameworks they're already familiar with.

    My second answer is if you want me to tell you something so you can get moving, I would either suggest material ui if you're more beginner or intermediate level engineer, or radix ui with tailwind css and daisy ui if you're more seasoned.

    Why?

    Material UI comes prepackaged with styles. Like the guy above said, it let's you get moving asap and gives you all the features you need. If that's your goal, it's a great choice.

    But, if you're more seasoned, radix ui gives you access to headless components (only component functionality) and then tailwind and daisy give you a beautiful set of styles to apply until you want to restyle parts of the components. And its much easier to restyle the radix ui components than material ui.

    But given your question I would probably push you in the direction of material.

    GL!

  2. 1

    Thanks for all the thoughtful comments. Quick update from my (OP) experience. I pulled the trigger on Tailwind UI ($299) and have been able to move quickly through the UI in a relatively short amount of time. So far, no regrets on dropping $300 to move fast.

  3. 1

    I personally won't use tailwind for a dashboard again. They just give you the basic presentation and no real functionality. It will cost you a lot of time adding in the functionality and the learning curve of using all their classes instead of just normal css/sass. I have built several projects with tailwind and it has some good points but unless you are working in a team where multiple people are contributing to the front end I wouldn't recommend it for anything functional.

    If you are working with react, MUI is popular and fairly well fleshed out.

    It really depends on the type of app you are building. I typically make data driven applications that have a lot of grids so for me having a component pack that also includes a server component to generate queries for the data layer is a big timesaver. I use asp.net c# so kendo/devextreme have server components that translate queries from grids/lookup components to the data layer through IQueryable interface.

    Feel free to use tailwind UI for the catalogue part of the site, you can cut and paste markup for static data but if your MVP has any complexity then for your dashboard go with any of the mature component libraries that work well with your stack and you will end up with a polished product much quicker.

  4. 1

    Definitely take a look at https://chakra-ui.com/. Its based on the same principles as Tailwind but has ready to use components included.

    We use it for https://supastarter.dev because it allows you to build accessible UIs fast and easy!

  5. 1

    I'll second some of the other people in the comments here and wholeheartedly recommend TailwindUI (and TailwindCSS). It is a bit expensive upfront, but the sheer number of components and the quality makes up for it (in my opinion).

    They do also offer discounts to certain demographics which are worth looking into.

    I bought TailwindUI approx 2 years ago (using the student discount, 50% off), and since then have probably used it on 4-5 projects for total time savings of ??? maybe 20-30 hours? hard to say for sure, but a lot.
    They're all built using TailwindCSS, which can be a bit confronting and quirky at first, but is pretty easy to get used to and is actually quite productive (pro tip: get the autocomplete extension for your IDE).

    hope that helps!

  6. 1

    Big fan of Tailwind UI -- it gets precompiled so lighting fast, looks great, and Tailwind syntax is pretty easy to use once you get the gist of how things are structured.

    The one thing I don't love about Tailwind UI components and designs is the templates, while written in React, aren't actually React components. Each examples is one html block (lists do leverage map and list properties, so element HTML is not repeated).

    You can build React Components from the examples, but you really wish they'd already broken things into sub-components and presented the library as a bunch of composable elements that could be edited.

    In that vein, it's also not the easiest to customize your look and style -- you can set high level overrides that will filter down, but all the spacing is at the className level, so you need to edit everything if you want your own consistent look.

    That all said, the templates are well built, its not overly prescribed, and its easy to move fast b/c every thing is so localized and just a matter of setting class names.

  7. 1

    I recently started with https://webpixels.io/components, and I really like that solution. It let me, software developer, create nice looking UI only by using premade components. It's a paid solution, but it saved me a lot of time. That's based on Bootstrap 5.

  8. 1

    I would recommend one of the most popular component libraries (for React), MUI. https://mui.com/

    I learned frontend programming from scratch (JS, React, HTML, CSS) while using this library and I must say that this component library has it all. It also has the wonderful "sx" prop for extremely easy shorthand styling.

    So far, there really hasn't been a scenario that MUI cannot handle.

    1. 1

      I checked out Tailwind, and I believe these are two different "genres" of libraries.

      It seems Tailwind has premade sections of components whereas MUI has premade components. Tailwind is much more "plug and play", whereas MUI leans towards the "do-it-yourself" aspect while providing the building blocks.

      Both definitely fit different use-cases. However, in terms of launching an MVP quickly, Tailwind probably takes the cake.

Trending on Indie Hackers
From $0 to $1K MRR in 8 Months: Bootstrapping Habit Pixel as a Solo Dev User Avatar 32 comments How to acquire your first users for $0? User Avatar 22 comments AI Visibility Is the New SEO for Indie Makers User Avatar 17 comments Product-led Growth User Avatar 6 comments Getting my first 100 users with $0: what actually worked User Avatar 2 comments Helping budget-conscious startups and individual developers grow their user base: starting at just $20 per month! User Avatar 1 comment