SaveBar
Client island: the sticky "Unsaved changes · Discard · Save" bar a long form shows once it differs from how it loaded.
View code
<form method="post" action="/monitors/api">
<TextField label="Name" name="name" defaultValue="Public API" />
<TextField label="URL" name="url" type="url" defaultValue="https://api.acme.dev/health" />
<TextField label="Expected status" name="status" type="number" defaultValue="200" />
<TextArea name="notes" aria-label="Runbook notes" defaultValue="Page #oncall-api if it stays down for 5 minutes." />
<Button type="submit">Save monitor</Button>
<SaveBar labels={{ message: "Unsaved changes", discard: "Discard", save: "Save", shortcut: "⌘S" }} />
</form>Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { SaveBar } from "@sdxc/ui/app";Renders the bar, hidden until the watched form changes. Place it as the form's last child so it sticks to the bottom of the viewport while the form scrolls; the form keeps its own Save, which is what a browser without script uses.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.