Image: GitHub
Why it mattersStatus strips, upload toasts and now-playing widgets no longer each need their own layer. One component can hold them all.
Every web app ends up growing three strips. One for a short toast, one for a live progress bar, one for the now-playing widget. They each live in their own layer and rarely know about each other. A new open-source component called islandcn collapses the three into one.
Leo, the author, published islandcn under the opencoredev account on GitHub. It is a React component that copies the look and motion of Apple's Dynamic Island. The repository has 369 stars at the time of writing. Trendshift placed it sixth on its daily trending list this week.
What it does
The engine keeps an activity stack. An activity has four presentations: idle, compact, the split, and expanded. A caller starts an activity with an id, a compact view and an expanded view. The engine renders the activity at the top of the app. The caller can update the activity's content at any time. Call end when the work finishes.
Seven presets come with the engine, each one file. The list includes upload, timer, now playing, incoming call, ride or delivery ETA, recording, nearby transfer, and battery. A split view holds two activities at once. Each preset is built on the engine. A team can read the source and change what it does.
The pieces
The engine itself is the registry item island-core. It is React only. The springs that drive the motion were fitted frame-by-frame to recordings of the real iOS island. Long-press behaviour and alerts match the same model. The component respects prefers-reduced-motion.
The repository also includes a playground page. A developer can build an island from a preset or a blank activity. They can fire every action and tune the motion. The page prints both the install command and the code for the developer to copy. There is also an optional islandcn-skill registry item for coding agents. The README documents it at /docs/agent-skill.
Licensing and limits
The code is MIT, copyright 2026 Leo. The repository says islandcn copies the look and motion of Apple's island but none of Apple's assets. It is not affiliated with Apple. Dynamic Island is a trademark of Apple Inc.
The recordings the motion was fitted to are not in the repository. The internal /lab route still plays every transition from built-in sequences when the dev server runs. The /compare page, which checks the web implementation against the recordings, has nothing to show without them. One test that reads the recordings is skipped.
Why a working developer should care
Most teams today run three or four independent widgets to do what the island does. A floating upload toast, a bottom bar for now-playing, a modal for an incoming call. Each one owns its own layer. Each has its own z-index fight and often its own animation style.
A single engine holds all of them in one place. A team can build its own presets around the same model and keep the motion consistent. The scope is narrow by design. It is one component, and the author has focused on getting the motion right. For a working React app, the install is short. The feature behind it is one a product team often asks for.
Source
opencoredev/islandcn on GitHub. The project's own site is at islandcn.dev.
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.