Browse components
Expandable Dock
A compact pill of actions that springs open into a panel (search, quick actions, inbox, player), morphing its size and corners between states.
Installation
npx shadcn@latest add @glint-ui/expandable-dockFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/expandable-dock.json
Usage
import { ExpandableDock } from "@/components/ui/expandable-dock";
<ExpandableDock
items={[
{ id: "home", label: "Home", icon: <House /> },
{ id: "search", label: "Search", icon: <Search />, panel: <SearchPanel /> },
{ id: "inbox", label: "Inbox", icon: <Bell />, panel: <Inbox /> },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { id, label, icon, panel?, onClick? }. Items with a panel expand the dock. |
| bounce | number | 0.2 | Spring bounce of the morph. |
| duration | number | 0.5 | Morph duration in seconds. |
| radius | number | 24 | Corner radius of the open panel in px. |
| defaultOpen | string | — | Id of the item open at first render. |
| onOpenChange | ReactNode | — | Called with the open item id, or null when closed. |
| className | string | — | Extra classes for the root element. |