@agent-ui-kit/web-components

v0.0.59

Published

2 days ago

A complete web component library for building agent-powered interfaces. Framework-agnostic — works with React, Vue, Svelte, Astro, or plain HTML.

Downloads

4,523

0High
0Medium
0Low

kimgish

@agent-ui-kit/web-components

A complete web component library for building agent-powered interfaces. Framework-agnostic — works with React, Vue, Svelte, Astro, or plain HTML.

Light DOM, zero shadow DOM, CSS-first. Every component is a standard custom element styled via external CSS with @layer cascade ordering.

Quick Start

CDN (CodePen, prototypes)

<link rel="stylesheet" href="https://unpkg.com/@agent-ui-kit/web-components/dist/agent-ui.css">
<script type="module" src="https://unpkg.com/@agent-ui-kit/web-components/dist/register.js"></script>

<aui-button primary accent>Get Started</aui-button>

npm

npm install @agent-ui-kit/web-components

// Batteries-included: registers all elements + traits
import '@agent-ui-kit/web-components/agent-ui.css'
import '@agent-ui-kit/web-components/register'

<aui-button primary accent>Get Started</aui-button>

Tree-shaking (import only what you use)

import '@agent-ui-kit/web-components/agent-ui.css'
import { AuiButton } from '@agent-ui-kit/web-components/components'
import { define } from '@agent-ui-kit/web-components/element'

define('aui-button', AuiButton)

Package Exports

| Import path | What you get | |---|---| | @agent-ui-kit/web-components/register | Defines all elements + traits. Side-effect import. | | @agent-ui-kit/web-components/components | Tree-shakeable component class exports | | @agent-ui-kit/web-components/components/graph | Graph editor subsystem (separate chunk) | | @agent-ui-kit/web-components/components/editor | Pan/zoom editor canvas (separate chunk) | | @agent-ui-kit/web-components/components/agent | Agent chat subsystem (separate chunk) | | @agent-ui-kit/web-components/traits | Trait infrastructure + all built-in traits | | @agent-ui-kit/web-components/element | AgentElement base class + define() | | @agent-ui-kit/web-components/reactivity | Signals, effects, computed | | @agent-ui-kit/web-components/store | List store utilities | | @agent-ui-kit/web-components/icons | Phosphor icon bootstrap | | @agent-ui-kit/web-components/agent-ui.css | Combined stylesheet (all tokens + components) |

CSS

One stylesheet contains everything: OKLCH color system, design tokens, layout attributes, and all component styles.

<link rel="stylesheet" href="https://unpkg.com/@agent-ui-kit/web-components/dist/agent-ui.css">

CSS is organized in @layer cascade order:

colors — OKLCH computed palette with light/dark via light-dark()
tokens — spacing, sizing, typography, radius scales
ui — presentational attributes, variants, families, state
elements — CSS-only element tag styles (aui-header, aui-footer, aui-inset, etc.)
ui.components — component base styles

Color scheme

<!-- Auto (system preference) -->
<html>

<!-- Force dark -->
<html data-theme="dark" style="color-scheme: dark">

<!-- Force light -->
<html data-theme="light" style="color-scheme: light">

Components

All components use the aui- prefix. They are standard HTML custom elements — no framework bindings needed.

Layout & Structure

| Element | Description | |---|---| | <aui-container> | Surface for cards, panels, widgets. Attributes: kind="card\|panel\|widget", bordered, elevation="1-7", shadow="1-3" | | <aui-header> | Adaptive header with slot="leading", slot="trailing", slot="content" | | <aui-footer> | Same slot pattern as header | | <aui-content> | Scrollable content region. Grows to fill. | | <aui-inset> | Padding wrapper. Uses container-level padding token. | | <aui-stack> | Flex layout. direction="row", gap="1-12", align-items, spacer | | <aui-divider> | Horizontal or vertical rule | | <aui-panes> | Resizable split panes |

Controls

| Element | Description | |---|---| | <aui-button> | Polymorphic trigger. primary, accent, ghost, scrim, outline, icon-leading, icon-trailing, label, hide-label, width="full", grow="1" | | <aui-input> | Text input. type, placeholder, width="full" | | <aui-textarea> | Multi-line input with autogrow | | <aui-select> | Dropdown, listbox, combobox, toolbar. mode="bar\|list\|combobox" | | <aui-option> | Item inside select/listbox | | <aui-optgroup> | Grouped options with label | | <aui-checkbox> | Checkbox control | | <aui-switch> | Toggle switch | | <aui-radio> | Radio button (inside <aui-radio-group>) | | <aui-range> | Slider input | | <aui-segmented-control> | Toggle between options. Contains <aui-segment> | | <aui-field> | Form field wrapper with label, description, error, required, hide-label, width="full" | | <aui-calendar> | Date picker calendar grid |

