Quartz Headless

v0.10.0 · Angular 21

Behaviour for the interfaces you own.

Quartz gives Angular design systems accessible interaction primitives — not another visual language to undo.

Signals firstSSR safeUnstyled

behaviour.preview.tsLive

const volume = signal(50);

// keyboard, pointer, RTL and ARIA

<div qzSlider [(value)]="volume">

// headless hooks, consumer visuals

<button qzSliderThumb aria-label="Volume"></button>

17

Primitives

10

Core APIs

A11y

Built in

The foundation layer

Ship behaviour once. Express it differently everywhere.

◌

Headless by default

Bring your tokens, components and visual language.

No theme to override

↗

Accessible behaviour

Focus, keyboard interactions and ARIA patterns are first-class.

WAI-ARIA minded

✦

Composes cleanly

Small primitives that become menus, command palettes and more.

Signals + standalone

Core infrastructure

10 APIs

CollectionRegistration, DOM order and roving focus FocusTrap, restore and initial focus helpers DismissEscape, outside pointer, focus and scroll DirectionalityLTR/RTL resolution and keys OverlayPortal positioning for floating UI Scroll LockDocument-scoped modal scroll locks ViewportReactive breakpoint matching Drag & DropNative pointer-based drag flows Virtual ScrollWindowed rendering for long lists SplitterResizable panels and handles

Primitives

17 controls

DialogModal dialog and drawer behavior TooltipHover and focus descriptions PopoverDismissible floating content MenuMenu, submenu and checkable items ListboxSingle and multi selection ComboboxEditable suggestions SelectButton-triggered listbox popup TreeHierarchical navigation TabsTablist and panels AccordionDisclosure sections SwitchBoolean setting control CheckboxChecked, unchecked and mixed state RadioGroupStandalone radio selection TogglePressed button state ToggleGroupSingle or multiple pressed items SliderSingle-thumb range input ToastAccessible notifications

Ergonomic API

Less ceremony.
More control.

Compose sophisticated UI behaviour with concise TypeScript while the markup and visual treatment remain entirely yours.

Signals reactive stateSSR guarded DOM

save-profile.ts


import { signal } from '@angular/core';
import { CheckboxDirective, SliderDirective, SliderThumbDirective } from '@quartz-headless/primitives';

@Component({
  imports: [CheckboxDirective, SliderDirective, SliderThumbDirective],
  template: `
    <button qzCheckbox [(checked)]="accepted">Accept</button>

    <div qzSlider [(value)]="volume">
      <button qzSliderThumb aria-label="Volume"></button>
    </div>
  `,
})
export class PreferencesComponent {
  accepted = signal(false);
  volume = signal(50);
}

Ready when you are

Start with behaviour.
Make it yours.

Install one primitive or copy its source. Quartz works with the visual system you already trust.

$ npm install @quartz-headless/core @quartz-headless/primitives