Dynamic Island

Apple-inspired Dynamic Island React component with smooth spring animations. Expandable notification pill for alerts, music players, and status updates.

~1.7 kB

Last updated: March 7, 2026

Installation

npx smoothui-cli add dynamic-island

npx smoothui-cli add dynamic-island

Features

Expand/collapse with spring motion
Queue multiple messages
Supports icons and actions
Accessible announcements

Accessibility

ARIA Attributes

Attribute	Element	Purpose
`aria-label`	View buttons	Describes each view option (e.g., "idle", "ring", "timer")

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the spring layout transitions and content blur/scale entrance animations are disabled.

Props

Cursor Follow

Smooth cursor-following blob for delightful feedback.

Expandable Cards

Interactive React cards that expand to reveal content with smooth Motion animations. Accessible, keyboard-navigable expandable UI for portfolios and product showcases.