Controls (continued)

| Element | Description | |---|---| | <aui-input-group> | Connects input with prefix/suffix addons | | <aui-button-group> | Groups buttons with shared/connected borders | | <aui-fieldset> | Groups form fields under a legend heading | | <aui-input-otp> | Segmented one-time password input |

Display

| Element | Description | |---|---| | <aui-icon> | SVG icon from registry. name, size | | <aui-heading> | size="xs\|sm\|md\|lg\|xl\|2xl" | | <aui-text> | size="xs\|sm\|md\|lg", muted, weight | | <aui-badge> | Status badge. accent, success, warning, danger | | <aui-avatar> | User avatar with initials or image. size, square | | <aui-avatar-group> | Overlapping avatar stack with overflow counter | | <aui-tooltip> | Hover tooltip | | <aui-toast> | Notification toast | | <aui-chip> | Compact pill-shaped label for tags and filters | | <aui-link> | Styled anchor for inline and standalone links | | <aui-kbd> | Keyboard shortcut indicator styled as a key cap | | <aui-image> | Enhanced image with lazy loading, aspect ratio, fallback, lightbox | | <aui-stat> | KPI display widget with label, value, trend arrow, change text | | <aui-description-list> | Key-value pair display using dt/dd with grid layout | | <aui-copy-button> | One-click copy button with visual check feedback | | <aui-empty-state> | Centered empty placeholder with icon, heading, description, action |

Feedback

| Element | Description | |---|---| | <aui-skeleton> | Loading placeholder with shimmer animation | | <aui-spinner> | Animated loading indicator | | <aui-alert> | Contextual banner for status messages | | <aui-progress> | Horizontal progress bar | | <aui-progress-circle> | Circular SVG ring progress indicator | | <aui-meter> | Visual gauge for known-range scalar values | | <aui-sparkline> | Compact inline bar chart for KPI widgets | | <aui-code-block> | Code display with language header and copy button |

Color

| Element | Description | |---|---| | <aui-color-picker> | Compound color picker composing area, sliders, and field | | <aui-color-area> | 2D gradient surface for picking saturation and lightness | | <aui-color-slider> | Single-axis gradient slider for a color channel | | <aui-color-field> | Text input for color values with inline swatch preview | | <aui-color-swatch> | Color preview square with checkerboard transparency |

Date & Time

| Element | Description | |---|---| | <aui-calendar> | Date picker with day, month, and year views | | <aui-calendar-picker> | Compound date picker with trigger input and calendar popover | | <aui-calendar-range-picker> | Compound date range picker with trigger and calendar popover | | <aui-date-field> | Segmented date input with editable month, day, year segments | | <aui-time-field> | Segmented time input with editable hour and minute segments |

Navigation

| Element | Description | |---|---| | <aui-tabs> | Tab bar with <aui-tab> + <aui-tab-panel> | | <aui-accordion> | Collapsible sections with <aui-accordion-item> | | <aui-breadcrumb> | Breadcrumb trail with <aui-breadcrumb-item> | | <aui-pagination> | Page navigation | | <aui-tree> | Tree view with <aui-tree-item> | | <aui-nav-item> | Navigation list item with icon, label, badge, active state | | <aui-stepper> | Multi-step progress with <aui-step> and connector lines | | <aui-disclosure> | Collapsible content section with animated expand/collapse | | <aui-disclosure-group> | Coordinates child disclosures with optional accordion mode | | <aui-tag-group> | Keyboard-navigable container for <aui-chip> elements |

Overlay

| Element | Description | |---|---| | <aui-dialog> | Modal dialog. open, size | | <aui-drawer> | Slide-out drawer. open, side | | <aui-command> | Command palette with <aui-command-input>, <aui-command-list>, <aui-command-item> | | <aui-context-menu> | Right-click triggered context menu via Popover API | | <aui-dropdown-menu> | Trigger button + popover menu for actions | | <aui-hover-card> | Rich preview card shown on hover/focus with configurable delay | | <aui-notification-center> | Notification inbox with bell trigger, unread badge, popover list |

Data

| Element | Description | |---|---| | <aui-table> | Data table with <aui-table-head>, <aui-table-body>, <aui-table-row>, <aui-table-header>, <aui-table-cell> | | <aui-bar> | Chart bar element. label (CSS tooltip), highlighted, faded | | <aui-feed> | Infinite scrolling feed container | | <aui-file-upload> | Drop zone with file list for drag-and-drop or click-to-browse uploads | | <aui-carousel> | Horizontal scrolling slides with CSS scroll-snap and navigation |

Agent / Chat

