headlessui VS stitches

Alternatively, we can use a pre-built UI component that handles all of this for us: Headless UI. Headless UI is a library of fully accessible UI components made by the creators of Tailwind CSS. It includes a bunch of ready-to-use components, including menu, popover, tabs, dialog, and more.

On the UI framework step, “headless” is an unfortunate name to choose because there is a UI framework called frameless… https://headlessui.com/

The javascript part of Bootstrap is not very composable with React, but there is also a good existing framework for React Components, Headless UI.

https://headlessui.com/ is for react and vue

Or go with a nice Headless UI library and style it yourself * HeadlessUI * Radix * Reakit * ReachUI * React Aria * or any of these

Tailwind also has https://headlessui.com/ which implements logic but not markup. TailwindUI has markup but not logic or styles, TailwindCSS has styles but not logic or markup.

Tailwind Labs. (n.d.). Headless UI. Retrieved March 30, 2023, from https://headlessui.com/

Ok lets keep it simple, can you suggest a library for custom WP sites similar to this? https://headlessui.com

I prefer plain & customizable style-less frameworks. Radix UI has more features than Headless UI, but adding style is more difficult. So components by shadcn is good starting point.

Some libraries, such as Stitches, claim near-zero runtime performance overhead by tackling the first issue (parsing JavaScript CSS objects). Nevertheless, they still inject the parsed CSS into the DOM at runtime, which means they haven’t entirely eliminated the performance concerns.

Stitches allows you to map your design system

Define strict system of colors, spaces, etc then attempt to synchronize usage of it in both design and code (tools like https://vanilla-extract.style/ or https://stitches.dev/ can help with enforcing system on software side)

There are some issues with SSR and NextJS in React 18: https://github.com/stitchesjs/stitches/issues/863

According to the docs, NextUI is a React UI library that allows you to make beautiful, modern, and fast websites/applications regardless of your design experience. It is created with React and Stitches, based on React Aria, and inspired by Vuesax.

Stitches CSS customization

I am a big supporter of basically everything that Vercel does. When I saw their projects being made with Radix and Stitches I had to try it. Here is how it went.

typescript + styling with stitches

I use Stitches

TW Classed makes it super simple to create re-usable Tailwind components in both React and other frameworks. It ships with a React-specific library and a framework-agnostic core library. It takes a lot of ideas from Stitches.js and has most of the same functions (but with classes instead).