KQ-1092 · EDGE/PEEK
Edge Peek
A side panel tucked into the edge of a surface whose handle leans out as the pointer comes near: distance from the edge is mapped continuously to a lean and sprung on drift (soft) or snap (firm), and past the handle's own width the lean pulls the panel's edge out behind it. A press slides the panel open on glide or snap; the handle can also be dragged 1:1, rubber-bands at both ends and commits by projection with its release velocity, while a plain close accelerates home on an exit tween. The handle is a real disclosure button: keyboard focus leans it out as a near pointer does, Enter or Space opens it, and Escape closes it and returns focus to the handle.
Fieldline · Coldbrook Ridge
Layers
layers tucked · 3 of 3 shown
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/edge-peek
Props
- label
- string
- default —
- The panel's name: the handle's and the panel's accessible name, and the panel's heading.
- panel
- ReactNode
- default —
- What the panel holds.
- children
- ReactNode
- default —
- The surface the panel is tucked into.
- reach
- number
- default 160
- How far from the edge, in px, the handle starts to notice the pointer.
- lean
- number
- default 24
- How far the handle leans out at its closest, in px; past the handle's width it pulls the panel's edge out too.
- side
- "left" | "right"
- default "right"
- Which edge the panel lives on.
- pull
- "soft" | "firm"
- default "soft"
- Soft leans on drift and opens on glide; firm leans and opens on snap.
- panelWidth
- number
- default 220
- Panel width in px, capped to the surface width less 56.
- open / defaultOpen
- boolean
- default — / false
- Controlled / uncontrolled open state.
- onOpenChange
- (open: boolean) => void
- default —
- Fires from the press, drag, key or tint press that changed it.
- sound
- boolean
- default false
- A hum that tracks the lean while the pointer is within reach, a whoosh as it opens and a clack as it lands home.
- disabled
- boolean
- default false
- The handle neither leans nor opens.
- className
- string
- default —
- Classes for the surface frame; the host sizes it.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | The panel's name: the handle's and the panel's accessible name, and the panel's heading. |
| panel | ReactNode | — | What the panel holds. |
| children | ReactNode | — | The surface the panel is tucked into. |
| reach | number | 160 | How far from the edge, in px, the handle starts to notice the pointer. |
| lean | number | 24 | How far the handle leans out at its closest, in px; past the handle's width it pulls the panel's edge out too. |
| side | "left" | "right" | "right" | Which edge the panel lives on. |
| pull | "soft" | "firm" | "soft" | Soft leans on drift and opens on glide; firm leans and opens on snap. |
| panelWidth | number | 220 | Panel width in px, capped to the surface width less 56. |
| open / defaultOpen | boolean | — / false | Controlled / uncontrolled open state. |
| onOpenChange | (open: boolean) => void | — | Fires from the press, drag, key or tint press that changed it. |
| sound | boolean | false | A hum that tracks the lean while the pointer is within reach, a whoosh as it opens and a clack as it lands home. |
| disabled | boolean | false | The handle neither leans nor opens. |
| className | string | — | Classes for the surface frame; the host sizes it. |