Gallery
Components
Four core controls, each shown with every variant and state, plus one realistic composition. Toggle the theme in the sidebar to verify both palettes.
Button
The action control. One primary button per view; everything else steps down to secondary, outline or ghost.
Show code
<Button variant="primary" size="md" loading={saving}>
Save changes
</Button>In context — toolbar
Input
Single-line text field. Always label it; use `hint` for guidance and `error` for validation failures.
We only use this for deploy notifications.
Your plan is limited to 10 seats.
Show code
<Input
label="Work email"
type="email"
required
hint="We only use this for deploy notifications."
/>In context — settings card
Checkbox
Native checkbox with a styled box. Use it for independent options; use indeterminate for a parent covering a partial selection.
Show code
<Checkbox
label="Email me on failed deployments"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>In context — notification preferences
Modal
Built on the native `<dialog>` element: focus is trapped, Escape closes, the backdrop dims, and the page behind cannot scroll.
Show code
const [open, setOpen] = useState(false);
<Modal
open={open}
onClose={() => setOpen(false)}
title="Delete “Orbital relay”?"
description="This removes all deployments and logs."
size="sm"
footer={
<>
<Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
<Button variant="destructive" onClick={confirm}>Delete project</Button>
</>
}
>
Type-safe, focus-trapped, and dismissable with Escape.
</Modal>