Solid

Install and TypeScript

pnpm add @timelessui/components

Import the Solid declarations once in your application types:

import '@timelessui/components/solid'

They extend Solid’s JSX.IntrinsicElements, so every ui-* tag and every permitted attribute value type-checks. Both event spellings are declared: on:ui-change, the namespaced form Solid recommends for custom events, and onui-change. The declaration is types-only and adds no runtime code and no Solid dependency.

CSS and registration

Import CSS and the required definitions once:

import '@timelessui/components/css/tokens.css'
import '@timelessui/components/css/choice-group.css'
import '@timelessui/components/define/ui-radio-group'

Markup

Solid forwards custom-element attributes and properties without a Timeless adapter:

<ui-radio-group value="system" aria-label="Theme">
  <label>
    <input type="radio" name="theme" value="system" /> System
  </label>
  <label>
    <input type="radio" name="theme" value="dark" /> Dark
  </label>
</ui-radio-group>

SSR, hydration, events, and TypeScript

SSR emits the authored attributes and Light DOM. Keep registration in client code so custom-element upgrade happens after hydration. Bind namespaced events in JSX, and use a ref when you need to assign live properties:

<ui-radio-group
  value="system"
  aria-label="Theme"
  on:ui-change={(event) => setTheme(event.detail.value)}
>
  {/* radios */}
</ui-radio-group>

The handler receives a CustomEvent<RadioGroupChangeDetail>. Public classes and detail types are available from the granular entrypoints.

CSS-only components are a root class plus data-ui-* on a native tag. Spread the typed helper rather than writing those attributes by hand:

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

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