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.

8 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?

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…

1 Like
9

It’s aurelia’s feat :slight_smile:

Yeah, go for it

1 Like
10

@nenadvicentic multi select has been added

1 Like