Dynamic island Pro

A black pill that fits whatever it holds. Change the view and it measures the new content and morphs to fit. Growing rides the bounce spring, so the island overshoots and settles like it has mass. Shrinking uses the softer spring. The old content blurs out as the new content blooms in from the centre.

Pro preview

Installation

Terminalbash

npx @neelshha/ui@latest login
npx @neelshha/ui@latest add dynamic-island

Usage

page.tsxtsx

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

const [view, setView] = useState("idle");

<DynamicIsland view={view}>
  {view === "call" ? <IncomingCall /> : null}
  {view === "timer" ? <Timer /> : null}
  {view === "idle" ? <div style={{ width: 120, height: 36 }} /> : null}
</DynamicIsland>

The island has no size of its own. Give each view its padding and the width it wants, and the island matches it exactly at rest. New children under the same view, like a clock ticking, resize the island without a crossfade.

Source

API

Other props go to the outer div: position it with a class. With reduced motion, the island resizes at once and the content swaps without a fade.

Prop	Type	Description
`view`	`string`	Names what the island holds. A new view morphs the island and crossfades the content.
`children`	`ReactNode`	The content for the current view. It sets its own size, padding included, and the island fits it.