Good interfaces start with good pieces.
Explore all 67 public components and browser entry points. Each guide brings together working examples, the source behind them, behavior guidance and a focused API reference.
Find the right piece
Start with a task, then explore the components that support it.
These pages use the standard PureStack doc template, navigation, page TOC, components and theme styles. Try both studio skins with the theme switcher. For browser state, each example mounts its own explicitly defined Regor app.
Actions and feedback
AlertBox
Give a message the right emphasis with a title, semantic tone, optional icon and contextual actions.
Explore AlertToastHost
Display dismissible notifications from a ToastStore, with semantic tones and predictable lifetimes.
Explore ToastLayout and content
Panel
A semantic surface for settings, summaries and grouped content. Control its tone, treatment and inner layout without losing the theme.
Explore PanelFlex
Arrange content along one axis, from compact inline metadata to responsive application toolbars.
Explore FlexGrid
Responsive columns and explicit CSS tracks for cards, settings and content layouts.
Explore GridSectionHeader
A consistent heading hierarchy with an eyebrow, subtitle and supporting footnote.
Explore SectionExpandablePanel
Progressively disclose details with a native, keyboard-operable summary and a themed content surface.
Explore ExpandableIcon
Render a registered SVG symbol with the surrounding text color and a deliberate accessible name.
Explore IconIconFrame
Give an icon a consistent size, semantic color and framed treatment for cards, metrics and status summaries.
Explore IconTabPane
One labelled view within Tabs, with its own content surface, icon and availability state.
Explore TabModalTrigger
A labelled button that opens a matching Modal through the standard dialog runtime.
Explore ModalForms and input
AppForm
A themed native form that keeps field composition, validation and submission in your control.
Explore AppFormInputField
A labelled native input with reactive values, optional icons and built-in numeric step controls.
Explore FormFormSelectField
A labelled native select with typed option data, reactive selection and familiar keyboard behavior.
Explore FormFormCheck
A native checkbox with a visible label, semantic tone and a two-way boolean ref.
Explore FormFormMeta
A consistent row for secondary form choices, supporting links and submission controls.
Explore FormFormAssistLink
A small native link for recovery, help and supporting form navigation.
Explore FormFormSubmit
A focused submit control for AppForm, with a visible label and shared button styling.
Explore FormFormStatus
Polite live feedback for validation, progress and completed form actions.
Explore FormContactForm
A complete contact form with name, email, topic and message fields, plus configurable copy and a native submission endpoint.
Explore ContactAutoCompleteInput
Search a suggestion list with native text input, keyboard selection and separate query and selected-value state.
Explore AutoAutoCompleteOptionRow
The default presentation for one autocomplete suggestion, including an optional selected indicator.
Explore AutoMultiAutoCompleteInput
Select several suggestions, create new tokens and keep a structured list separate from the current query.
Explore Multi MultiAutoCompleteOptionRow
The minimal default row presentation used by the multi-value suggestion picker.
Explore MultiComposer
Edit rich text with formatting tools, HTML source mode and synchronized HTML and plain-text refs.
Explore ComposerDropFiles
Collect local files through a picker, drag and drop, or paste, with removable selections and file-type filtering.
Explore DropCharts and large data
BarChart
Compare categorical values in a responsive SVG chart, including positive and negative data.
Explore BarLineChart
Show change across an ordered sequence with multiple series, optional areas and precise presentation controls.
Explore LineDoughnutChart
Show positive parts of a whole with a configurable ring, centre label and theme-aware segment colors.
Explore DoughnutVirtualList
Keep large collections responsive by mounting a small scrolling window of fixed-height rows.
Explore VirtualVariableVirtualList
Keep large collections responsive by mounting a small scrolling window of measured variable-height rows.
Explore VariableVirtualTable
Render a large semantic table while mounting only nearby rows, with predictable fixed row heights.
Explore VirtualVariableVirtualTable
Render a large semantic table while mounting only nearby rows, with measured variable row heights.
Explore VariableLanding and pricing
LandingBand
A full-width visual band with shaped edges, background imagery and theme-aware surfaces.
Explore LandingLandingSection
Introduce a section and arrange its content beside a clear heading at larger breakpoints.
Explore LandingFeatureCard
Present one capability with a recognizable icon, short explanation and an optional next step.
Explore FeatureMetricStrip
Arrange related metrics in a responsive surface with a clear reading order.
Explore MetricCodeShowcase
Pair a code block with its visible result and the context needed to understand both.
Explore CodeComparisonTable
Compare approaches in responsive columns, each with its own heading, summary and feature list.
Explore ComparisonComparisonColumn
One self-contained option in a comparison, with independent emphasis and freely composed details.
Explore ComparisonComparisonFeature
A list item with a compact icon, designed for clear and consistent comparison details.
Explore ComparisonCtaSection
Close a section with a clear next step, an optional secondary route and concise supporting context.
Explore CtaPricingTable
A responsive plan comparison with a section heading, configurable columns and independent plan surfaces.
Explore PricingPricingPlan
A complete plan card with a price, billing period, feature list and navigation action.
Explore PricingPricingFeature
A compact list item for included capabilities, limits and plan-specific details.
Explore PricingSite navigation and services
SiteLogo
A reusable brand identity with flexible layouts, icon and image marks, and theme-aware treatments.
Explore SiteSiteFooter
A site-wide footer with content, legal and social slots, plus a built-in home for consent settings.
Explore SiteTopBar
The standard site header combines branding, search, theme switching and optional account access.
Explore TopNavMenu
A hierarchical site navigation panel with active-page state, collapsible groups and optional search and account controls.
Explore NavNavList
Render an already prepared navigation tree without the surrounding site panel controls.
Explore NavPageLinks
Previous and next navigation for a reading sequence, with explicit destinations or SSG-derived neighbors.
Explore PagePageToc
A linked document outline with nested section entries and standard doc-layout controls.
Explore PageThemeToggle
One icon button that flips the site between its light and dark themes.
Explore ThemeSignIn
An account-menu entry point with signed-in and signed-out presentation, optional avatars and replaceable destinations.
Explore SignConsent
A consent banner and preference panel driven by the site’s categories, policy version and service configuration.
Explore ConsentBrowser entry points
RegorApp
Mount an independent browser app from a TypeScript file colocated with its MDX page.
Explore RegorPageScript
Include a page-specific browser entry point with SSG path resolution, bundling and native script attributes.
Explore Page