Live QA surface
Preview index
Searchable live pages for component QA, CSS regression checks, and composed app fixtures. Component entries are generated from the docs collection, so missing previews fail the build.
No preview pages match that search.
Framework layer
Foundations
-
Reset Layer order and minimal browser normalization. -
Tokens Primitive scales parsed live from source. -
Themes and density Light, dark, compact, comfortable, and touch modes. -
Base Element defaults and the fluid type scale. -
Layout Grid, cluster, sidebar, scroll area, and app shell primitives. -
Utilities Screen-reader, truncate, wrapping, flow, surface, and full-bleed helpers. -
Enhancements @supports-gated progressive CSS features.
Generated from docs
Components
-
Accordion Collapsible disclosure using native details/summary with auto-height animation. -
Alert Inline notifications for contextual feedback - four tones, each WCAG-AA. -
App process builder Porchlight-native admin shell recipe for process drafts, step maps, validation feedback, and inspector forms. -
Auto-Growing Textarea Textarea that grows to fit content via field-sizing. Zero JavaScript. -
Avatar A user identity chip - initials or image, with group stacking. -
Badge A compact label for statuses, counts, and tags - tones via data-tone, consuming the WCAG-AA semantic pairs. -
Breadcrumb Navigation trail showing site hierarchy. CSS-only separators via gap decorations. -
Button The canonical action control - native button, token-driven, with primary/secondary/ghost variants. -
Calendar Date, date-range, and time picker contracts for app-owned calendar behavior. -
Card A raised surface grouping related content - header, body, and optional footer, with a container-query header and an interactive variant. -
Chart shell Accessible chart container for metric headers, legends, plot slots, loading/empty/error states, and table fallback content. -
Chip Compact tag/pill with optional remove button. Uses relative color syntax for derived tints. -
Combobox Framework-neutral combobox, autocomplete, and async lookup patterns for SaaS entity selection. -
Command Palette Cmd+K quick-action search overlay using Popover API. Search, grouped actions, keyboard navigation. -
Command-driven workspace App-shell composition kit for command-centered products with palette search, split results, details, recents, and feedback. -
Data table Enterprise data table with sortable headers, row selection, expandable rows, sticky column, density modes, and loading states. -
Data-dense mode A fourth density tier for SIEM dashboards, trading terminals, and analytics consoles where screen real estate is at a premium. -
Description list A key-value grid for detail panels, metadata displays, and summary cards. -
Dialog A modal dialog using the native dialog element - confirmation, forms, detail views. ::backdrop scrim, @starting-style entry/exit, header/body/footer. -
Drawer Off-canvas slide-over panel using Popover API with @starting-style animation. -
Dropdown Button-triggered option menu using Popover API + anchor positioning. Supports icons, descriptions, and custom rendering. -
Empty state The "no data yet" placeholder - turns a blank screen into an invitation with a title, description, and CTA. -
Field A labeled native form control with stacked and inline layouts, required markers, messages, validation, and input-group composition. -
File Upload Drag-and-drop file upload zone. Native input hidden, CSS-only state management via :has(). -
Filter builder CSS-only query builder, query chips, and saved view bar for SaaS data surfaces. -
Form Layout helpers for SaaS forms, grids, sections, actions, choice lists, choice messages, and input groups. -
List/detail workspace A Porchlight-native app composition for queues, records, inspectors, and split-pane detail workflows. -
Nav Vertical sidebar navigation with icon+label items, active states, collapsible sections, and icons-only variant. -
Page header A title + actions row for the top of a page or panel section inside a container. -
Pagination Navigation control for paginated data - previous/next + numbered pages with aria-current for the active page. -
Popover menu A dropdown menu anchored to its trigger - native Popover API, CSS anchor positioning, @starting-style entry/exit animation. -
Progress A linear progress indicator - determinate or indeterminate, with tone variants. -
Queue triage kit Operational queue composition for intake, SLA review, assignment, and activity history. -
Reporting dashboard A Porchlight-native analytics workspace composition for report controls, saved views, KPI stats, chart shells, insights, and breakdown tables. -
Reveal Elements that fade/slide in as they enter the viewport. Zero JavaScript via scroll-driven animations. -
Scroll Progress A fixed progress bar that fills as you scroll. Zero JavaScript via scroll-driven animations. -
Segmented Control Compact inline switcher for binary/ternary toggles. CSS-only, native radio inputs. -
Settings console A Porchlight-native admin settings composition for account, team, security, billing, and destructive workflows. -
Skeleton Loading placeholders with a CSS-only pulse - mimics real content shapes without a spinner. -
Split button A primary action button paired with a dropdown toggle for alternative actions. Composes two .c-button segments with a Popover API menu. -
Split pane CSS-only horizontal and vertical split panes for explorers, editors, inspectors, and process builder shells. -
Stat A KPI / metric tile for dashboards - number, label, unit, trend indicator, and optional sparkline. -
Stepper Multi-step indicator with CSS-only connectors. Responsive collapse via container queries. -
Switch CSS-only toggle switch built on a native checkbox. No JavaScript for the toggle. -
Tabs A tabbed region for switching between views - native ARIA tablist semantics with a box-shadow indicator. -
Tag Input Multi-value input that converts typed values into removable chips. -
Timeline Vertical activity feed with tone-colored markers and connector lines. -
Toast Transient notifications with @starting-style enter animation. Auto-stacking via fixed container. -
Toolbar An action bar grouping controls above a data region - search, filters, and primary actions in one row. -
Tooltip Hover/focus tooltip using CSS Anchor Positioning. Zero JavaScript for positioning. -
Tree view Role-first tree view for object explorers, nested navigation, process folders, rule libraries, and app sidebars. -
Workflow board CSS-only BPM board shell for lanes, swimlanes, work cards, WIP counts, and app-owned drag/drop states.
Composed screens
Examples and fixtures
-
App shell Desktop SaaS topbar, sidebar, and main work area. -
Case Review Case-management workspace with dense review surfaces. -
Dashboard Enterprise SaaS dashboard composed from Porchlight components. -
Marketing page Full-bleed hero, masonry cards, and scroll animation. -
Responsive dashboard Full app shell with sidebar navigation, KPI grid, and data table. -
Responsive inbox Master-detail layout with container-query collapse. -
Security SIEM Security operations console with dense data regions. -
Settings SaaS settings page with sidebar navigation, forms, and tabs.