# islandcn > The open-source Dynamic Island for React. Install it with shadcn, mount it once, and show your app's activities in one pill. ## Getting started - [Overview](https://islandcn.dev/docs): islandcn is the open-source Dynamic Island for React. It shows what your app is doing in one black pill at the top of the page. - [Installation](https://islandcn.dev/docs/installation): Add the islandcn engine to a React project with the shadcn CLI and mount the island once. - [Quick start](https://islandcn.dev/docs/quick-start): Start an activity from a button, update it while the task runs, and end it when the task is done. ## Guides - [Activities](https://islandcn.dev/docs/guides/activities): Start an activity when a task begins, update it as the task moves, and end it when the task is done. - [Compact, expanded and split](https://islandcn.dev/docs/guides/presentations): The four shapes the island takes, which one shows when, and how to write content that fits each. - [Actions](https://islandcn.dev/docs/guides/actions): What taps, long-presses and keys do to the island, how to add buttons to the expanded view, and when to alert. - [Theming](https://islandcn.dev/docs/guides/theming): Match the island to your page with the keyline, accent colours and the content kit's type, and keep the pill itself black. - [Motion and reduced motion](https://islandcn.dev/docs/guides/motion): How the island's springs work, how to change them, and what changes when the user asks for reduced motion. ## Presets - [Presets](https://islandcn.dev/docs/presets): Ten finished islands built on the engine, one file each. Install one as it is, or read it for technique and build your own. - [Upload](https://islandcn.dev/docs/presets/upload): A photo or file upload, as a posting app shows it: the thumbnail, a ring with the percentage, and a check when it lands. - [Timer](https://islandcn.dev/docs/presets/timer): A countdown with the time left on the trailing side and pause and cancel buttons when expanded. - [Now playing](https://islandcn.dev/docs/presets/now-playing): Artwork on the leading side, a live level meter on the trailing side, transport controls when expanded. - [Incoming call](https://islandcn.dev/docs/presets/incoming-call): A caller's name with accept and decline buttons, expanded while it rings, then a call timer. - [Ride or delivery ETA](https://islandcn.dev/docs/presets/eta): Minutes until a ride or delivery arrives, with the driver, the vehicle and an optional Message button. - [Recording](https://islandcn.dev/docs/presets/recording): A recording indicator with an elapsed timer and a level meter, for audio, screen or camera capture. - [Nearby transfer](https://islandcn.dev/docs/presets/transfer): A photo or file going to a device nearby, or coming from it: who it goes to, the photo on its corner, and a ring with a stop button. - [Battery](https://islandcn.dev/docs/presets/battery): Charge level and charging state, shown briefly when power connects or runs low. - [Split](https://islandcn.dev/docs/presets/split): Two activities at once: one stays attached to the pill, the other moves to a capsule beside it. ## API reference - [Island](https://islandcn.dev/docs/api/island): Draws the activity stack from the nearest IslandProvider at the top centre of its container or of the window. - [IslandProvider](https://islandcn.dev/docs/api/island-provider): Owns the activity stack and the clock for every Island and useIsland below it, and takes the metrics, motion and reduced-motion settings. - [useIsland](https://islandcn.dev/docs/api/use-island): The hook that starts, updates, expands and ends activities, and reports what the island shows. - [ActivityOptions](https://islandcn.dev/docs/api/activity-options): The object you pass to start: an id, a label, a priority, and the content for compact, minimal and expanded. - [IslandNumber and IslandProgress](https://islandcn.dev/docs/api/primitives): Content primitives that animate a changed number or a moving bar on the island's clock, as a live status activity's content does. - [Content kit](https://islandcn.dev/docs/api/content-kit): The pieces island content is built from: text styles, layout frames, glyphs, rings, bars, steps, sparklines, readings and clocks, one registry item each. ## More - [Agent skill](https://islandcn.dev/docs/agent-skill): An optional install helper for coding agents: the islandcn skill sets up the engine and wires an activity to your app. - [How it's measured](https://islandcn.dev/docs/how-its-measured): islandcn's sizes and springs come from simulator recordings of the reference phone, compared with the web version frame by frame. ## Agent skills - [islandcn](https://islandcn.dev/docs/.well-known/agent-skills/islandcn/SKILL.md): Read the islandcn docs instead of answering from memory. The open-source Dynamic Island for React. Install it with shadcn, mount it once, and show your app's activities in one pill. Use when a task involves islandcn: how it works, how to set it up or configure it, or its API. ## Agent resources - [llms-full.txt](https://islandcn.dev/docs/llms-full.txt): The full Markdown of every page in one file. - [Page Markdown](https://islandcn.dev/docs/index.md): Append `.md` to any page URL to fetch that page as raw Markdown. - [JSON API](https://islandcn.dev/docs/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://islandcn.dev/docs/openapi.json. - [Agent skills](https://islandcn.dev/docs/.well-known/agent-skills/index.json): Agent Skills discovery index of the skills this site publishes. - [API catalog](https://islandcn.dev/docs/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here. - [AI catalog](https://islandcn.dev/docs/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs). - [agent-readability.json](https://islandcn.dev/docs/agent-readability.json): Manifest of every agent-facing artifact on this site. - [Sitemap](https://islandcn.dev/docs/sitemap.xml): Every indexable page URL with its last-modified date.