Aurelia Headless UI: composable headless components for Aurelia 2

1

Hi everyone,

I’ve published an initial 1.0.0 release of Aurelia Headless UI, a component library for Aurelia 2.

The goal is to provide accessible, composable UI primitives that stay close to Aurelia’s templating model while leaving styling and composition under application control.

Demo: https://aurelia-ui-toolkits.github.io/aurelia-headless/

GitHub: https://github.com/aurelia-ui-toolkits/aurelia-headless

npm: @aurelia-ui-toolkits/headless @aurelia-ui-toolkits/headless-tailwind

There is also an optional Tailwind CSS theme package. The theme is meant to be a sensible default, not a design system requirement. It is token-driven, so apps can override CSS variables or replace the theme entirely.

A few design goals:

  • Aurelia-first API and templates

  • Components expose state/behavior but avoid owning more markup than necessary

  • Styling is replaceable

  • Works well with validation/form scenarios

  • Useful for building app-specific design systems on top

This is an initial release, so feedback is very welcome. I’d especially appreciate comments on API shape, Aurelia idioms, validation integration, and which primitives are missing or should be refined.

9 Likes
2

well … i wasn’t expecting that icon for a component lib :smiley:

1 Like
3

It does reflect the intent though :slight_smile: mostly brains and you provide a haircut :slight_smile:

2 Likes
4

Wow! This is a great UI component set for Aurelia!

I like it since its design is totally changeable with CSS. This can be a choice when I make a new app.

What does Headless mean, actually? I thought it was for server-side rendering or something. And yes, the icon does not seem to express its value.

5

Inspired by https://headlessui.com/
So not a term I’ve invented :slight_smile:

As for the icon, while it’s obviously a joking one, I think it reflects the intent - the library provides template structures and logic, and the consumer app provides CSS.

6

@MaximBalaganskiy Is there any chance to build a proper multi-select, perhaps virtualized (able to hold ~1000 items) into this collection? Something similar exists in Angular Material components.

If I may suggest a better icon:

image
image512×512 25 KB

:sweat_smile:

7

May be, once my codex limits reset :))

BTW it already supports virtual list.

Nice icon :slight_smile: vector?

1 Like
8

I see. I looked into the code and found it’s much cleaner than Tailwind Headless.

In terms of the icon, I could suggest yet another one in headless samurai style…

2 Likes
9

It’s aurelia’s feat :slight_smile:

Yeah, go for it

1 Like
10

@nenadvicentic multi select has been added

2 Likes
11

@MaximBalaganskiy I checked multi-select on the toolkit page. It looks like you nailed it.

I did, though, find a few bugs. At least I think it’s bugs. In the Multiple select with checkboxes example:

  1. If 2 items are selected (Aurora, Nova), clicking Nova deselects Aurora, instead of deselecting Nova.
  2. I am able to select checkbox of disabled, 3rd item Atlas
  3. Sometimes, when I opened dropdown, 2nd item Helios was highlited (highlight with less intensity - I guess hover color), but it wasn’t hovered over, nor checked.
  4. Howering over Helios and then moving mouse down to blocked item leaves Helios hovering color on. (maybe this is related with point 3)

Hopefully this helps a bit.

12

All fixed, thanks.
If you find anything, please create an issue on GH

1 Like