Styling

Style the React SDK your way: use the default theme, tweak CSS variables, or build a fully custom UI with primitives.

Use the default theme

Import the optional stylesheet once (for example in your app entry).

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

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

The etoile-search class is applied automatically.

Customize with CSS variables

Override variables on .etoile-search to match your brand.

.etoile-search {
--etoile-bg: #0a0a0a;
--etoile-border: #27272a;
--etoile-text: #fafafa;
--etoile-selected: #1f2937;
--etoile-radius: 14px;
}

For dark mode, add dark to the component or a parent container.

Style primitives with Tailwind

Skip the theme and style headless components directly.

import {
SearchRoot,
SearchInput,
SearchResults,
SearchResult,
} from "@etoile-dev/react";

export default function CustomSearch() {
return (
  <SearchRoot
    apiKey={process.env.NEXT_PUBLIC_ETOILE_PUBLIC_KEY}
    collections={["paintings"]}
  >
    <SearchInput
      placeholder="Search paintings..."
      className="w-full rounded-xl border border-neutral-200 px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-neutral-900"
    />

    <SearchResults className="mt-2 rounded-xl border border-neutral-200 bg-white p-1 shadow-lg">
      {(result) => (
        <SearchResult
          className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm data-[selected=true]:bg-neutral-100"
        >
          <span className="truncate">{result.title}</span>
        </SearchResult>
      )}
    </SearchResults>
  </SearchRoot>
);
}

Each result includes data-selected and data-index for styling states.

Related

  • Setup — drop-in and primitives
  • Hooks — useSearch reference