Premium & Brand

Dynamic Island

A compact live-activity pill that morphs between views.

Import

tsx

import { DynamicIsland } from "@cronus-ui/ui";

bash

npx cronus-ui add dynamic-island

Examples

Live activity

A compact pill that morphs between views. The dots are a tablist; the shell resizes with a spring.

Cronus

tsx

<DynamicIsland
  views={[
    { id: "idle", label: "Idle", content: <span className="text-sm">Cronus</span> },
    {
      id: "now",
      label: "Now playing",
      content: <span className="text-sm">Shipping the surface</span>,
    },
  ]}
/>

API Reference

Generated from the component's exported types.

DynamicIslandProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "children">

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	—
`views`*	`DynamicIslandView[]`	—	—
`value`	`string`	—	Controlled active view id.
`defaultValue`	`string`	—	—
`onValueChange`	`(id: string) => void`	—	—