Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
Material UI
Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
-
I would recommend Fomantic UI https://fomantic-ui.com/ (active community fork of Semantic UI) + Semantic UI React https://react.semantic-ui.com/ (which is a React wrapper over Semantic UI, but works with Fomantic UI as well). Almost no CSS writing is necessary, customizability of the React components via props should be enough for MVP and even further.
I would recommend Fomantic UI https://fomantic-ui.com/ (active community fork of Semantic UI) + Semantic UI React https://react.semantic-ui.com/ (which is a React wrapper over Semantic UI, but works with Fomantic UI as well). Almost no CSS writing is necessary, customizability of the React components via props should be enough for MVP and even further.
See https://daisyui.com/ for quality free/open-source components based on Tailwind classes
Use a component library with a decent look and feel, and/or if you want some style choices without futzing with CSS/code at all use a component library like react-bootstrap[0] or reactstrap[1] and pick a Bootstrap theme from Bootswatch[2].
I do this at my company (which for whatever reason doesn't like to hire frontend specialists) and we mostly are able to avoid writing any CSS.
[0] https://react-bootstrap.github.io/
Although I considered myself good at CSS, but I won't recommend you just learn it like everybody else suggesting in this thread - just build your MVP and pick up things when necessary. Here is my recommendation:
1. You're talking of MVP so I assume the UI doesn't have to be glamorous. Most of the elements you are going to leverage could be UI libs like Material-UI[0] or Ant Design[1].
2. Then, other than components, sometimes you do need some CSS handle layout and such. My choice would be CSS frameworks like Tailwind[2]. Honestly, to make good use of Tailwind sometimes require good CSS skill, but I believe people could still try Adhoc problem-driven approaches - you'll learn things along the way.
In case CSS makes you wonder after the MVP, you could try to expand styles you have been using in Tailwind, to see what's the corresponding CSS is and you'll learn.
(There's also a macro version of Tailwind named twin.macro[3] which fits React better IMO.)
(Tailwind has their official UIs (not free) [4] but I never tried them, it might work for you if you don't care about UI)
[0] https://material-ui.com/
Related posts
- ⚡Top GitHub Repositories for UI Components
- Top 9 Best UI Component Libraries/Frameworks in 2022 for Frontend Developers🔥
- Building a responsive dashboard with Base Web and React
- Is there any commonly used or standard used UI library in React?
- Where are some places I can find pre-made good looking React components (i.e button)