Astro

Install

pnpm add @timelessui/components

CSS and registration

Import component CSS in an Astro layout or page frontmatter:

---
import '@timelessui/components/css/tokens.css'
import '@timelessui/components/css/popover.css'
---

Render the public anatomy as ordinary Astro markup, then load the definition as a processed client script:

<ui-popover>
  <button data-ui-part="trigger" type="button" popovertarget="details">Open</button>
  <div id="details" popover="auto">Popover content</div>
</ui-popover>

<script>
  import '@timelessui/components/define/ui-popover'
</script>

SSR and hydration

Astro renders the complete Light DOM on the server. A custom element does not need an Astro client directive. The processed script registers it in the browser, then native custom-element upgrade enhances the existing DOM. Class-only imports are SSR safe.

Attributes, properties, events, and TypeScript

Use plain attributes for authored state. Assign live properties from a client script after selecting the element. Listen for namespaced events with addEventListener, and import element or event detail types from the matching package entrypoint when the script uses TypeScript.

Astro templates are HTML, not JSX, so no JSX declaration applies to them. Completion and hover documentation for ui-* tags, their attributes, and their permitted values come from the shipped editor data instead — see Editor setup. If a page uses a React, Preact, or Solid island, import that framework’s declarations for the island’s .tsx files.

CSS-only components are a root class plus data-ui-* on a native tag. Astro spreads attributes, so the typed helper works directly in a template:

---
import { uiAttributes } from '@timelessui/components/attributes'
---

<button {...uiAttributes('button', { variant: 'primary' })} type="button">Publish</button>