Skip to content

Live specimens

islands actually running · flip your os scheme for the other half

The interactive half of the catalog. Use the controls, open the overlays, and verify the keyboard behavior before bringing a component into an app.

buttons

badges

neutralaccentpasswarnfailpending

callouts

Deploy recorded

launchpad is live on production.

Deploy failed

The build exited non-zero. Check the log, then retry.
Beta channel — pin exact versions before relying on this.
Waiting for the runner to pick this up.
A neutral note, for context that carries no state.

form

1–60 characters.

Native file input — the selector button wears the kit recipe.

Native date input — the kit's DatePicker.

Native range — sliderCss inside a Field.

Multi-line — textareaCss keeps the Field wiring.

Native select for no-JS forms.

The search-input recipe: Field + Kbd, focus wired in an app island.

Notifications

A labelled group of Fields — real fieldset/legend, UA chrome reset.

Environment

Radios pick one; the ring stays a ring.

Production
Staging
Preview
launchpad
console
beacon
archive
Notify through

multi combobox · tooltip

Supplementary help appears without moving focus

alert dialog

Delete queued deploy?

This removes the queued deploy before a runner starts it.

spinner

icon button

date field · date picker

Uses local time.

toolbar

data table

Workspace files
selectfilekindlocation
package.jsonmanifestworkspace root
README.mddocumentationworkspace root

upload list

  • release-notes.md3 KBuploading
    75%
  • checksums.txt1 KBready

split button

toggle group

Row density
Visible columns

input otp

Enter the six-digit code.

progress

42%
3 of 8
68%

tabs

Keyboard-complete via the remix tabs primitives: arrow keys move, Home/End jump, panels follow.

accordion

The petrol theme as custom properties, typed t.* refs, semantic status hues, and the theme stylesheet — lockstep-tested against kapable-theme.css.

diff

middleware: [staticFiles('./public'), render(),  formData()],  formData(), loadDatabase(db)],

disclosure

Advanced options (native details — works JS-off)
A one-off show/hide on native details/summary: the browser owns toggle, keyboard, and semantics. Grouped sets with coordination are Accordion.

table2

Sample deploys
appstatuswhen
launchpadpass2m ago
consolewarn1h ago

stats · details

deploys today
12+3

vs. yesterday

p95 latency
184ms−40ms
failures
2+2
72%
Ada Lovelaceada@example.devOps Botservice account

12+ characters

Region
us-east-1
Runtime
node 24.3
Commit
d0a2f7e
Channel
beta

steps

timeline

  1. Deploy recorded14:02

    launchpad → production

  2. Build started14:00
  3. Pushed d0a2f7e13:58

identity · pieces

ALGHKJAEMJ
Loading

empty states

Nothing deployed yet

The serif variant, for screens without a masthead.

No results

The quiet variant, below a serif masthead.

dialog

Filters

A bottom sheet — the mobile filters/actions pattern, same native dialog contract.

Deploy details

Region
us-east-1
Runtime
node 24.3
Commit
d0a2f7e

Delete deploy?

Removes deploy #4821 from the log. This cannot be undone.

segmented

View
Density

menu · popover

Commands

Open deploys
Open styleguide
Kit gallery (external)

toasts

breadcrumbs

pagination

prose

Release notes

The typography tier for flowing content — rendered markdown, release notes, long-form help. Links underline at rest,inline code sits on the quiet channel, and blockquotes wear the gutter:

Hues mark; they never carry text.

chrome

press / to focus the form · kapable · remix docs(external) · search hit: launchpad