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.
-
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
-
Otter
Otter is a self-hosted bookmark manager made with Next.js and Supabase with Mastodon integration. (by mrmartineau)
-
otter-2
Discontinued Otter is a simple bookmark manager made with Next.js with Mastodon integration. [Moved to: https://github.com/mrmartineau/Otter]
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
stitches
[Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
-
clsx is a tiny utility for constructing className strings conditionally, I use it in conjunction with tailwind-merge which merges Tailwind CSS classes without style conflicts.
clsx is a tiny utility for constructing className strings conditionally, I use it in conjunction with tailwind-merge which merges Tailwind CSS classes without style conflicts.
shadcn/ui served as an excellent source of inspiration for this approach to styling React apps. It leans more heavily on Tailwind, so if that's your thing, I recommend checking it out.
I use PostCSS to extend CSS’s features and to add a few things that make writing styles a little more convenient, but it could easily be swapped for another preprocessor like Sass or vanilla CSS. It’s up to you. You can view my PostCSS config here.
Typically styles are colocated with the components or pages that they concern, but I also include a base line of styles that are used across the app. I use a global.css file to import these files, which is then imported into the main app entrypoint.
Over the past few years, I've worked with React apps utilising various CSS-in-JS libraries, starting with styled-components, transitioning through emotion, Theme UI, and finally Stitches. I've also integrated MUI, Mantine, and Chakra in numerous client projects.
I find Tailwind useful when used sparingly, it is perfect for allowing me to append certain styles to an element on an ad-hoc basis. For example, I like to use it to add classes to elements to add some margin or to make a flex container when I don’t want to make a new bespoke class declaration. I got the idea from Andy Bell’s "Be the browser’s mentor, not its micromanager" talk from All Day Hey 2022.
Over the past few years, I've worked with React apps utilising various CSS-in-JS libraries, starting with styled-components, transitioning through emotion, Theme UI, and finally Stitches. I've also integrated MUI, Mantine, and Chakra in numerous client projects.
Over the past few years, I've worked with React apps utilising various CSS-in-JS libraries, starting with styled-components, transitioning through emotion, Theme UI, and finally Stitches. I've also integrated MUI, Mantine, and Chakra in numerous client projects.
I use PostCSS to extend CSS’s features and to add a few things that make writing styles a little more convenient, but it could easily be swapped for another preprocessor like Sass or vanilla CSS. It’s up to you. You can view my PostCSS config here.
Open Props adds to the set by providing extra custom properties for things like easing functions or animations.