Styling — Angular — AI Autocomplete Docs

Override every visual aspect through CSS variables. No theme provider, no prop drilling — just CSS.

Tweak colors, sizes, and modes visually in the Edit Appearance editor — when it looks right, copy the generated CSS straight into your project. Faster than hand-tuning the variables below.

Open Edit Appearance

Style injection

Styles ship with the components and inject automatically when <ai-autocomplete> or <ai-autocomplete-dropdown> first renders — there's no CSS file to import. Defaults use :where() (zero specificity) so any override you write wins without !important.

CSS variables

Override these on the container element (via className or id). All defaults use :where() — your overrides always win.

Variable	Light	Dark	Description
`--aia-pill-bg`	`#bdbdbd`	`#bdbdbd`	Pill background.
`--aia-pill-color`	`#000000`	`#ffffff`	Pill text.
`--aia-pill-font-size`	`19px`	`19px`	Pill font size.
`--aia-option-bg`	`transparent`	`transparent`	Highlighted option background.
`--aia-option-color`	`#000000`	`#ffffff`	Option text.
`--aia-option-color-selected`	`#000000`	`#ffffff`	Highlighted option text.
`--aia-option-font-size`	`19px`	`19px`	Option font size.
`--aia-written-text-color`	`#000000`	`#ffffff`	Input text.
`--aia-written-text-font-size`	`19px`	`19px`	Input text font size.
`--aia-caret-color`	`--aia-written-text-color`	`--aia-written-text-color`	Textarea caret color. Override independently of input text color.
`--aia-submit-bg`	`#000000`	`#ffffff`	Submit button background.
`--aia-submit-color`	`#ffffff`	`#000000`	Submit button icon color.
`--aia-dropdown-bg`	`—`	`—`	Optional bg the dropdown's glass shadow tints toward. Set to your page bg so the bottom-corner glow blends.
`--aia-scrollbar-thumb`	`rgba(0,0,0,0.3)`	`rgba(0,0,0,0.3)`	Color of the option list's scrollbar thumb (Firefox + WebKit).
`--aia-streak-rgb`	`99, 102, 241`	`255, 255, 255`	Comma-separated RGB triplet that tints the option-selection streak animation.
`--aia-streak-glass-bg`	`rgba(99,102,241,0.1)`	`rgba(255,255,255,0.1)`	Background fill for the streak's glass-pill effect.

Selector hooks

For styling beyond the CSS variables, target these stable data-aia-* attributes. CSS-module class hashes are not part of the public API.

[data-aia-editor] — Editor area wrapping the textarea + overlay.
[data-aia-submit] — Submit button.
[data-aia-pill] — Each unfilled-suggestion pill.
[data-aia-pillbar] — Pill bar container inside the dropdown.
[data-aia-option] — Each suggestion option.
[data-aia-dropdown] — The dropdown root (listbox).

/* Solid (non-glass) dropdown */
.my-autocomplete [data-aia-dropdown] {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: none;
}

The SDK's elements live outside your components' style scope. Put overrides in a global stylesheet (e.g. styles.css) — selectors written in a component's default (emulated) styles won't reach the data-aia-* hooks or magicx-aia-* classes.

Per-mode overrides

Use the data-mode attribute to scope overrides to light or dark mode.

/* data-mode lives on the inner .magicx-aia container, so match a
   descendant of your class — not the <ai-autocomplete> host itself. */
.my-autocomplete [data-mode="light"] {
  --aia-pill-bg: #e2e8f0;
  --aia-pill-color: #0f172a;
}

.my-autocomplete [data-mode="dark"] {
  --aia-pill-bg: #334155;
  --aia-pill-color: #f8fafc;
}

Live preview

CSS variables update live — set them imperatively to preview color changes without re-renders.

this.host.nativeElement
  .querySelector<HTMLElement>(".magicx-aia")
  ?.style.setProperty("--aia-pill-bg", newColor);