ComponentsProNew
Dynamic Island
A black pill like on the iPhone that smoothly morphs into a call, timer, notification or player.
Customize
accentColor
glowColor
highlightColor
Based on Dynamic Island (MIT license) ยท Terms of use
Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| view | 'idle' | 'ring' | 'timer' | 'notification' | 'music' | "idle" | Which view the island shows: weather, call, timer, notification or player. |
| onViewChange | (view) => void | โ | Called when a button switches the view. |
| idleContent | ReactNode | โ | Custom content for the idle view. |
| ringContent | ReactNode | โ | Custom content for the call view. |
| timerContent | ReactNode | โ | Custom content for the timer view. |
| accentColor | string | "#ffffff" | Main colour: icons, the live dot, the timer bar and the badge. |
| glowColor | string | "rgba(255,255,255,0.1)" | Soft glow around the island. |
| highlightColor | string | "rgba(255,255,255,0.1)" | Thin light rim of the island. |
| className | string | โ | Classes for the outer box. |
Dependencies
2 required packages
npm install motion lucide-react