Pro

Speed dial

One round button that opens into a short column of labelled actions. The plus turns into a cross, the actions rise one after another on frosted chips, arrow keys move between them, and Escape or an outside press closes it.

Pro

pnpm dlx shadcn@latest add @caliper/speed-dial

Q4 planning board

12 cards · 3 people here

Nothing created yet.

Installs components/ui/speed-dial.tsxDepends on lucide-reactMotion none in component source

When to use

Use it for

A canvas or phone screen with one main place to create from and three to five kinds of thing to create.
Maps, boards and editors where a toolbar would cover the work.

Skip it when

One action; use a single button.
More than five actions or actions that need explaining; use a menu.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Labels always show: Every action has its words beside its icon; nothing depends on a hover tooltip.
A disclosure: The button has aria-expanded and controls the list; focus returns to it after any choice or Escape.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/speed-dial

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { SpeedDial } from "@/components/ui/speed-dial"

The worked example comes with Pro

The 36-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

SpeedDial

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

label *string—The button's name: "Create".

actions *readonly SpeedDialAction[]—

side"top" | "bottom""top"Which way the actions open from the button.

It is built on native elements and keeps aria-label, aria-hidden, aria-expanded and aria-controls in step with state.

KeyBehaviour

EscapeCloses or cancels, then returns focus to where it came from.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.