DetailSheet
A non-modal side sheet showing one record whose open state lives in the URL.
View code
{selected ? (
<DetailSheet
id="monitor"
title="api.example.com"
description="HTTPS · every 30 seconds"
closeHref="/monitors#monitor-3"
permalink="/monitors/3"
position={{ index: 3, total: 84, previousHref: "/monitors?pane=2", nextHref: "/monitors?pane=4" }}
footer={<Button variant="outline">Pause monitor</Button>}
labels={{
close: "Close",
copyLink: "Copy link",
linkCopied: "Link copied",
previous: "Previous monitor",
next: "Next monitor",
position: "Monitor",
}}
>
<PropertyList>…</PropertyList>
<Timeline aria-label="Recent activity">…</Timeline>
</DetailSheet>
) : null}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 { DetailSheet } from "@sdxc/ui/app";Renders an <aside> named by its heading over the viewport, passing the pointer through
to the page, with the panel docked to its inline end at --ui-app-detail-sheet-width, or
a bottom sheet below 40rem. Never a modal; destructive actions confirm in the app's flow.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
id | string | Yes | The sheet's id; its heading takes ${id}-title. |
title | RemixNode | Yes | The record's name, in the sheet's heading. |
description | RemixNode | No | A line under the title: an id, a status, a host. |
closeHref | string | Yes | The list URL without the record open. Close and Esc follow it. |
permalink | string | No | The URL a teammate can open this record at; shows the copy button. |
position | Position | No | Shows n / N with previous/next links and their keys. |
actions | RemixNode | No | Extra header controls, placed before the navigation. |
footer | RemixNode | No | Pinned under the body: the record's own actions. |
keys | DetailSheetKeyScope | No | Where Esc, k/j and ↑/↓ answer: "page" document-wide with focus moved into the sheet on open, "sheet" only while focus is inside it. |
inset | boolean | No | Floats the sheet off the viewport edges as a rounded card. |
labels | Labels | Yes | |
children | RemixNode | No | The record's detail: a PropertyList, a Timeline, notes. |
Also accepts everything in Omit<TagProps<"aside">, "id" | "title">.