Getting Started
Install cue and open your first dialog.
@vlkoss/cue lets you register a dialog once, then open it from a click handler, a route effect, or another overlay.
Installation
npm i @vlkoss/cueAdd the provider
Render OverlayProvider once near the root of your app.
import { OverlayProvider } from "@vlkoss/cue";
export function App() {
return (
<OverlayProvider>
<Page />
</OverlayProvider>
);
}Create an overlay
Define the overlay next to the component it renders. Spread OverlayProps (open, onOpenChange) onto your dialog so Escape and backdrop clicks still close it.
import { createOverlay, type OverlayProps } from "@vlkoss/cue";
import { Dialog } from "./dialog";
export const settingsDialog = createOverlay((props: OverlayProps) => (
<Dialog {...props} title="Settings">
<button type="button" onClick={() => settingsDialog.close()}>
Close
</button>
</Dialog>
));Open it
Call open() from anywhere. No local useState.
settingsDialog.open();Works with any component that accepts open and onOpenChange: Radix Dialog, Base UI, vaul, or your own.