# Aurelia Headless UI: composable headless components for Aurelia 2

**URL:** <https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698>\
**Category:** Uncategorized\
**Created:** [May 19, 2026, 11:59pm UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698 "2026-05-19T23:59:36Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [May 19, 2026, 11:59pm UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/1 "2026-05-19T23:59:36Z")

</div>

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/](https://aurelia-ui-toolkits.github.io/aurelia-headless/)

GitHub: [https://github.com/aurelia-ui-toolkits/aurelia-headless](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.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [May 20, 2026, 9:50pm UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/2 "2026-05-20T21:50:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [May 20, 2026, 10:07pm UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/3 "2026-05-20T22:07:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![HIRANO-Satoshi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hirano-satoshi/32/2583_2.png) [@HIRANO-Satoshi](https://discourse.aurelia.io/u/HIRANO-Satoshi)\
**Post date:** [May 29, 2026, 1:57am UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/4 "2026-05-29T01:57:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [May 29, 2026, 2:09am UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/5 "2026-05-29T02:09:07Z")

</div>

Inspired by [https://headlessui.com/](https://headlessui.com/)  
So not a term I’ve invented 🙂

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.

---

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [May 29, 2026, 10:28am UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/6 "2026-05-29T10:28:27Z")

</div>

@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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/c/cc0136df81e86b6bea8d2f52e5cd295d36da44c1.png)

😅

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [May 29, 2026, 10:40am UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/7 "2026-05-29T10:40:56Z")

</div>

May be, once my codex limits reset :))

BTW it already supports virtual list.

Nice icon 🙂 vector?

---

<div class="post-metadata">

**Author:** ![HIRANO-Satoshi](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/hirano-satoshi/32/2583_2.png) [@HIRANO-Satoshi](https://discourse.aurelia.io/u/HIRANO-Satoshi)\
**Post date:** [May 29, 2026, 10:27pm UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/8 "2026-05-29T22:27:29Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [May 30, 2026, 7:29am UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/9 "2026-05-30T07:29:18Z")

</div>

It’s aurelia’s feat 🙂

Yeah, go for it

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [June 1, 2026, 12:29am UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/10 "2026-06-01T00:29:04Z")

</div>

@nenadvicentic multi select has been added

> **[Aurelia Headless UI](https://aurelia-ui-toolkits.github.io/aurelia-headless/#/select)**

---

<div class="post-metadata">

**Author:** ![nenadvicentic](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/nenadvicentic/32/1191_2.png) [@nenadvicentic](https://discourse.aurelia.io/u/nenadvicentic)\
**Post date:** [June 26, 2026, 1:56pm UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/11 "2026-06-26T13:56:09Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)\
**Post date:** [June 27, 2026, 7:36am UTC](https://discourse.aurelia.io/t/aurelia-headless-ui-composable-headless-components-for-aurelia-2/6698/12 "2026-06-27T07:36:55Z")

</div>

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