Skip to content
Timeless

Components

43 components. 25 are CSS only and need no JavaScript; 18 are custom elements that enhance markup you author.

Foundations

  • SeparatorCSS onlySeparate related regions with native semantics.
  • Text and CodeCSS onlyReadable links, keyboard hints, and code treatments.

Actions

  • ButtonCSS onlyTactile native actions with clear variants.
  • ToggleCSS onlyA pressed-state button using native button behavior.
  • Toggle GroupCustom elementCoordinate single or multiple pressed controls.

Forms

  • Checkbox GroupCustom elementCoordinate a group of native checkboxes.
  • Choice GroupCSS onlyStyle native checkbox and radio fieldsets.
  • ComboboxCustom elementFilter an authored listbox from a native text input.
  • FieldCSS onlyConnect labels, descriptions, errors, and native controls.
  • File InputCSS onlyA native file input with consistent field anatomy.
  • ListboxCustom elementKeyboard selection over authored options.
  • Native SelectCSS onlyStyle a native select while preserving platform behavior.
  • Number StepperCustom elementEnhance a native number input with increment controls.
  • Radio GroupCustom elementCoordinate a roving native radio group.
  • RangeCSS onlyA readable native range control with an output.
  • SelectCustom elementEnhance authored trigger, value, and listbox anatomy.
  • SwitchCSS onlyA native checkbox exposed as an immediate on or off setting.
  • MenuCustom elementRoving keyboard navigation for commands.
  • Menu ButtonCustom elementConnect a command trigger to a native popover menu.
  • TabsCustom elementAssociate tabs and panels with native keyboard behavior.
  • ToolbarCustom elementArrow-key navigation across a group of commands.

Content

  • AvatarCSS onlyIdentity fallback and presence indicators.
  • CardCSS onlyFlat structured content with public anatomy.
  • CollapsibleCSS onlyStyle native disclosure groups without replacing details.
  • DisclosureCSS onlyNative details and summary with stable styling hooks.
  • GroupCSS onlyArrange related controls with density and attachment options.
  • ListCSS onlyStructured lists with titles and descriptions.
  • TableCSS onlyResponsive native tables with readable density.

Feedback

  • AlertCSS onlyCommunicate status without replacing native live-region semantics.
  • BadgeCSS onlyCompact status and metadata labels.
  • EmptyCSS onlyExplain an empty state and offer one clear next action.
  • MeterCSS onlyDisplay a scalar measurement within a known range.
  • ProgressCSS onlyExpose determinate or indeterminate task progress.
  • SkeletonCSS onlyReserve stable space while content loads.
  • SpinnerCSS onlyIndicate a short operation without changing layout.
  • ToastCustom elementAnnounce transient status from an explicit toaster.

Overlays

  • DialogCustom elementEnhance an authored native dialog with focus management.
  • Hover CardCustom elementOpen supporting content from pointer or keyboard intent.
  • PopoverCustom elementConnect an authored trigger to a native popover.
  • SheetCustom elementPresent an authored native dialog from a viewport edge.
  • TooltipCustom elementA concise tooltip built on the hover-card controller.

Color

  • Color PickerCustom elementEdit modern color formats through authored controls.
  • Color SwatchCSS onlyDisplay and select a named color value.