Skip to main content

Components for Web

·

Unsorted notes about components in web development

Headless components #

Headless, aka un-styled, but (and it’s important) with a11y

ReactVueSvelteSolidQwikAngularPreact
Radix UIRadix VueMelt UIkobalteQwik UI??
Headless UIHeadless UI
React Aria
ArkArkArk

Notes: I didn’t metnion some libraries:

Pre-styled versions of headless components #

Headless componentsStyling solutionFramework
shadcn/uiRadix UITailwind CSSReact
JollyUIReact AriaTailwind CSSReact
NextUIReact AriaTailwind CSSReact
Tailwind UIHeadless UITailwind CSSReact / Vue
Park UIArkTailwind CSS / Panda CSSReact / Vue / Solid
Float UIRadix UI / Radix Vue / Melt UITailwind CSSReact / Vue / Svelte

Cross-framework components #

It is hard to ignore this new trend. As soon as all framework would port Radix-like libraries it would be easy to implement cross-framework component libraries, especially using framework independent styling solution, like Tailwind CSS. Example: Float UI.

Similar idea, but taken to the next level - mitosis. It allows to compile from Mitosis to different frameworks.

Somehow this reminds me of WebComponents, which supposed to be basic building blocks - lower level abstractions for JS framework. Yet, nobody keen to use it.

Non-framework specific components #

Another approach is to provide CSS and some JS which don’t rely on some specific framework. Very similar to WebComponents, without actually defining custom elements. For example:

Standards and comparison #

Attempt to standardise behaviour, states and content:

  • WAI ARIA patterns
  • zag.js - UI components powered by Finite State Machines
  • Open UI. Long term, we hope that Open UI will establish a standard process for developing high-quality UI controls suitable for addition to the web platform.

Open UI mainly compares styled components. It would be interesting to compare unstyled components. On the other hand I assume they all be pretty similar, because they either inspired by Radix UI or reference WAI ARIA patterns

Primitives #

Open UI mainly compares functional components, like checkbox or button. It would be interesting to investigate primitives used by different component libraries. For example

Layout #

  • Braid DS: Box, Stack, Inline, Columns…
  • Flutter: Column, Stack, GridView, AspectRatio…
  • TamagUI: XStack, YStack, ZStack, ScrollView…

A11y helpers #

  • VisuallyHidden
  • Portals
  • lock focus
  • lock scroll

Mobile specific primitives #

Animations #

Especially interruptible and spring based animations:

Gesture handlers #

Mobile specific components #

Read more: Component libraries trends, Styling components