Edge Dock
A quick-tools tab hides on the screen edge; hover and a dock slides out with tooltips flying from the side.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Right · Dock on the right edge. side="right"
Ships with useful tools (back to top, copy link, share, print, contact) or takes your own. Fully keyboard accessible (Tab, Enter, Esc).
Installation
$ npm i @guetix/edge-dock
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { edgeDock } from "@guetix/edge-dock";
edgeDock({
side: "right",
tools: [
{ icon: "↑", label: "Back to top", onClick: () => scrollTo({ top: 0, behavior: "smooth" }) },
{ icon: "☾", label: "Dark mode", onClick: () => document.documentElement.classList.toggle("dark") },
{ icon: "✉", label: "Contact", href: "/contact" },
],
});Usage
example.tsx
import { EdgeDock } from "@/components/guetix/edge-dock";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
{children}
<EdgeDock fullscreen side="right" accent="#4ade80" />
</>
);
}Docs & blogsLong landing pagesDashboards
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "left" | "right" | "right" | Edge. |
| top | number | 50 | Vertical position (%). |
| tools | { icon; label; href?; onClick? }[] | — | Tools. |
| accent | string | — | Tab & tooltip color. |
| label | string | "Quick tools" | Tab text. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Tab button with aria-expanded; toolbar role; Esc closes and returns focus.