Dynamic Island

An iOS-style island pill that morphs between live activity views with a bouncy resize.

@spectrumui/dynamic-island

Focus

24:59

Installation

Usage

import { DynamicIsland, DynamicIslandView } from "@/components/motion/dynamic-island"

<DynamicIsland view={view} compact={<Dot />}>
  <DynamicIslandView id="timer">…</DynamicIslandView>
  <DynamicIslandView id="music">…</DynamicIslandView>
</DynamicIsland>

API Reference

DynamicIsland

beUI's Dynamic Island block (beui.dev, MIT), installed from its shadcn registry into components/motion. The shell animates real width and height on a long spring with barely-there bounce, while views crossfade with blur. Set view to null for the compact pill.

Prop	Type	Default	Description
*`view`	`string \| null`	-	Active view id; null shows the compact pill
`compact`	`ReactNode`	-	Compact pill content shown when no view is active
`children`	`ReactNode`	-	DynamicIslandView elements
`className`	`string`	-	Classes for the shell

DynamicIslandView

One view inside the island. Only the view whose id matches the parent's view prop is rendered.

Prop	Type	Default	Description
*`id`	`string`	-	Matches the parent view prop when active
*`children`	`ReactNode`	-	View content
`className`	`string`	-	Classes for the view