Tags theming

Every cosmetic value Tags renders is a --rozie-tags-* custom property with a built-in fallback, so the component works with zero configuration and stays fully re-skinnable. The structural rules compile per-leaf and are not consumer-overridable — only the values below flow through tokens.

.rozie-tags {
  --rozie-tags-gap: 0.4rem;
  --rozie-tags-accent: #0066cc;
  --rozie-tags-chip-gap: 0.3rem;
  --rozie-tags-remove-size: 1.1rem;
}

Tokens

control box

Token	Default
--rozie-tags-gap	0.4rem
--rozie-tags-padding	0.35rem 0.45rem
--rozie-tags-font	inherit
--rozie-tags-color	inherit
--rozie-tags-bg	#fff
--rozie-tags-border-width	1px
--rozie-tags-border-color	rgba(0, 0, 0, 0.25)
--rozie-tags-radius	0.5rem
--rozie-tags-min-width	12rem

accent — the single color most consumers will set (focus ring)

Token	Default
--rozie-tags-accent	#0066cc
--rozie-tags-focus-ring-width	3px
--rozie-tags-focus-ring-color	rgba(0, 102, 204, 0.25)

chip

Token	Default
--rozie-tags-chip-gap	0.3rem
--rozie-tags-chip-padding	0.15rem 0.5rem
--rozie-tags-chip-font-size	0.85rem
--rozie-tags-chip-color	inherit
--rozie-tags-chip-bg	rgba(0, 102, 204, 0.12)
--rozie-tags-chip-radius	0.375rem

chip remove button

Token	Default
--rozie-tags-remove-size	1.1rem
--rozie-tags-remove-color	currentColor
--rozie-tags-remove-opacity	0.65
--rozie-tags-remove-hover-bg	rgba(0, 0, 0, 0.1)

inline text input

Token	Default
--rozie-tags-input-min	4rem
--rozie-tags-input-padding	0.15rem 0.1rem
--rozie-tags-placeholder-color	rgba(0, 0, 0, 0.4)

disabled

Token	Default
--rozie-tags-disabled-opacity	0.6
--rozie-tags-disabled-bg	rgba(0, 0, 0, 0.04)

Design-system bridges

Each package ships token presets that map Tags's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/tags-react/themes/base.css';
import '@rozie-ui/tags-react/themes/bootstrap.css';
import '@rozie-ui/tags-react/themes/material.css';
import '@rozie-ui/tags-react/themes/shadcn.css';

See also

• Tags — showcase & API — the full prop / event / slot / handle reference.
• Tags — API reference — every prop, event, slot, and handle verb.
• Tags — usage examples — idiomatic per-framework consumption code.
• Tags comparison — how it stacks up against the per-framework libraries.
• Tags — live demo — the real package running in the page.