opencoredev/islandcn

What it is

islandcn provides a Dynamic Island-style UI component for any React app, distributed as a shadcn registry item rather than a traditional package. A single island at the top of the screen can present activities such as an upload, timer, now-playing track, delivery ETA, incoming call or recording, with each activity shaped around your app's own actions (1).

The project has three layers: the engine (lib/island/) with the activity stack, four presentations (idle, compact, split and expanded), spring motion, long-press, alerts and reduced-motion support; ready-made presets for the activities above; and a playground for composing an island and copying the generated install command and code (3). The engine is React-only, and the site and documentation are part of the same repository.

It fits React teams that already use shadcn and want an animated, activity-driven status layer without building the presentation and motion themselves.

Quick start

The primary install path is the shadcn CLI, which pulls the registry item from the project's site:

npx shadcn@latest add https://islandcn.dev/r/island-core.json

Then mount the provider and island once near the root of the app and start activities from any component inside it:

"use client";

import { Island, IslandProvider, useIsland } from "@/lib/island";

<IslandProvider>
  <Island placement="viewport" />
  <App />
</IslandProvider>;

const island = useIsland();
const upload = island.start({
  id: "upload",
  label: "Uploading report.pdf",
  compact: { leading: <CloudIcon />, trailing: <ProgressRing value={0.4} /> },
  expanded: { center: <span>report.pdf</span>, bottom: <Progress value={0.4} /> },
});
upload.update({ compact: { trailing: <ProgressRing value={0.8} /> } });
upload.end();

The snippet references CloudIcon, ProgressRing and Progress, which must come from your own icon and UI components. To try presets and generate code interactively, open the /playground route on the project site.

Local development

The repository is a pnpm workspace:

pnpm install
pnpm dev           # http://localhost:3000
pnpm typecheck
pnpm build         # builds the registry into public/r, then the site

The /lab route replays every transition from built-in sequences during pnpm dev. The frame-by-frame recordings the motion was fitted to are not included, so /compare has nothing to show and the test that reads those recordings is skipped (3). Contributors are asked to read AGENTS.md before changing anything.

Constraints

• The component targets React apps that can consume shadcn registry items; the README does not state a minimum React or Next.js version.
• The core is installed from a hosted registry URL, so installation requires network access to the project domain.
• The visual language mimics Apple's island motion, but the repository contains none of Apple's assets, and the project is not affiliated with Apple; Dynamic Island is an Apple trademark.
• The distribution is MIT licensed, copyright 2026 Leo (3).

HotRepo's take

The repository entered HotRepo's new-project list on 2026-11-13, recording 115 stars and 5 forks gained in the roughly eight-hour window from 11:50 to 19:46 UTC. No GitHub all-language daily rank was recorded, so this is a single early snapshot rather than evidence of sustained growth. What stands out technically is the shadcn registry distribution model: the engine is copied into the consuming app, while presets and a playground lower the cost of assembling a custom island. The missing motion recordings mean contributors working from the repository alone will see a partial development surface.