Introduction

Outlook

The concept of Headless UI libraries has gained considerable traction. Libraries like Headless UI pioneered the approach of providing fully accessible, unstyled UI components: offering complete freedom for developers to apply their own styling solutions. This concept reached widespread popularity with the emergence of shadcn/ui, which leverages Radix UI and Tailwind CSS to create accessible components that you can customize and extend.

While shadcn/ui offers the advantage of code ownership and customization, it presents a long-term maintainence challenge front-end developers are familiar with: overriding CSS. This issue is not unique to Tailwind CSS, as developers who have worked with other libraries and frameworks have struggled to wrestle with. While efforts have been made by several CSS toolkits to offer a high level of customization it can be quite overwhelming and laborious to make these changes. With Tailwind CSS, existing libraries such as Class Variance Authority, Tailwind Merge, and Tailwind Variants, address class management and variants, but they do not make it easy to extend and completely own a design system.

A more structured and programmatic approach is needed to bridge the flexibility of Tailwind CSS with full control and extensibility of an inherited design system.

Jade Garden is a collection of tools for developing with Headless Design Systems. It is a modification of Class Variance Authority and Tailwind Variants that has been extended to make design systems truly portable and fully customizable. While the library can be used in any case for managing a string, it truly shines when paired with the plugin to generates CSS stylesheets for Tailwind CSS.

Comparisons

The goal of Jade Garden is to expand the capabilities of creating design systems that are portable and can be fully owned by developers. This is done with several new functions such as the create functions for wrapping your own class merge algorithm, or define functions for generating typed cva and sva objects to share your design configurations easily.

Jade Garden has aimed for full compatability with Class Variance Authority and Tailwind Variants. This has been achieved by using Class Variance Authority and Tailwind Variants test code.

If you want an immediate comparison between Jade Garden and it's counterpart libraries, bundle sizes and performance benchmarks are a nice contrast to compare.

Class Variance Authority

• Bundle Size
• Runtime

Tailwind Variants

• Bundle Size
• Runtime

Gratitude

• Ark UI (Chakra UI)
  A special thank you and shout out to the Chakra organization. This project started out as Spark CSS, a structured design system for Ark UI, and was a significant motivation to create tools for Headless Design Systems. As it evolved to Jade Garden, Panda CSS became a massive inspiration to building a reusable design system with Tailwind CSS. So much so, the sva function name came from Panda. To Segun, and the Chakra organization, your open-source contributions are immensely appreciated!
• Class Variance Authority (Joe Bell)
  Thank you to Joe Bell for the creation of this amazing library! Similar to your acknowledgement for Bill Criswell (clb), I originally wanted to contribute toward your project. However, there were more enhancements I wanted to make that also included contributing to Tailwind Variants, adding more projects to maintain and keep in-sync. In addition to your updates with cva (beta), I think a better path forward was to create a new project based on your work. Thank you for your contribution to the Tailwind community.
• clsx (Luke Edwards)
  The mighty, simple, and underappreciated library that has been installed on many projects over the years. Jade Garden exports clsx and clsx/lite, and uses clsx under the hood for many of the exported functions. Thank you for creating this library, and making developers lives more simple!
• es-toolkit (Toss)
  One of the best projects I found that modernizes lodash utilities. Jade Garden has used es-toolkit to make working with strings a breeze, all while barely increasing the final bundle size. Massive shoutout and thank you!
• Tailwind Variants (Hero UI)
  Thank you to the contributors of Tailwind Variants. You have simplified the development of complex components and inspired a solution for complex CSS rulesets in unplugin-jade-garden.
• Unplugin (UnJS)
  A special thank you to the contributors of Unplugin! Unplugin has simplified the development of multiple build/bundle plugins under one output. A special shoutout to the UnJS community for developing Unplugin, along with many amazing and underappreciated libraries that are used for building libraries and frameworks. Be sure to visit their ecosystem and star their projects!