Styling

Primitives are unstyled by default. Use the optional theme, override CSS variables, or style primitives from scratch.

Default theme

import "@etoile-dev/react/styles.css";
import { Searchbar } from "@etoile-dev/react";

export default function App() {
return (
  <Searchbar
    apiKey={process.env.NEXT_PUBLIC_ETOILE_PUBLIC_KEY}
    collections={["paintings"]}
  />
);
}

Searchbar and SearchModal apply etoile-search automatically.

If you build with primitives, add it yourself:

<Searchbar.Root className="etoile-search">...</Searchbar.Root>

If your root class is layout-only (for example relative), use themeClassName to style modal portal surfaces (Overlay / Content):

<Searchbar.Root className="relative" themeClassName="etoile-search">
...
</Searchbar.Root>

Recommended strategy

Keep CSS variables as your public design tokens, and use data attributes for structural/state styling. This keeps upgrades simple and avoids coupling your app to implementation details.

Dark mode

<Searchbar className="dark" apiKey={key} collections={["paintings"]} />

Or set dark on a parent container.

CSS variables

.etoile-search {
--etoile-bg: #ffffff;
--etoile-border: #e4e4e7;
--etoile-text: #09090b;
--etoile-text-muted: #71717a;
--etoile-selected: #f4f4f5;
--etoile-radius: 12px;
--etoile-input-height: 44px;
}

For the full token list, see:

styles.css on GitHub

Headless styling with data attributes

import { Searchbar } from "@etoile-dev/react";

export default function App() {
return (
  <Searchbar.Root onSelect={(value) => console.log(value)}>
    <Searchbar.Input className="w-full rounded-xl border px-4 py-3" />
    <Searchbar.List className="mt-2 rounded-xl border bg-white p-1 shadow-lg">
      <Searchbar.Item
        value="starry-night"
        className="rounded-lg px-3 py-2 data-[selected=true]:bg-neutral-100"
      >
        The Starry Night
      </Searchbar.Item>
    </Searchbar.List>
  </Searchbar.Root>
);
}

State attributes to target:

data-selected
data-disabled
data-state
data-slot