Conversation
ChatFAB
There's no escape now.
Bottom-right floating 'Ask AI' button with a popover. Compose ChatFAB.Header and ChatFAB.Body for the popover contents; the close button uses context so it just works.
Install
Copy this owned-code component into your app from the registry.
pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/chat-fab.json
Examples
Default (click to open)
The FAB is fixed-positioned to the viewport, so it's docked bottom-right of your window, not this card.
<ChatFAB
popover={<>
<ChatFAB.Header>Hi, I'm Synthi.</ChatFAB.Header>
<ChatFAB.Body>Ask me anything.</ChatFAB.Body>
</>}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | Snippet | "Ask AI" | Button label. |
| open | boolean | - | Controlled open state. |
| defaultOpen | boolean | - | Uncontrolled initial state. |
| onOpenChange | (open: boolean) => void | - | Open-state callback. |
| popover | Snippet | - | Popover contents. |