RangePicker
The time range for a dashboard, kept in the URL.
View code
<RangePicker
value="7d"
action="/examples/dashboard"
params={{ monitor: "api" }}
presets={[
{ value: "24h", label: "24h", description: "Last 24 hours", key: "d" },
{ value: "7d", label: "7d", description: "Last 7 days", key: "w" },
{ value: "30d", label: "30d", description: "Last 30 days", key: "t" },
{ value: "90d", label: "90d", description: "Last 90 days", key: "3" },
]}
custom={{ startName: "from", endName: "to", max: "2026-10-31", key: "c" }}
labels={{ group: "Time range", apply: "Apply", custom: "Custom", start: "From", end: "To" }}
mix={rangePickerKeys()}
/>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 { RangePicker } from "@sdxc/ui/app";Renders the picker. Each preset is a submit button of a GET form, pressed when it is the
range in effect; under a 24rem container the segments give way to a select with an Apply
button. Attach rangePickerKeys() for letter keys and to submit the select on change.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
presets | readonly Preset[] | Yes | |
value | string | No | The range in effect: a preset's value, or RANGE_PICKER_CUSTOM_VALUE. |
name | string | No | |
action | string | No | Where the forms submit; the current URL when omitted. |
params | Readonly<Record<string, string>> | No | Other query parameters to keep, submitted as hidden fields (filters, the open tab). |
custom | Custom | No | |
labels | Labels | Yes | |
keyHints | boolean | No | Shows each preset's key as a hint inside its segment. |
Also accepts everything in Omit<TagProps<"div">, "children">.