Dynamic islandPro
A black pill that morphs its size and shape to fit live activity.
ALIncoming callAda Lovelace
When to use
- Showing one live activity compactly: calls, timers, uploads, recording, now playing.
When not to use
- Several simultaneous notifications: use toasts or an animated list.
Installation
Usage
Import it from @/components/ui/dynamic-island after installing.
example.tsx
import { DynamicIsland } from "@/components/ui/dynamic-island";
<DynamicIsland view={state} announcement={state === "call" ? "Incoming call" : undefined}>
{state === "call" ? <CallView /> : <IdleView />}
</DynamicIsland>API reference
DynamicIsland
A black pill whose size and radius morph to fit the content of the current view.
| Prop | Type | Default | Description |
|---|---|---|---|
| view | string | – | Key for the current view; changing it triggers the morph. |
| children | ReactNode | – | Content for that view. |
| announcement | string | – | Spoken politely when the view changes. |
Accessibility
- Changes are announced through a polite live region when you pass announcement.
- Content inside keeps its own semantics (buttons stay buttons).
Motion
- The pill animates its size with a bouncy spring (0.28, 600ms).
- Content swaps with scale and blur.
- Instant under reduced motion.
Responsive behavior
- Sized by its content; keep views under 340px wide for phones.
Performance
- One layout animation per change.
Notes for AI
- Give each view a fixed width so the morph has a clear target.
This page as Markdown, for assistants and coding agents:
/components/dynamic-island/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt