How do I install Dynamic Island?

Run npx shadcn@latest add @aceternity/dynamic-island in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Dynamic Island responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Dynamic Island is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Illustrations

11 / 22

Dynamic Island

An animated Dynamic Island component with customizable states. Features smooth spring animations cycling through idle, loading, and processed states with configurable text and timing.

Idle

Processing...

Complete

An animated Dynamic Island component inspired by Apple's iOS design. The component automatically cycles through three states with smooth spring animations.

The three states are fully customizable:

Idle - Compact pill with dot indicator and custom text
Loading - Expanded with pulsing dots animation and loading text
Processed - Larger pill with green checkmark and completion text

Built with Motion's useAnimate hook for imperative animation sequences. Each state has configurable duration via props: idleDuration, loadingDuration, and processedDuration.

The component uses a fixed height container to prevent layout shifts during animations. Perfect for status indicators, notification previews, or any context where you want to show state transitions in an engaging way.

Works great as a standalone illustration or combined with device mockups like the MacBook and iPhone illustrations.

More from Illustrations

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

MacBook Illustration iPhone Illustration Chat Conversation Illustrations

About this block

An animated Dynamic Island component inspired by Apple's iOS design. The component automatically cycles through three states with smooth spring animations.

The three states are fully customizable:

Idle - Compact pill with dot indicator and custom text
Loading - Expanded with pulsing dots animation and loading text
Processed - Larger pill with green checkmark and completion text

Built with Motion's useAnimate hook for imperative animation sequences. Each state has configurable duration via props: idleDuration, loadingDuration, and processedDuration.

Works great as a standalone illustration or combined with device mockups like the MacBook and iPhone illustrations.