Live QA surface
Preview index
Searchable live pages for component QA, CSS regression checks, and composed app fixtures. Component and pattern entries are generated from the docs collection, so missing previews fail the build.
No preview pages match that search.
Framework layer
Foundations
ResetLayer order and minimal browser normalization. TokensPrimitive scales parsed live from source. Themes and densityLight, dark, compact, comfortable, and touch modes. BaseElement defaults and the fluid type scale. LayoutGrid, cluster, sidebar, scroll area, and app shell primitives. UtilitiesScreen-reader, truncate, wrapping, flow, surface, and full-bleed helpers. Enhancements@supports-gated progressive CSS features.
Generated from docs
Components
AccordionCollapsible disclosure using native details/summary with auto-height animation. AlertInline notifications for contextual feedback - four tones, each WCAG-AA. Auto-Growing TextareaTextarea that grows to fit content via field-sizing. Zero JavaScript. AvatarA user identity chip - initials or image, with group stacking. BadgeA compact label for statuses, counts, and tags - tones via data-tone, consuming the WCAG-AA semantic pairs. BreadcrumbNavigation trail showing site hierarchy. CSS-only separators via gap decorations. ButtonThe canonical action control - native button, token-driven, with primary/secondary/ghost variants. CalendarDate, date-range, and time picker contracts for app-owned calendar behavior. CardA raised surface grouping related content - header, body, and optional footer, with a container-query header and an interactive variant. Chart shellAccessible chart container for metric headers, legends, plot slots, loading/empty/error states, and table fallback content. ChipCompact tag/pill with optional remove button. Uses relative color syntax for derived tints. ComboboxFramework-neutral combobox, autocomplete, and async lookup patterns for SaaS entity selection. Command PaletteCmd+K quick-action search overlay using Popover API. Search, grouped actions, keyboard navigation. Data tableEnterprise data table with sortable headers, row selection, expandable rows, sticky column, density modes, and loading states. Description listA key-value grid for detail panels, metadata displays, and summary cards. DialogA modal dialog using the native dialog element - confirmation, forms, detail views. ::backdrop scrim, @starting-style entry/exit, header/body/footer. DrawerOff-canvas slide-over panel using Popover API with @starting-style animation. DropdownButton-triggered option menu using Popover API + anchor positioning. Supports icons, descriptions, and custom rendering. Empty stateThe "no data yet" placeholder - turns a blank screen into an invitation with a title, description, and CTA. Entity inspectorA native nonmodal record popover with contextual metadata, actions, and automatic per-invoker anchoring. FieldA labeled native form control with stacked and inline layouts, required markers, messages, validation, and input-group composition. File UploadDrag-and-drop file upload zone. Native input hidden, CSS-only state management via :has(). Filter builderCSS-only query builder, query chips, and saved view bar for SaaS data surfaces. FormLayout helpers for SaaS forms, grids, sections, actions, choice lists, choice messages, and input groups. Inline loadingLocal indeterminate progress and a width-stable busy-button pattern. Miller columnsRoles-first cascading columns for IAM permissions, taxonomic exploration, nested document navigation, and hierarchical data sets. NavVertical sidebar navigation with icon+label items, active states, collapsible sections, and icons-only variant. Page headerA title + actions row for the top of a page or panel section inside a container. PaginationNavigation control for paginated data - previous/next + numbered pages with aria-current for the active page. Panel deckA small set of fixed panels with native CSS tab navigation and a readable stacked fallback. Popover menuA dropdown menu anchored to its trigger - native Popover API, CSS anchor positioning, @starting-style entry/exit animation. ProgressA linear progress indicator - determinate or indeterminate, with tone variants. RevealElements that fade/slide in as they enter the viewport. Zero JavaScript via scroll-driven animations. Scroll ProgressA fixed progress bar that fills as you scroll. Zero JavaScript via scroll-driven animations. Scroll RegionBounded scrollports with logical overflow indicators and scroll-aware sticky table boundaries. Section NavigationNative fragment links that highlight the currently visible record or article section. Segmented ControlCompact inline switcher for binary/ternary toggles. CSS-only, native radio inputs. SkeletonLoading placeholders with a CSS-only pulse - mimics real content shapes without a spinner. Split buttonA primary action button paired with a dropdown toggle for alternative actions. Composes two .pl-c-button segments with a Popover API menu. Split paneCSS-only horizontal and vertical split panes for explorers, editors, inspectors, and process builder shells. StatA KPI / metric tile for dashboards - number, label, unit, trend indicator, and optional sparkline. StepperMulti-step indicator with CSS-only connectors. Responsive collapse via container queries. SwitchCSS-only toggle switch built on a native checkbox. No JavaScript for the toggle. TabsA tabbed region for switching between views - native ARIA tablist semantics with a box-shadow indicator. Tag InputMulti-value input that converts typed values into removable chips. TimelineVertical activity feed with tone-colored markers and connector lines. ToastTransient notifications with @starting-style enter animation. Auto-stacking via fixed container. ToolbarAn action bar grouping controls above a data region - search, filters, and primary actions in one row. TooltipHover/focus tooltip using CSS Anchor Positioning. Zero JavaScript for positioning. Tree viewRole-first tree view for object explorers, nested navigation, process folders, rule libraries, and app sidebars. Workflow boardCSS-only BPM board shell for lanes, swimlanes, work cards, WIP counts, and app-owned drag/drop states.
Application recipes
SaaS patterns
App process builderPorchlight-native admin shell recipe for process drafts, step maps, validation feedback, and inspector forms. Approvals inboxScoped workspace updates with application-owned selection, filtering, approval and undo. Command-driven workspaceApp-shell composition kit for command-centered products with palette search, split results, details, recents, and feedback. Data-dense modeA fourth density tier for SIEM dashboards, trading terminals, and analytics consoles where screen real estate is at a premium. List/detail workspaceA Porchlight-native app composition for queues, records, inspectors, and split-pane detail workflows. Queue triage kitOperational queue composition for intake, SLA review, assignment, and activity history. Record DetailAn enterprise record with overview, activity, permissions, and billing sections and native in-page navigation. Reporting dashboardA Porchlight-native analytics workspace composition for report controls, saved views, KPI stats, chart shells, insights, and breakdown tables. Settings consoleA Porchlight-native admin settings composition for account, team, security, billing, and destructive workflows.
Composed screens
Examples and fixtures
App shellDesktop SaaS topbar, sidebar, and main work area. Asset InventorySearchable records with native entity inspectors and review actions. Case ReviewCase-management workspace with dense review surfaces. CSS ModulesStable Porchlight classes with token overrides from a local CSS Module. DashboardEnterprise SaaS dashboard composed from Porchlight components. Marketing pageFull-bleed hero, masonry cards, and scroll animation. Responsive dashboardFull app shell with sidebar navigation, KPI grid, and data table. Responsive inboxMaster-detail layout with container-query collapse. Security SIEMSecurity operations console with dense data regions. SettingsSaaS settings page with sidebar navigation, forms, and tabs.