Semantic UI

The UI Framework for the AI Era

Agents write it. Browsers run it. Humans read it.

A web component framework with signals, expressive templates, and an off-the-shelf UI kit. No build step from generation to execution.

View Docs

Try In 5 Minutes

Array signals are small data stores. Toggle a field by id, set a property across every item, filter in place. Every handler in this component is a single call.

toggleItemProperty, setProperty, filter — mutation with change detection built in
Each expression updates its own DOM node. No spread chains, no virtual DOM.

Reactivity Guide

An {#async} block renders a promise's loading, error, and success states declaratively, then re-runs when the signals it reads change. Type in the preview and watch it re-fire.

{loading} and {error} inline, no imperative state juggling
Expressions speak JavaScript, Lisp style, or both in the same template

Templating Guide

Event maps bind CSS selectors to handlers. The global prefix tracks the pointer across the whole page, so the drag below keeps working after your cursor leaves the component.

'global pointermove html' — drag tracking from inside Shadow DOM
Listeners and keybindings clean up automatically on destroy

Events Guide

The hero demo above runs on this. Every component ships a machine-readable spec of its attributes, variations, and states, so agents generate valid markup because invalid markup isn't in the contract.

Natural-language descriptions ground each option in intent
usageLevel tells agents what's common vs. niche

Component Specs

const events = { 'click .item'({ state, data }) { state.items.toggleItemProperty(data.item.id, 'packed'); }, 'keydown .new'({ state, event, value, target }) { if (event.key !== 'Enter' || !value.trim()) return; state.items.push({ id: generateID(), title: value, packed: false }); target.value = ''; }, 'click .pack'({ state }) { state.items.setProperty('packed', true); }, 'click .clear'({ state }) { state.items.filter((item) => !item.packed); }, };

{#async getResults searchTerm as searchResults} {#if hasAny searchResults} {#each searchResults} <div class="{activeIf is index selectedIndex} result"> {title} </div> {/each} {else} {>message type='noResults'} {/if} {loading} {>message type='loading'} {error as e} {>message type='error'} {/async}

const events = { 'pointerdown .dot'({ state }) { state.dragging.set(true); return 'cancel'; }, 'global pointermove html'({ $, state, event }) { if (!state.dragging.get()) return; const area = $('.area').bounds(); state.x.set(event.clientX - area.left); state.y.set(event.clientY - area.top); }, 'global pointerup html'({ state }) { state.dragging.set(false); }, };

// button.spec.js { name: 'Size', attribute: 'size', usageLevel: 1, description: 'vary in size', options: [ { value: 'small', description: 'appear small' }, { value: 'medium', description: 'appear normal sized' }, { value: 'large', description: 'appear larger than normal' }, ], }

<html> <head> <script src="https://cdn.semantic-ui.com/load" authoring css></script> <script type="module"> import { defineComponent } from '@semantic-ui/component'; defineComponent({ tagName: 'my-counter', template: ` <button class="tick">Tick</button> <span>Count: {count}</span> `, defaultState: { count: 0 }, events: { 'click .tick'({ state }) { state.count.increment(); }, }, }); </script> </head> <body> <my-counter></my-counter> </body> </html>

The UI Framework for the AI Era

Reactive State

Signals That Say What They Mean

Templating

Async Belongs in the Template

Events & Keys

Interactions as Declarations

Designed for Agents

Specs as Code Contracts

No Build Step

Agents Ship One File

See It In Action