By default, Slash renders as a floating command bar that opens over your page and closes on selection. Inline mode instead renders Slash as a fixed panel embedded directly in your layout — a persistent sidebar rather than a transient overlay. This suits apps where search and navigation are a permanent part of the UI, not an occasional shortcut.
1234567891011121314import { Slash } from '@slash.tools/react'
export function App() { return ( <div className="app-shell"> <Slash apiKey={process.env.SLASH_API_KEY} mode="inline" onSelect={(item) => console.log(item)} /> <main>{/* page content */}</main> </div> )}In inline mode, Slash takes up 100% height of its container and never closes on its own — selecting an item fires onSelect and clears the query, but the panel stays mounted. Width is controlled with the same --slash-radius-style CSS custom properties as the floating launcher, plus a dedicated width variable.
1234slash-launcher[mode="inline"] { --slash-inline-width: 280px; --slash-accent: #7c5cff;}Users can still switch modes at runtime — a floating launcher can be promoted to inline (and back) by toggling the mode prop, which is useful for a "pin sidebar" affordance in your own UI.