Data attributes & slots

Every meaningful element the Kit renders carries one or two data-stridge-* attributes you can target from CSS — no need to fork a component or chase generated class names.

/* Make the deposit method tile blue. */
[data-stridge-slot="deposit-method"] {
    border: 1px solid oklch(62% 0.18 250);
}

/* Lift the dialog surface when theme is light. */
[data-stridge-theme="light"] [data-stridge-slot="card"] {
    background: oklch(99% 0 0);
}

/* Bigger touch targets only on Persian locale. */
[data-stridge-locale^="fa"] [data-stridge-slot="amount-entry-pills"] {
    gap: 12px;
}

The attributes are part of the public API: they are stable across patch and minor releases, just like the CSS variables.

Scope attributes

The provider writes these onto its root <div data-stridge-scope>:

data-stridge-slot — sub-part targeting

Every compound part stamps data-stridge-slot="<name>" on every sub-element. The slot name is stable, kebab-cased, and prefixed with the primitive name so two primitives can't collide.

A small example — the deposit method picker's structure:

[data-stridge-slot="deposit"]
  [data-stridge-slot="deposit-header"]
  [data-stridge-slot="deposit-body"]
    [data-stridge-slot="deposit-methods"]
      [data-stridge-slot="deposit-method"]            (one per tile)
      [data-stridge-slot="deposit-method"]

Targeting one of those lets you restyle just the tile without reaching into the rest of the layout:

[data-stridge-slot="deposit-method"] {
    background: var(--brand-surface-elevated);
    border-radius: 4px;
}

Slot catalogue

The names are grouped by primitive. You don't need to memorise these — inspect any element in the Kit and the slot value is right there on the DOM node. Click any chip below to copy its full [data-stridge-slot="…"] selector, or use the search to narrow across every primitive at once.

Primitive slots

The lower-level UI primitives also stamp slots. The patterns are predictable — button, card, dialog, drawer, select, field, input-group, etc. carry namespaced child slots like button-icon, card-header, dialog-overlay. See the components inline (every primitive co-locates its .slots.ts file) for the exhaustive list.

Responsive dialogs resolve to one of two surface roots — [data-stridge-slot="dialog-content"] above the breakpoint, [data-stridge-slot="drawer-content"] below it — so a width-agnostic override can target either. The drawer also stamps drawer-overlay, drawer-handle (the grabber), drawer-header, drawer-body, and drawer-footer. See Responsive presentation.

Combining slots with state

Some sub-parts carry a second attribute that flags state — data-state, data-selected, data-disabled. Combine them with slots for state-aware overrides:

[data-stridge-slot="deposit-method"][data-disabled] {
    opacity: 0.5;
}

[data-stridge-slot="asset-picker-asset"][data-selected="true"] {
    background: var(--brand-accent-soft);
}

[data-stridge-slot="success-state-disclosure-chevron"][data-state="open"] {
    transform: rotate(180deg);
}

The state attributes mirror the value the Kit uses internally — they come from Base UI's accessibility primitives, so the conventions match what's documented for those components.

When slot overrides aren't enough

If a structural change is what you need (different element type, completely different sub-element ordering, screen-level rebuild), drop down to compound components and compose your own version. The CSS variables and slots are designed for visual tweaks; structural tweaks belong in your composition, not in CSS.

Next

• Theming & CSS variables — restyle by token instead of by slot.
• Compound components — restructure when slots aren't enough.
• shadcn registry — get the canonical composition as files you fully own.