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.

The engine draws the pill and moves it. What goes inside is yours, and the content kit gives you pieces measured to fit it. The presets are built from them, and so is any island you write. Each is a registry item; add the ones you need:

npx shadcn@latest add https://islandcn.dev/r/island-content.json https://islandcn.dev/r/step-progress.json https://islandcn.dev/r/sparkline.json

island-content comes with every other item. None of them adds an npm package.

island-content

The base every island uses.

Two pieces solve problems you will meet on almost every island:

• SensorRow is the row beside the sensor in a label-led view: a small glyph and a ContextLabel saying what is happening on the leading side, a time, a caption or a 26 pt control on the trailing side. It is about 100 pt wide, so a label holds eight or nine characters. Put a longer name in the bottom title.
• withBubble(compact, bubble) gives a compact pair a second form for the split capsule, which has about 20 pt after its glyph. “18 min”, “B32” or “4:31” would end in an ellipsis there; bubble (a ring, the glyph, two digits) shows instead. <BubbleForm bubble={...}> does the same for one slot.

import { Glyph } from "@/components/islandcn/glyph";
import { PackageGlyph } from "@/components/islandcn/glyphs";
import { BubbleForm, CompactText, withBubble } from "@/components/islandcn/island-text";
import { ProgressRing } from "@/components/islandcn/progress-ring";
import { islandAccent } from "@/components/islandcn/theme";

// "18 min" in the pill, "18" in the capsule.
export const orderTrailing = (minutes: number) => (
  <BubbleForm bubble={<CompactText color={islandAccent.orange}>{minutes}</CompactText>}>
    <CompactText color={islandAccent.orange}>{minutes} min</CompactText>
  </BubbleForm>
);

// The whole pair swaps to a ring in the capsule.
export const syncCompact = (progress: number) =>
  withBubble(
    { leading: <Glyph icon={PackageGlyph} color={islandAccent.blue} />, trailing: <CompactText>{Math.round(progress * 100)}%</CompactText> },
    <ProgressRing value={progress} size={20} />,
  );

Progress and time

import { BottomBar } from "@/components/islandcn/island-layout";
import { StepProgress, stepsAt } from "@/components/islandcn/step-progress";
import { islandAccent } from "@/components/islandcn/theme";

// Step 3 of 5 failed: two segments green, the third red, two waiting.
export const buildSteps = (
  <BottomBar>
    <StepProgress steps={stepsAt({ total: 5, current: 2, failed: true })} color={islandAccent.green} label="Tests failed, step 3 of 5" />
  </BottomBar>
);

Values and text

import { ExpandedBottom } from "@/components/islandcn/island-layout";
import { MetricRow } from "@/components/islandcn/metric";
import { Sparkline } from "@/components/islandcn/sparkline";
import { islandAccent } from "@/components/islandcn/theme";

export const runReadings = (heartHistory: readonly number[]) => (
  <ExpandedBottom reach="inset" gap={10}>
    <MetricRow
      metrics={[
        { label: "Heart rate", value: 148, unit: "BPM", color: islandAccent.red },
        { label: "Pace", value: "5′12″", unit: "/km" },
        { label: "Distance", value: "6.24", unit: "km" },
      ]}
    />
    <Sparkline values={heartHistory} color={islandAccent.red} height={22} strokeWidth={1.75} />
  </ExpandedBottom>
);

Pictures and controls

For a shape the glyph set doesn’t draw, such as a heart, a plane or a lock, use an open icon set: Phosphor’s icons go straight into Glyph’s icon.

The agent skill’s recipes put these together into complete islands: stages, two sides, readings, a price, a code that expires and a transcript.