| Element | Description | |---|---| | <aui-agent-panel> | Chat panel shell | | <aui-agent-feed> | Message feed with auto-scroll | | <aui-agent-thread> | Message group (avatar + bubbles) | | <aui-agent-message> | Individual message bubble. role="user\|assistant", status="streaming\|typing\|error" | | <aui-agent-text> | Markdown-rendered message content | | <aui-agent-input> | Chat input area | | <aui-agent-prompt> | Prompt composer | | <aui-agent-seeds> | Suggestion chips | | <aui-agent-activity> | Thinking/loading indicator |

Graph / Editor

| Element | Description | |---|---| | <aui-editor> | Pan/zoom canvas. background="dots\|grid\|none", min-zoom, max-zoom | | <aui-editor-layer> | Stacking layer. name="under\|content\|over\|chrome", type="html\|svg" | | <aui-graph-ui> | Graph editor. Extends editor. connectable, snap-to-grid | | <aui-graph-node> | Draggable node. x, y, node-id | | <aui-graph-noodle> | SVG connection. from="nodeId:portId", to="nodeId:portId", color, label, animation="stream\|blob" | | <aui-graph-port> | Connection endpoint. port-id, side="top\|right\|bottom\|left", type="input\|output" |

App Shell

| Element | Description | |---|---| | <aui-app-shell> | Full application layout | | <aui-sidebar> | App sidebar with <aui-sidebar-header>, <aui-sidebar-content>, <aui-sidebar-footer> | | <aui-page> | Page wrapper with <aui-page-main>, <aui-page-context> |

Layout Attributes

Semantic HTML attributes for layout — no CSS classes needed.

<!-- Spacing -->
<aui-stack gap="4" padding="3">

<!-- Width -->
<aui-field width="full">
<aui-button width="full">

<!-- Flex -->
<aui-button grow="1" basis="1">    <!-- equal-width buttons -->
<aui-heading spacer>               <!-- flex: 1 1 0% -->

<!-- Alignment -->
<aui-stack direction="row" align-items="center" justify-content="center">

<!-- Text -->
<aui-text text="center" muted size="sm">

<!-- Responsive -->
<div responsive>                    <!-- enables container-query collapse -->

<!-- Sizing tier -->
<aui-button size="sm">
<aui-input density="compact">

Traits

Composable behaviors attached via the traits attribute. Work on any HTML element.

<!-- Drag and drop -->
<div traits="{ trait: 'drag', selector: '.item', mode: 'slot', axis: 'vertical' }">
  <div class="item">Drag me</div>
  <div class="item">And me</div>
</div>

<!-- Tooltip -->
<aui-button traits="tooltip" title="Settings">

<!-- Keyboard shortcut -->
<div traits="{ trait: 'shortcut', key: 'mod+k' }">

<!-- Multiple traits -->
<div traits="[{ trait: 'drag', mode: 'free' }, { trait: 'resize' }]">

Available Traits

Gesture: drag, drop-zone, resize, snap-resize, swipe, toss, press-hold, pan-zoom, magnet, flip, ripple

Navigation: roving-focus, list-navigate, trap-focus, search, selection, range-select

Form: validate, mention, slash-command, text-trigger, edit, backtick-wrap, link-paste, clipboard, copy

Display: tooltip, toast, popover, modal, overlay, dismiss, auto-dismiss, collapsible, present, parallax, intersect, confetti, noodle

Data: sort, virtual-scroll, store, persist, gateway, linked-scroll

Utility: shortcut, toggle-scheme, toggle-state, hover, css-inspect

Variants & State

Semantic attributes for visual variants — applied directly on elements.

<!-- Variants -->
<aui-button primary>
<aui-button primary accent>
<aui-button ghost>
<aui-button scrim>
<aui-button outline>

<!-- Intent colors -->
<aui-badge success>Online</aui-badge>
<aui-badge warning>Pending</aui-badge>
<aui-badge danger>Error</aui-badge>

<!-- State -->
<aui-option active>
<aui-option selected>
<aui-button disabled>
<aui-button loading>

<!-- Container kinds -->
<aui-container kind="card" bordered>
<aui-container kind="panel" elevation="2">
<aui-container kind="widget">

Examples

Login form

<aui-container kind="panel" bordered max-width="md">
  <aui-header>
    <span slot="leading">
      <aui-stack gap="1">
        <aui-heading size="lg">Sign in</aui-heading>
        <aui-text muted size="sm">Enter your credentials</aui-text>
      </aui-stack>
    </span>
  </aui-header>
  <aui-content>
    <aui-inset>
      <aui-stack gap="6">
        <aui-field label="Email" width="full">
          <aui-input type="email" placeholder="[email protected]" width="full"></aui-input>
        </aui-field>
        <aui-field label="Password" width="full">
          <aui-input type="password" placeholder="Enter your password" width="full"></aui-input>
        </aui-field>
        <aui-button primary accent width="full">Sign in</aui-button>
      </aui-stack>
    </aui-inset>
  </aui-content>
  <aui-footer>
    <span slot="content">
      <aui-text muted size="sm">No account? <a href="#">Sign up</a></aui-text>
    </span>
  </aui-footer>
