KQ-526 · FAB/FAN

Fab Fan

A floating action button that fans into five. Pressing turns the plus 45 degrees into a cross on snap while the actions travel a quarter arc and land on recoil in cascade; the label of whichever action the pointer or the keyboard is on slides in beside it from distances.step, pushed clear of its neighbours. Pressing again folds the cascade backwards on the exit ease. It is a menu button with aria-expanded: Up and Down walk the actions, Left and Right follow the arc, Home and End jump, Enter selects, and Escape folds the fan and returns focus to the trigger.

KQ-526 · FAB/FAN

Coldbrook·· 4409

Fernworks Ltd · Invoice 4471+1,240.00
Waylight · Subscription−18.00
M. Okonjo · Split · dinner−32.50

Open the fan to start something

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/fab-fan

Props

actions: FabFanAction[]; default —; Up to five actions; icons come from the built-in stroked set, and anything past the fifth is dropped so the arc stays legible.
placement: "bottom-right" | "bottom-left"; default "bottom-right"; Corner the button sits in, and the direction the quarter arc sweeps.
open / defaultOpen: boolean; default false; Controlled or initial fan state.
onOpenChange: (open: boolean) => void; default —; Fires whenever the fan opens or folds.
label: string; default "Actions"; Accessible name for the trigger and the menu it controls.

Prop	Type	Default	Description
actions	FabFanAction[]	—	Up to five actions; icons come from the built-in stroked set, and anything past the fifth is dropped so the arc stays legible.
placement	"bottom-right" \| "bottom-left"	"bottom-right"	Corner the button sits in, and the direction the quarter arc sweeps.
open / defaultOpen	boolean	false	Controlled or initial fan state.
onOpenChange	(open: boolean) => void	—	Fires whenever the fan opens or folds.
label	string	"Actions"	Accessible name for the trigger and the menu it controls.