Components for Web
Table of Contents
Unsorted notes about components in web development
Headless components #
Headless, aka un-styled, but (and it’s important) with a11y
| React | Vue | Svelte | Solid | Qwik | Angular | Preact |
|---|---|---|---|---|---|---|
| Radix UI | Radix Vue | Melt UI | kobalte | Qwik UI | ? | ? |
| Headless UI | Headless UI | |||||
| React Aria | ||||||
| Ark | Ark | Ark |
Notes: I didn’t metnion some libraries:
- Svelte Headless UI
- Radix Angular
- Radix Svelte deprecated in favour of Melt UI
- Radix Solid - last commit a year ago
- Solid Aria - last commit 2 years ago
- Qwik-React - allows to use any (?) React library in Qwik
- shoelace for WebComponents
Pre-styled versions of headless components #
| Headless components | Styling solution | Framework | |
|---|---|---|---|
| shadcn/ui | Radix UI | Tailwind CSS | React |
| JollyUI | React Aria | Tailwind CSS | React |
| NextUI | React Aria | Tailwind CSS | React |
| Tailwind UI | Headless UI | Tailwind CSS | React / Vue |
| Park UI | Ark | Tailwind CSS / Panda CSS | React / Vue / Solid |
| Float UI | Radix UI / Radix Vue / Melt UI | Tailwind CSS | React / 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:
- Flowbite, see for example Accordion
- Preline UI, see for example HSAccordion
- etc
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: Server-side UI Components, Rails UI components