---
title: Timeless documentation
description: Framework-agnostic UI built on modern web standards.
editUrl: true
head: []
template: doc
sidebar:
  hidden: false
  attrs: {}
pagefind: true
draft: false
---

import { CardGrid, LinkCard } from '@astrojs/starlight/components'
import { examples } from '@timelessui/examples'
import StoriesLink from '../../../components/docs/StoriesLink.astro'

export const componentCount = examples.filter((example) => example.domain !== 'recipes').length

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.

<CardGrid>
  <LinkCard
    title="Install and build something"
    description="Add the package, load the CSS, register an element."
    href="/docs/getting-started/installation/"
  />
  <LinkCard
    title="Use it with a coding agent"
    description="How to point a model at the contract, and what it reads when you do."
    href="/docs/getting-started/agents/"
  />
  <LinkCard
    title="Browse all components"
    description={`${componentCount} components, grouped by what they are for.`}
    href="/docs/components/"
  />
  <LinkCard
    title="Theme it"
    description="Cascade layers, design tokens, and component variables."
    href="/docs/styling/theming/"
  />
  <LinkCard
    title="Use it with your framework"
    description="Vanilla, React, Preact, Astro, Svelte, Vue, and Solid."
    href="/docs/frameworks/vanilla/"
  />
</CardGrid>

## 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.

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