Styling

SuggestMenu is unstyled by default. You control appearance with your own CSS or Tailwind. The extension and components expose decoration classes and data attributes so you can target the right states.

Decoration classes on the editor

While a suggestion session is active, the trigger and query range get a decoration. The extension toggles classes on the decoration so you can style the “ghost” text and animate open/close.

• suggest-active — session is open (trigger + query)
• suggest-closing — session is closing (before decoration is removed); use for close animation

You can override the closing class name via decorationClass in the extension or menu options.

Data attributes

• data-suggest-state — on the decoration (e.g. active, closing)
• data-suggest-placeholder — marks placeholder (ghost) text when query is empty
• data-highlighted — on the currently highlighted item (keyboard focus)
• data-empty — on the popup when there are no items (e.g. show “No results”)

Scroll margins

CSS custom properties control scroll margins so the list can scroll the highlighted item into view. See the source or Storybook for the exact property names if you need to override them.

Example patterns

Style the ghost text: target .suggest-active or [data-suggest-placeholder] for placeholder styling. Use .suggest-closing with a CSS transition for a smooth fade-out when the user dismisses the menu.

For list items, use [data-highlighted] for the active option. Style the popup when empty with [data-empty].