Dynamic Island

A squircle pill that eases into a slab when tapped, swaps its content on the way, and glows red on alert.

Tap the island to expand

variant

pulse

interactive

Installation

npx shadcn@latest add @glint-ui/dynamic-island

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dynamic-island.json

Usage

import { DynamicIsland } from "@/components/ui/dynamic-island";

<DynamicIsland
  icon={<Music2 className="size-3.5" />}
  title="Solaris · Citrus Beat"
  trailing={<span>2:48</span>}
  expandedContent={<Player />}
/>

Props

Prop	Type	Default	Description
variant	"calamansi" \| "white" \| "slate" \| "citrus"	"calamansi"	Surface palette.
pulse	boolean	false	Ambient pulse dot in compact and idle states.
interactive	boolean	true	Tap or Enter/Space toggles compact and expanded.
state	"idle" \| "compact" \| "expanded" \| "alert"	—	Controlled state.
defaultState	"idle" \| "compact" \| "expanded" \| "alert"	"compact"	Initial state when uncontrolled.
onStateChange	ReactNode	—	`(state) => void`, fired when a tap asks to change state.
icon	ReactNode	—	Primary icon, shown in a chip tinted from the surface ink.
leading	ReactNode	—	Leading slot used when no `icon` is given.
title	ReactNode	—	Label in compact and alert states.
trailing	ReactNode	—	Trailing slot (timer, badge, waveform).
expandedContent	ReactNode	—	Content shown when expanded.
label	string	"Dynamic island"	Accessible name of the toggle.
className	string	—	Extra classes for the root element.