Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

Styling contract

Headless Tag only reflects slots and state. The owner decides spacing, shape, colors, and how the close affordance looks.

Slot and state hooks

HookValuesWhere
data-slottag, tag-icon, tag-closeRoot and sub-parts.
data-removablepresent / absentTag root.
data-disabledpresent / absentTag root and close action.
data-focusedpresent / absentClose action.

CSS starter

tag.primitive.css

css
[data-slot="tag"] {
  align-items: center;
  border-radius: 9999px;
  display: inline-flex;
  gap: 0.35rem;
}

[data-slot="tag-close"][data-focused] {
  box-shadow: 0 0 0 2px var(--tng-semantic-focus-ring);
}

[data-slot="tag"][data-disabled] {
  opacity: 0.62;
}

Owner guidance

Prefer styling by slot and reflected state instead of assuming a specific element type. That keeps your tag contract resilient if you swap wrappers or change the close host later.