Skip to content
Aether UI logoAether UI
Auto

Introduction

AetherUI

Section titled “AetherUI”

AetherUI is a headless, framework-agnostic Web Component library built on Lit. It provides a collection of accessible, customizable UI components that work with any JavaScript framework or vanilla HTML.

Why AetherUI?

Section titled “Why AetherUI?”

Framework Agnostic

Section titled “Framework Agnostic”

Web Components are native browser technology. AetherUI components work seamlessly with React, Vue, Angular, Svelte, or plain HTML - no framework-specific wrappers needed.

Lightweight

Section titled “Lightweight”

Each component is designed to be small and efficient. Components are individually importable, so you only ship what you use.

Accessible

Section titled “Accessible”

Built with accessibility as a priority. All components follow WAI-ARIA guidelines and include proper keyboard navigation, focus management, and screen reader support.

Customizable

Section titled “Customizable”

Style components using CSS custom properties (CSS variables) and shadow parts. No complex theming APIs - just standard CSS.

Quick Start

Section titled “Quick Start”

Install the package:

Terminal window
npm install @aetherui-kit/core

Import and use a component:

import { defineAeButton } from '@aetherui-kit/core';


// Register the component
defineAeButton();
<ae-button variant="primary">Click me</ae-button>

Core Concepts

Section titled “Core Concepts”

Component Registration

Section titled “Component Registration”

Before using a component, you must register it with the browser’s custom element registry:

// Register individual components
import { defineAeButton, defineAeAccordion } from '@aetherui-kit/core';
defineAeButton();
defineAeAccordion();


// Or register all components at once
import { defineAll } from '@aetherui-kit/core';
defineAll();

Styling with CSS Variables

Section titled “Styling with CSS Variables”

All components expose CSS custom properties for styling:

ae-button {
  --ae-button-bg: #0066cc;
  --ae-button-color: white;
  --ae-button-radius: 4px;
}

Using Slots

Section titled “Using Slots”

Components use the standard Web Component slot API for content projection:

<ae-accordion-item>
  <span slot="header">Click to expand</span>
  <p>This content is shown when expanded</p>
</ae-accordion-item>

Next Steps

Section titled “Next Steps”