# Dynamic island

> A black pill that morphs its size and shape to fit live activity.

Component · Pro · https://lodeui.com/components/dynamic-island

## 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

```bash
npx shadcn@latest add @lode/dynamic-island
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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.

## Related

- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.
- [Animated list](https://lodeui.com/components/animated-list) — A feed where new entries spring in at the top and older ones make room.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.