Island
betaA pill that morphs between views — idle, a call, a timer, a player — resizing around whatever it shows.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add islandnpm packages installed: class-variance-authority.
import { Island } from "@/components/ui/island";Default
Gallery
Tones
<Island>
| Prop | Type | Default |
|---|---|---|
view (required)The view currently shown — a key of | V | — |
views (required)Content for each view, e.g. | Record<V, ReactNode> | — |
bounceHow far the pill overshoots its new size, 0 (none) to 1. A function gets the previous and next view, so each transition can have its own feel. | IslandBounce | 0.5 |
liveAnnounce each new view to screen readers. Off by default: an island that announces every idle tick trains people to ignore it. | "off" | "polite" | "assertive" | "off" |
tone | "inverted" | "card" | "primary" | "inverted" |
Plus every attribute of <div> except children.
The island is a container: the controls inside a view (play, skip, answer) are ordinary buttons and must be named by the consumer. Pass `live="polite"` to announce each new view — it is off by default, since an island that announces every change is noise. The resize and the incoming view's blur stop under reduced motion; the pill takes its new size immediately.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes