Back to Components
Jelly Toolbar
A clean, minimal floating toolbar containing a physical jelly/slime element — not a glass blob or hover highlight.
Preview
Installation
Install the component using the CLI.
npx shadcn@latest add https://shreyashtech.me/r/jelly-toolbar.jsonUsage
Import the component:
import { JellyToolbar } from "@/components/jelly-toolbar"Use it in your code:
<JellyToolbar />Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | JellyToolbarItem[] | 6 default items | Array of { label, icon, shortcut?, onSelect? }. |
| jellyColor | string | "#c4b5fd" | Jelly color in light mode. |
| jellyColorDark | string | jellyColor | Jelly color in dark mode. Defaults to jellyColor if omitted. |
| stiffness | number | 380 | Spring stiffness for jelly movement — higher is snappier. |
| damping | number | critical damping (≈39 at default stiffness) | Spring damping for jelly position. Internally floored at the critically-damped value for the given stiffness, so overshoot is never possible even if a lower number is passed. |
| enableShortcuts | boolean | true | Whether pressing an item's shortcut key activates it globally. |
| className | string | - | Additional classes applied to the outer wrapper. |