DocsnavigationDynamic island

Dynamic island

A Calamansi island that eases between a compact bar and an expanded slab when tapped, and glows when it alerts.

Palette
Calamansi

Tap island to expand or collapse

Scenario Switcher

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/dynamic-island

How to use

demo.tsx
import { DynamicIsland } from "@/components/ui/dynamic-island"
export function Demo() {
  return (
    <DynamicIsland
      title="Focus Timer"
      trailing={<span>24:18</span>}
      expandedContent={<div>Expanded Timer View</div>}
    />
  )
}

Props

Options you can pass to customize this component.

  • stateoptional
    idlecompactexpandedalert

    Controlled state of the island.

  • defaultStateoptional
    idlecompactexpandedalert

    Initial state when the island is uncontrolled.

  • onStateChangeoptional
    (state: DynamicIslandState) => void

    Callback fired when state toggles.

  • iconoptional
    ReactNode

    Primary icon, drawn in a chip tinted from the surface ink.

  • leadingoptional
    ReactNode

    Leading slot in compact/alert state.

  • trailingoptional
    ReactNode

    Trailing slot in compact/alert state.

  • titleoptional
    ReactNode

    Title in compact/alert state.

  • expandedContentoptional
    ReactNode

    Full content rendered in expanded mode.

  • interactiveoptional
    boolean

    Enable click to expand/collapse.

  • variantoptional
    whitecalamansislatecitrus

    Surface palette. Calamansi is the default slab; White is white in light mode and near-black in dark.

  • pulseoptional
    boolean

    An ambient pulsing dot beside the title in idle and compact states.

  • classNameoptional
    string

    Extra classes merged onto island pill.

Dependencies

motion

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Calamansi UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.
PreviousDock
NextGooey nav