Lubomír Blažek

Posted on Feb 29

Announcing Winduum 1.0 - Framework agnostic component library for TailwindCSS

The question inevitably arises: Why introduce yet another UI component library into the mix? Simply because Winduum is different in a few areas than the others.

1. It focuses on web standards, accessibility and minimum javascript
2. It's progressive, uses modern features and standards
3. It's framework-agnostic, so it can be used in any scenario
4. It's source code is plain CSS and JS, so it can be also used without a build step

In today's CSS frameworks, you only have a few choices when it comes to a framework-agnostic UI component library for TailwindCSS that also leverages semantic class-names; for example great projects like daisyUI or RippleUI. However, both are heavily reliant on @apply, which is not standardized plain CSS.

This is why our approach is a little different. Winduum encourages writting components in plain CSS or other (pre/post)-processors and using utility classes to enhance the components.

Yes it's kind of against the main principle of TailwindCSS to use sematic classes, but sematic classes and utility classes can be a great combo!

As a CSS framework Winduum focuses on beautifully styled accessible components written in plain standardized CSS; components you can extend with your own components and use them in any framework, even as web components.

TailwindCSS is optional, but recommended. Winduum provides a plugin with a bunch of new handy utility classes. However, you don't need to use utility framework at all or you can choose an alternative such as UnoCSS. The choice is up to you!

Themes, color-mix and P3 Color Gamut

Winduum embraces advanced color techniques, featuring the innovative color-mix() and support of the P3 color gamut. This ensures a vibrant and visually engaging user experience on supported devices.

Colors can be defined in any color space - rgb, hsl, oklch, whichever you prefer. With color-mix, you can easily change the opacity too.

color: color-mix(
  in var(--space), 
  var(--color-primary) calc(var(--tw-bg-opacity) * 100%), 
  var(--tw-bg-mix)
)

Learn more about theming on winduum.dev/docs/themes

Accent Color

The idea is that you should be able to set accent color via accent-color CSS property. It is discussed that there should be access to the color value of this property, e.g. via AccentColor or AccentColorText.

Most of the components are using this idea via --color-accent and --color-accent-foreground as an alternative for their accent color.

.accent-primary {
  --color-accent: var(--color-primary);
  --color-accent-foreground: var(--color-primary-foreground);
  accent-color: var(--color-accent);
}

For example, this way you don't have to change background-color property for each component's color variant, you just change the accent color.

Modern CSS Features

Staying ahead of the curve, Winduum leverages modern CSS features, allowing you to harness the power of the latest specifications and improve overall styling capabilities. All of these are supported in current browsers.

CSS Properties
CSS Logical Properties
CSS Nesting
Modern pseudo selectors such as :where, :is and :has
Modern CSS reset
Low specifity or layers
CSS color-mix

Modern CSS Reset

Winduum comes equipped with a modern CSS reset, providing a clean slate for consistent styling across various browsers and ensuring a solid foundation for customization.

The main difference from other resets is using all: unset which resets most of the styles. As a result, you have a clean slate and are free to style your components.

Learn more on winduum.dev/docs/layout/reset

Accessible Components Based on Web Standards

Most of current libraries only reinvent the wheel and create new accessible components from the ground. While this can be good in some cases, in others it comes with bunch of overhead that is not really needed in others.

Do you need to build an easy product website? Perhaps in these scenarios you don't need to use a heavily reactive framework such as React or Vue with Radix primitives. And don't get me wrong, I love libraries such as shadcn/ui. But these are often the better choice for more complex projects. Does your basic website with one contact form really need a reinvented accessible functionality of a checkbox as a button?

You can choose something lighter such as Astro and leverage web standards as input[type=checkbox], view-transitions, dialog, details, scroll-snap etc.

And suddenly you can have a site that passes all Core Web Vitals.

Winduum is all about web standards that can be used in any framework. And here are some components as an example:

Dialog - leverages dialog with minimum javascript
Carousel - leverages scroll-snap with minimum javascript
Details - leverages details with minimum javasript
Drawer - leverages scroll-snap with minimum javascript
Form - leverages checkValidity with miminum javascript
Compare leverages input[type=range] with minimum javascript

Javascript API primitives are heavily customizable and can be used headless in any project.

Form control for everything

The Control component literally supports all possible input types, even type=color! Thanks to :has support, you can use one sematic class ui-control for every input type, textarea or select. If you need a basic date picker, time picker or color picker, all of these are heavily standardized in modern browsers. Winduum has a form component for any usage you might possibly need.

<div class="ui-control">
    <input type="color" id="color" oninput="this.nextElementSibling.textContent = this.value">
    <label for="color">#ffffff</label>
</div>

Control - including floating label and icon variants
Range - for accessible range sliders, including vertical and multi variants!
Check - for accessible checkboxes and radios
Switch - for switch things on and off as checkbox or radio
Color - in case you need to select a color as a checkbox or radio
Rating - an accessible checkbox group for rating purposes
Button - rich button with multiple variants to submit your forms!

New Tailwind CSS Utilities

Winduum includes a TailwindCSS plugin with some handy new utilities. Here are some examples:

CSS properties - the plugin extends the tailwind config with CSS properties for colors, fontFamily, fontWeight, ease, zIndex, fontSize, spacing, borderRadius etc so that your CSS and TailwindCSS are more in pair. See default CSS properties in cofing.css
accentColor - adds a new --color-accent and --color-accent-foreground to accent- class for better accent support
divideGap - easier gaps for the divide utility class

Learn more about utilities on winduum.dev

New progressive aproach at containers

Winduum provides a new grid-cols-container utility class which leverages CSS grid and is inspired by Kevin Powell

With this you can leverage CSS grid for better container styling with less markup.

Learn more at winduum.dev/docs/utilities/container

Extended Media Breakpoints

The smalest breakpoint in TailwindCSS is sm at 640px, which doesn't really cover a lot of mobile devices. And the biggest is 2xl at 1536px, which on other hand doesn't cover most of big displays. Winduum has its own scale reaching from 360px to 2528px to cover all possible resolutions and all defined in em.

xs - 360px
sm - 416px
md - 768px
lg - 960px
xl - 1216px
2xl - 1312px
3xl - 1408px
4xl - 1600px
xxl - 2016px
2xxl - 2528px

Modular and Customizable

Take the code and copy and paste it to your project, or import it from npm and customize it with CSS properties!

All is really heavily modular and customizable. All components are sorted into variants in single files. So you can cherry-pick only what you want for your project.

Framework-Agnostic CSS Library

As has already been mentioned, Winduum is framework-agnostic by design so that you can create your own components using your preferred framework. Javascript primitives can be also adapted in any framework.

If there is interest, simple pre-built components may be developed for popular frameworks. Currently, only winduum-vue and winduum-react are in the process of development and most components have usage and installation examples in the docs. Want to help? We're open to pull requests!

You can also see various examples in many frameworks at Trying Winduum Online section in the docs.

Compatible with Other UI Libraries

Since Winduum is written with standards in mind, it can also be easily adapted with existing solution such as shadcn/ui or add more complex functionality with Radix primitives or Headless UI.

It uses a similiar variables naming pattern as shadcn/ui in order for you to easily add more complex components to your project when needed.

Anything else?

Is this all? Not in the slightest! Visit winduum.dev to see everything Winduum has to offer! Check out the source code at GitHub and give us a star if you like it! We are also launching the project on ProductHunt!

This was a long road of a two-year, mostly free time, development as a modest small-side project. Also big thanks to Newlogic Digital which backed the project.

I'm glad that I can say that Winduum is now feature complete in 1.0 version!

DEV Community