Timeless documentation

Timeless is a UI library designed to outlast your framework. It is built from the browser’s own primitives — plain CSS over native HTML, with custom elements only where keyboard coordination, focus, or state cannot be expressed accessibly in CSS. There is no framework runtime and no third-party dependency, so the same components run in plain HTML, React, Preact, Vue, Svelte, Solid, and Astro, and keep running when you move between them.

The markup you author is the markup that ships. It renders on the server as plain HTML and CSS and is useful before any JavaScript loads, so there is no unstyled flash and no shell that rearranges itself once a runtime boots — the few components the platform cannot express declaratively say so on their own page. Your CSS overrides anything, because cascade layers put it above ours. And the whole contract is published for coding agents to read: every documentation page at its own URL plus .md, an llms.txt index, and a skill that ships in the package.

Install and build somethingAdd the package, load the CSS, register an element.

Use it with a coding agentHow to point a model at the contract, and what it reads when you do.

Browse all components49 components, grouped by what they are for.

Theme itCascade layers, design tokens, and component variables.

Use it with your frameworkVanilla, React, Preact, Astro, Svelte, Vue, and Solid.

How to read a component page

Every component page follows the same shape, so you can skip to what you need:

• Anatomy names each part you author, whether it is required, and the selector your CSS can target.
• Attributes lists every permitted value and the default. The build proves these against the stylesheets, so a documented value is a value that works.
• Element API appears for custom elements only, and covers the DOM properties and events added once the element upgrades.
• Styling separates the custom properties you may set from the global tokens the component reads.
• Before JavaScript runs says what the markup does on its own.

What the contracts guarantee

Every published import except the stylesheets and the register/* entrypoints is side-effect free, so class imports are safe during server rendering. Enhanced elements coordinate the markup you wrote rather than replacing it, and they preserve native controls wherever those controls already provide submission, labelling, reset, and validation.

Every component also has a StoryLite page with variants, live controls, and manual testing.