</aui-container>

Chat interface

<aui-agent-panel style="height: 30rem;">
  <aui-agent-feed auto-scroll scrollable>
    <aui-agent-thread role="user" sender="You">
      <aui-agent-message role="user">
        <aui-agent-text format="plain">How do I structure a color system?</aui-agent-text>
      </aui-agent-message>
    </aui-agent-thread>
    <aui-agent-thread role="assistant" sender="Claude">
      <aui-avatar>C</aui-avatar>
      <aui-agent-message role="assistant">
        <aui-agent-text>Use a **three-layer** approach:
1. Primitives — raw OKLCH values
2. Semantic tokens — `--ink`, `--fill`, `--border`
3. Component tokens — scoped overrides</aui-agent-text>
      </aui-agent-message>
    </aui-agent-thread>
  </aui-agent-feed>
  <aui-agent-input>
    <aui-agent-prompt>
      <aui-textarea placeholder="Ask a question..."></aui-textarea>
    </aui-agent-prompt>
  </aui-agent-input>
</aui-agent-panel>

Graph editor

<aui-graph-ui connectable style="min-height: 640px">
  <aui-graph-layer name="wires" type="svg">
    <aui-graph-noodle from="src:out" to="dst:in" color="accent" weight="2"></aui-graph-noodle>
  </aui-graph-layer>
  <aui-graph-layer name="content">
    <aui-graph-node x="60" y="70" node-id="src">
      <aui-container kind="card" bordered padding="3">
        <aui-text weight="medium">Source</aui-text>
        <aui-graph-port port-id="out" side="right" type="output"></aui-graph-port>
      </aui-container>
    </aui-graph-node>
    <aui-graph-node x="340" y="70" node-id="dst">
      <aui-container kind="card" bordered padding="3">
        <aui-text weight="medium">Target</aui-text>
        <aui-graph-port port-id="in" side="left" type="input"></aui-graph-port>
      </aui-container>
    </aui-graph-node>
  </aui-graph-layer>
</aui-graph-ui>

API Documentation (Machine-Readable)

Every component, trait, and block has a structured YAML spec with attributes, slots, events, tokens, accessibility, constraints, and examples.

Single JSON (recommended for LLMs)

One fetch gets the full API for all 109 components, 50 traits, and 54 blocks:

https://unpkg.com/@agent-ui-kit/web-components/dist/api.components.json

const api = await fetch('https://unpkg.com/@agent-ui-kit/web-components/dist/api.components.json').then(r => r.json())
// api.components — array of component specs
// api.traits — array of trait specs
// api.blocks — array of block specs

Each component spec includes:

name, tag, summary, description
attributes — all signal-backed attributes with types, defaults, descriptions
presentational — variant, intent, size, density, radius, state
slots — named slots with accepted content
events — emitted events with detail shapes
tokens — CSS custom properties consumed
a11y — ARIA roles, keyboard interactions, focus management
constraints — attribute conflict rules
composition — valid parent/child relationships
examples — HTML snippets with descriptions

Individual YAML files

https://unpkg.com/@agent-ui-kit/web-components/dist/docs/components/button.yaml
https://unpkg.com/@agent-ui-kit/web-components/dist/docs/traits/drag.yaml
https://unpkg.com/@agent-ui-kit/web-components/dist/docs/blocks/login-form.yaml

Bundle Size

| Entry | Gzip | |---|---| | agent-ui.css | 46 KB | | register.js (all components + traits) | 15 KB | | components.js (tree-shakeable) | 2 KB | | traits.js | 25 KB | | icons.js | 1 KB | | components/graph.js | 4 KB | | components/editor.js | 2 KB | | components/agent.js | 1 KB |

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@agent-ui-kit/web-components

Quick Start

CDN (CodePen, prototypes)

npm

Tree-shaking (import only what you use)

Package Exports

CSS

Color scheme

Components

Layout & Structure

Controls

Controls (continued)

Display

Feedback

Color

Date & Time

Navigation

Overlay

Data

Agent / Chat

Graph / Editor

App Shell

Layout Attributes

Traits

Available Traits

Variants & State

Examples

Login form

Chat interface

Graph editor

API Documentation (Machine-Readable)

Single JSON (recommended for LLMs)

Individual YAML files

Bundle Size

License