Timeless

Components baked on the modern web platform, for a post-framework era.

Get started GitHub

Modern ingredients

Built with the browser features Timeless is meant to preserve, not replace.

CSS anchor positioning

Popover surfaces can stay attached without framework layout code.

Native Overlays

Native dialogs and popovers handle light dismiss and escape flows.

Cascade layers

Your CSS wins over component styles without a specificity fight.

Invoker Commands

A new way to define declarative behavior for UI components.

light-dark()

Color tokens can honor color-scheme without extra runtime.

Light DOM

Consumers keep readable markup and style-relevant anatomy, intended for zero layout shifts.

House rules

Timeless treats the platform as the recipe: HTML renders, CSS carries the look, native browser features do the heavy lifting, and custom elements step in only to improve behavior, accessibility, and authoring across stacks.

HTML-first, CSS-first, Accessibility-first.
Renderable before JavaScript runs.
Native controls before custom replacements.
Custom elements enhance behavior and accessibility.
Plain attributes for public component APIs.
Optional CSS, layered and override-friendly.
Side-effect-free imports; explicit define entrypoints.
No third-party dependencies or rendering runtimes.

Bakes before JavaScript

The initial shell works with HTML and CSS. JavaScript enhances only when available.

Recipe: Popover

Starts with: A native button and hidden content.
Adds: Popover wiring, ARIA state, focus behavior, and anchored positioning.
Without JavaScript: The button still opens the popover, natively.

<ui-popover>
  <button data-ui-part="trigger"
    popovertarget="menu">Menu</button>
  <div id="menu" popover="auto">
    The content
  </div>
</ui-popover>

Served withStoryLite

Preview components, explore variants, and read documentation in the same plain-web spirit.

Email address