SdUi.*
demo, one click away.
Each page is a live reference that exercises the library end-to-end. Pick a component below.
Interactive prototype of the whole SDefender app — every page from v1 and v2 rebuilt in this design language, hash-routed with working modals, drawers and ⌘K. Opens in a new tab.
The original full-page SDefender redesign mockup these components are built from — a static Tailwind reference. Opens in a new tab.
A collapsible, persistent navigation rail — expandable groups, an icon-only rail, a mobile drawer, and configurable brand chrome. All client-side.
URL-aware and client-controlled dialogs with focus management and page scroll locking.
Return to a previously filtered list after closing an edit view — browser-history back with a deep-link fallback, plus the explicit, reload-safe return_to.
Anchored dropdowns + the IP intel token. Open / place / dismiss / keyboard on the client.
Display-only hints on hover and focus over the shared anchored engine — hoverable, dismissible, never focus-stealing.
One component, every action — variant × color × size, plus loading / disabled / icon states.
Display-only status labels — color, variant and size, with an optional dot, a live pulse and a leading icon.
The bordered container around every table and dashboard widget — header, actions and footer slots, three surfaces, four paddings.
A horizontal panel switcher — a real tablist with arrow-key roving focus, not a segmented field. Client-owned selection, three variants.
A stack of expandable disclosure sections for collapsible groups and FAQs — native <details>, independent or exclusive, with zero JavaScript.
The display-only filled track behind every gauge — a usage strip, an origins chart, a score. Color × size, a clamped value, an optional header row.
The styled chrome for a data table — sortable headers, a filter row, selectable and expandable rows, and a pager. Markup and styling only; every interaction stays yours.
The opinionated, Flop-backed table built on the chrome — open filters (drop in any input), sortable headers and pagination, all synced to the URL. One event, two one-line callbacks.
Format-agnostic syntax highlighting for raw log lines — CEF, syslog, nginx, JSON, key-value and formats nobody coded for. One lexer, server-rendered, reusable anywhere.
The display-only blocks a panel or table shows with no data — an empty state, a skeleton/spinner loader, and an error. Drop-in, or colspan into a table row.
Stacking, self-dismissing feedback raised from the client or the server — plus the Phoenix flash bridge. One region, configurable timeout.
Text fields, checkboxes, radios, switches and groups with labels, addons and server-driven validation.
Server-rendered autocomplete over the shared anchored-popover engine.
Seconds-precision date+time that submits UTC but edits in the browser's timezone — single or Elastic-style range with quick ranges.
Preset-or-custom duration field that submits canonical integer seconds through one hidden input — a client engine decomposes the value for display and writes edits back.
Never, a preset, a calendar date or keep the current expiry — one select submits the choice, a date-only picker the date, and every label comes from the caller.
Display-only timestamp that ships a UTC value and paints it in the browser's local timezone — the read-only companion to the datetime picker.
Semantic tones, tints, the neutral ramp and surface tokens — the one set every component reads from, in light and dark.
The dense type scale and three self-hosted families — display, sans and mono — as one token set: text-stat … text-eyebrow, each paired with a family and a color.