# Styling | React AI Autocomplete Docs

> For the complete documentation index, see [llms.txt](https://ai-autocomplete.com/llms.txt). A markdown version of any page on this site is available by appending `.md` to its URL path — the homepage is at `/index.md`.

Styling guide for integrating the AI Autocomplete SDK with React. Code examples, setup, and API reference.

Source: https://ai-autocomplete.com/docs/react/styling

---

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

## Style injection

Styles auto-inject at runtime when the component first renders. There's no separate 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-product-list-max-height` | `320px` | `320px` | Height cap for the product strip when productsLayout is "list". The rows scroll vertically inside it. |
| `--aia-product-list-media-size` | `44px` | `44px` | Thumbnail width and height for each row when productsLayout is "list". |
| `--aia-product-list-gap` | `2px` | `2px` | Space between rows when productsLayout is "list". |
| `--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` | `var(--aia-written-text-color)` | `var(--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-textarea]` — The <textarea>.
-   `[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).

**dropdown.css**

```tsx
/* 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;
}
```

## Per-mode overrides

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

**theme.css**

```tsx
.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.

**livePreview.ts**

```tsx
document
  .querySelector<HTMLElement>(".my-autocomplete")
  ?.style.setProperty("--aia-pill-bg", newColor);
```