U
UIPKGE
/
blocks
Files
Code
Info
Ab Test Variant Results
ab-test-variant-results
Optimizely and Statsig style A/B test statistical significance scorecard and conversion delta comparison. Features experiment status header, 4 primary experiment metrics cards, variants comparison table with statistical verdicts, and conversion funnel step drop-off comparison.
Access Request Workflow
access-request-workflow
Just-In-Time (JIT) IAM temporary privilege escalation request modal and approval queue: governance metrics cards, elevated session countdown timers, approval form dialog, and active session manager with instant revoke and audit logging.
Activity Feed
activity-feed
Record activity as a Timeline of avatar rows. Each row is spelled out inline — actor, verb, optional comment, relative time. Edit the rows after install; no items wrapper.
Ad Spend Roi Dashboard
ad-spend-roi-dashboard
Multi-channel paid acquisition ad spend, blended ROAS, and CAC performance dashboard: 4 primary KPI cards (total spend, revenue with blended ROAS, CAC, conversions), channel performance comparison table with live toggle switches, and top 3 performing campaign breakdown.
Agent Memory Inspector
agent-memory-inspector
Autonomous AI agent memory inspector featuring short-term context buffer utilization, long-term episodic vector memories with confidence scoring, and Neo4j-style entity relationship knowledge graph.
Ai Agent Orchestrator
ai-agent-orchestrator
Multi-agent workflow visualizer and execution graph. Displays real-time agent pipeline topology, active reasoning streams, tool invocation metrics, live code artifact generation, and pipeline control actions.
Ai Code Review Assistant
ai-code-review-assistant
GitHub PR automated AI code review assistant with AST syntax diff annotations, performance suggestions, and 1-click patch application.
Ai Crm Pipeline Dashboard
ai-crm-pipeline-dashboard
High-craft AI CRM deal pipeline, deal velocity, AI win probability scoring, and sales activity tracker inspired by Wise / revenue intelligence platforms. Features revenue velocity metrics, 4-stage pipeline Kanban board with predictive win scores, deal progress bars, and AI meeting summaries with buying intent detection.
Ai Llm Chat
ai-llm-chat
ChatGPT/Claude-style LLM chat surface. Collapsible left sidebar with New chat, searchable thread history grouped Today/Yesterday/Previous 7 days/Earlier, account row. Centered conversation: empty state with suggested-prompt tiles, user/assistant turns with code-block rendering and copy/regenerate/feedback actions, streaming dots, stop button. Composer with model picker (Opus/Sonnet/Haiku), attach, Enter-to-send, autosizing textarea. Stateful demo — wire `send()` to your streaming endpoint.
Ai Saas Command Center
ai-saas-command-center
Modern AI SaaS platform command center with real-time token burn telemetry, GPU cluster health, latency percentiles, and cost anomaly alerts.
Airbnb Host Earnings
airbnb-host-earnings
Short-term rental host revenue dashboard: gross earnings with month-over-month growth, occupancy rate progress, ADR & RevPAR metrics, automated direct deposit payout schedule card, dynamic pricing AI rate recommendations, and an itemized reservation payout breakdown table.
Analytics Overview
analytics-overview
Two-pane analytics dashboard: stacked bar with dot overlay on a dual y-axis above, and an interactive drill-down line chart below. Click a bar to filter the bottom pane to that route.
Announcement
Announcement band set covering six placements: a dismissible top banner in solid, soft, and gradient tones, a split release-notes band, a rotating multi-message strip, a session countdown bar, a delayed corner card, and a sticky version-pill banner.
Announcement Banner
announcement-banner
Interactive release, security, and maintenance broadcast center with rotating live ticker, CLI copy button, and floating pill / top-bar modes.
Announcement — Split Banner
announcement-banner-split
Full-width announcement band split between a labelled message column and an action column, sized for release notes and maintenance notices rather than promotions.
Announcement — Corner Card
announcement-corner-toast
Corner announcement card that slides in after a delay carrying a thumbnail, headline, supporting line, and two actions, staying out of the page flow entirely.
Announcement — Countdown Bar
announcement-countdown-bar
Top strip counting down to a deadline in days, hours, minutes and seconds, with the offer line, an inline CTA, and a dismiss control that keeps it closed for the session.
Announcement — Rotating Strip
announcement-rotating-strip
Announcement bar that cycles through several messages on a timer, pausing on hover and on focus, with dot controls for stepping between them manually.
Api Keys
api-keys
Developer API-key manager in a SectionCard. Self-contained stateful block with stub keys, reveal/copy/revoke row actions, an empty state, and a create-key dialog.
Asset Tracking Map
asset-tracking-map
Intermodal cargo container tracking with cold-chain sensor status, geofence perimeter rings, and battery levels.
Assignment Submission Dropzone
assignment-submission-dropzone
University coursework submission portal with plagiarism check indicator, grading rubric, and deadline timer.
Audio Waveform Transcript
audio-waveform-transcript
Descript and Otter style interactive podcast speech-to-text transcript with speaker diarization tags, interactive audio waveform scrubber, keyword search highlighting, talking time ratio analytics, clickable timecodes, and VTT/TXT export.
Audit Event Stream
audit-event-stream
Real-time live streaming audit log viewer and security telemetry feed with status indicators, stream pause/resume controls, regex and keyword log filtering, severity badges, expandable JSON payload inspectors, and ingestion telemetry stats.
Audit Log
audit-log
Admin activity trail in a SectionCard: live indicator, search across actor/target, action-type filter, and rows pairing an avatar actor with a color-coded action badge, monospace target, IP and relative timestamp. Filtering is functional against the `entries` prop; swap the stub data for your source.
Author Bio Box
author-bio-box
Editorial author signature card with avatar, verified badge, social links row, recent articles list, and interactive RSS subscribe button.
Backorder Split Shipment Manager
backorder-split-shipment-manager
Order fulfillment split shipment manager with stock triage, backorder tracking, and multi-node dispatch controls.
Bank Account Connector
bank-account-connector
Plaid/Tink style bank linking modal and account selector with institution search, popular bank grid (Chase, Bank of America, Wells Fargo, Citibank, Capital One, SVB), account radio selection with balances and badges, and an AES-256 encrypted security footer.
Banner Announcement Sticky
banner-announcement-sticky
Sticky release announcement banner with version pill, call-to-action link, and dismiss trigger.
Before & After — Side by Side
before-after-side-by-side
Two labelled panels set side by side at equal height with a shared annotation row beneath, for comparisons a slider would make harder rather than clearer.
Before & After — Toggle
before-after-toggle
Single panel toggling between the old and new state of the same screen, with a caption naming what changed and a control that keeps its position between switches.
Telemetry Bento
bento-01
High-density bento grid featuring an interactive AI query copilot workbench, real-time edge network telemetry feed, live latency radar, and SOC 2 compliance vault status.
Bento — Asymmetric Grid
bento-asymmetric-grid
Asymmetric bento where one tall tile anchors the composition and three shorter tiles carry a headline metric, a budget breakdown, and a customer quote.
Bento — Mixed Metrics
bento-metrics-mixed
Five-tile bento mixing headline numbers, an inline sparkline, a short list, and a status tile, for the summary band beneath a hero.
Bill Of Lading Viewer
bill-of-lading-viewer
Maritime & Air Bill of Lading (BOL) shipping document viewer and customs compliance inspector with multi-party entity grid, transport routing, container & cargo manifest, freight terms, carrier stamp, and blockchain verification.
Billing Account
billing-account
Stripe-style account billing page: current-plan card with Pro badge, price and renewal date plus Upgrade / Cancel actions, usage meters for seats and projects, a payment-method row with update and delete actions, and a compact billing-history list with paid badges and per-invoice downloads. Data is hardcoded inline so you can wire it to your own billing API.
Billing Usage Center
billing-usage-center
Stacked billing center: a current-plan card with seat meter, monthly usage rows whose bars shift success → warning → destructive as they approach the limit (with overage notes), and an invoice history table with status pills, an unpaid-balance alert, and an empty state. Plan, usage, and invoices are all overridable.
Blog Post Card Grid
blog-post-card-grid
Modern editorial magazine 3-column article card grid with featured hero story, reading time pills, category filter badges, author avatars, and newsletter subscription box.
Board Resolution Signoff
board-resolution-signoff
Corporate board meeting minutes and unanimous written consent resolution with director voting tallies, legal recitals, and digital signature signoff execution.
Bookmark Manager Grid
bookmark-manager-grid
Raindrop style visual web bookmarks and engineering resources manager with collection folders, tag cloud filtering, real-time search, favorite toggles, copy link, and add bookmark modal.
Cap Table Ownership Summary
cap-table-ownership-summary
Carta-style company equity capitalization table, share class breakdown, fully diluted ownership percentages, shareholder vesting progress, and interactive round dilution modeling simulator.
Careers Job Board
careers-job-board
Careers page and job openings board with perks overview, live department & location filtering, keyword search, grouped department openings, and general application CTA.
Cart Drawer
cart-drawer
Shopping cart drawer & full cart page view featuring free shipping progress meter, interactive line items with quantity steppers and variant tags, promo code application, order summary with tax & shipping calculation, trust badges, and empty state.
Case Study
case-study
Customer-proof set pairing a featured split story with a sticky results panel, a filterable story index, three-up metric cards, a before-and-after metric comparison table, and a compact results strip.
Case Study — Featured Story
case-study-featured-story
Single featured customer story in a split layout: narrative column with challenge/approach/result copy and a pull quote, paired with a sticky results panel of four metrics plus company facts.
Case Studies — Filterable List
case-study-filterable-list
Filterable index of customer stories with industry chips above rows carrying the headline result, stack, and read time, plus an empty state.
Case Studies — Metric Cards
case-study-metric-cards
Three-up customer results grid where each card leads with the headline metric, then the customer logo wordmark, a one-line outcome, the pull quote with attribution, and a link to the full story.
Case Study — Metric Comparison
case-study-metric-comparison
Single customer result shown as a before-and-after table of four metrics, each row carrying the prior value, the current value, and the delta, under a short context line.
Case Studies — Results Strip
case-study-results-strip
Compact proof band pairing each customer wordmark with its single headline result, sized for the gap between a feature section and a pricing table.
Cash Flow Treasury Dashboard
cash-flow-treasury-dashboard
Fluxo and Mercury style corporate cash flow treasury dashboard with 30-day runway projection, liquidity buffer monitor, inflow/outflow breakdown, and connected bank accounts table.
Category Showcase
category-showcase
E-commerce category bento grid and featured collections showcase with interactive hover zoom effects, promo sale banner, and bento or uniform grid layouts.
Cdc Replication Stream
cdc-replication-stream
Debezium and Fivetran style Change Data Capture (CDC) replication monitor and binlog sync pipeline with live telemetry metrics, table operation breakdowns, and real-time before/after row diff streaming.
Certificate Credential Card
certificate-credential-card
Digital diploma and verified credential card featuring ornamental certificate container, cryptographic seal with QR code verification, recipient honors, validated skill pills, instructor signatures, and social sharing.
Changelog
Release-notes timeline in a SectionCard: Subscribe header action, version groups with a monospace tag, Latest badge and right-aligned date, and entries pairing a typed badge (New / Improved / Fixed / Breaking) with a title and optional description along a continuous border-l rail with dot markers. Pass `releases` to replace the stub; first entry is treated as latest unless a release sets `latest`.
Changelog Release Notes Timeline
changelog-release-notes-timeline
Developer changelog timeline with interactive version filters, categorical changes (features, improvements, fixes), and commit hash links.
Chat Thread
chat-thread
Single-pane conversation surface. Peer header (avatar + online dot + call/video/more), grouped messages with day separators (Today/Yesterday/date), own vs. peer bubbles, read/delivered/sent ticks, typing indicator, composer with attach/emoji and Enter-to-send. Stateful demo; swap the `messages` ref for your transport.
Chat Two Pane
chat-two-pane
Two-pane messaging surface. Left rail: searchable conversation list with avatars, online dots, pinned section, unread badges, mute icons, last-message preview, smart timestamps. Right pane: active thread with day separators, own/peer bubbles, read ticks, typing indicator, attach/emoji/send composer. Stateful demo — replace `conversations` and `messagesByConvo` with your data layer.
Checkout Flow
checkout-flow
Three-step checkout (cart → payment → confirm) with animated step transitions, an inline PaymentForm, a success screen that fires a confetti burst with an animated checkmark, and an error screen with retry. Async submit is forwarded to the consumer-provided `onSubmit`, which returns an `orderId` that ends up on the success screen.
Cloud Backup Schedule
cloud-backup-schedule
Automated cloud snapshot scheduler with storage quota metering, encryption status, and recent snapshot timeline.
Code — Diff Review
code-diff-review
Unified diff panel with added and removed lines, a file path header, a reviewer note anchored to a line, and a summary bar counting the changes.
Code — Install Command
code-install-command
Package-manager tab strip over a single install command with a copy button, a resolved-version line, and a short note on what the command writes to disk.
Code Snippet Playground
code-snippet-playground
Multi-file interactive code runner, editor tabs, and terminal console output for components with live render sandbox, syntax highlighting, and test execution.
Code — Multi-Language Tabs
code-tabs-multi-language
Code sample switcher with a language tab row, a copy control reporting its own success state, and a caption line naming the endpoint the sample calls.
Code — Terminal Session
code-terminal-session
Terminal transcript that types itself out line by line on mount, showing prompts, output, and a success summary, and rendering instantly under reduced-motion.
Cold Chain Temp Monitor
cold-chain-temp-monitor
Refrigerated pharmaceutical & perishable cargo IoT temperature logger and excursion monitoring with multi-reading time-series trend chart, upper/lower threshold guidelines, probe logging history table, and critical excursion alert protocol.
Column Profiling Summary
column-profiling-summary
Pandas Profiling and ydata style exploratory data analysis (EDA) column profiling summary with dataset metrics, distribution histograms, quantile box plots, and categorical frequency breakdowns.
Command Palette
command-palette
Header-grade search/command palette. Bundles the slim trigger button (with platform-aware ⌘K/Ctrl-K kbd hint) AND the modal CommandDialog into one block; consumers drop it once and the global keyboard shortcut wires itself. Takes a `groups` array of `{ heading, items: [{ label, hint, icon, onSelect }] }` and calls `onSelect`. `showTrigger={false}` hides the inline button so the consumer can control open state from elsewhere.
Commercial Invoice Generator
commercial-invoice-generator
B2B cross-border commercial invoice generator with HTS tariff codes, EORI tax identifiers, and CIF valuation totals.
Commute Reimbursement Claims
commute-reimbursement-claims
Monthly commuter transit pass, mileage, and EV charging expense claim reimbursement portal with IRS pre-tax allowance metrics, claim submission form with receipt dropzone, and claims history ledger.
Comparison — Migration Path
comparison-migration-path
Migration-focused comparison pairing what a team keeps, what changes, and what is retired when moving from an existing tool, with an effort estimate per row.
Comparison Table
comparison-table
Plan comparison feature matrix (Starter / Pro / Enterprise) with a sticky header row, monthly/yearly ToggleGroup that flips prices live, grouped feature rows (Core / Collaboration / Support), and check / minus / short-value cells. The Pro column is highlighted with a "Popular" badge and a bg-primary/5 tint down the whole column.
Comparison — Versus Alternatives
comparison-vs-alternatives
Two-column comparison setting this product against the status quo row by row, each line naming the mechanism rather than scoring the competitor.
Compensation Band Benchmarking
compensation-band-benchmarking
Pave/Levels.fyi style engineering salary and equity compensation band visualizer with P25, P50, P75, P90 percentile ranges, level progression matrix, compa-ratio diagnostics, and certified pay equity audit.
Compliance Sanctions Screener
compliance-sanctions-screener
AML/KYC OFAC, Politically Exposed Persons (PEP), and global sanctions list screening workbench with fuzzy match threshold tuning, real-time entity inspection modal, and prohibited match enforcement.
Compliance Soc2 Readiness
compliance-soc2-readiness
Vanta/Drata-style SOC 2 Type II, ISO 27001, and HIPAA compliance readiness dashboard with framework selector tabs, audit readiness scorecards, 4 control pillar health bars, continuous automated evidence test tables with verified artifact badges, and auditor trust center portal controls.
Sales Contact Form
contact-01
Interactive enterprise solutions architect dispatch workbench with track selection, live hub timezones, SLA badges, and ticket generator.
Contact Us
contact-us
Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email / phone / office) and a live Mapbox map pinned to your office (pass access-token + location; falls back to a placeholder without a token). Right: a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state. Emits "submit" with the payload.
Content Calendar Matrix
content-calendar-matrix
Editorial publishing calendar and content matrix with pacing KPI summary cards, channel filter tabs, month picker, publication status pipeline, author avatars, SEO keywords, and contextual action menus.
Contract Redline Diff
contract-redline-diff
Ironclad and DocuSign CLM style legal contract redline diff viewer with clause additions, deletions, liability super-cap shift analysis, and attorney comments negotiations sidebar.
Contractor Timesheet Approval
contractor-timesheet-approval
Deel/Remote style international contractor invoice approval, hourly timesheet verification against GitHub PRs & deliverables, multi-currency payout calculation, overview KPI metrics, and itemized daily timesheet slide-over drawer.
Conversion Funnel
conversion-funnel
Horizontal conversion funnel with count strip above the SmoothFunnel chart and a stage-name + retention-from-previous footer below. Works for hiring (applied → hired), e-commerce (sessions → purchases), onboarding (signed up → activated). 3-6 stages. Theme-aware via OKLCH chart tokens.
Cookie Consent
cookie-consent
Consent trio covering the whole banner-to-dialog flow: a full-width banner with inline preferences, a bottom bar with equally weighted accept, reject, and manage actions, and a granular preferences dialog with per-category purpose, retention, and switches.
Cookie Consent Banner
cookie-consent-banner
GDPR-style cookie consent banner with two variants: a full-width bottom bar and a compact card. Customize expands inline preferences with Necessary (always on), Analytics, and Marketing switches. Accept, Reject, and Save dismiss with a 150ms fade.
Cookie Consent — Bar
cookie-consent-bar
Bottom consent bar offering accept, reject, and manage as equally weighted actions, with a one-line statement of what is actually stored.
Cookie Consent — Preferences
cookie-consent-preferences
Granular consent dialog listing each cookie category with its purpose, retention, and a switch, with strictly-necessary shown as locked rather than hidden.
Cost Breakdown
cost-breakdown
Three-panel spend dashboard. Stacked weekly bar chart over time on top, plus two side-by-side categorical pies below (share by lane / share by carrier). Theme-aware via registry tokens.
Course Curriculum Outline
course-curriculum-outline
LMS and video course syllabus block: hero header with course metadata, instructor profile, rating, progress bar, and action buttons, collapsible modular section accordions with lesson durations, type badges, and completion checks, plus a sidebar with verifiable certificate preview, downloadable course resources, and student community access.
Crm Sales Call Workbench
crm-sales-call-workbench
Live CRM sales call console with audio waveform dialer, real-time AI live transcription, objection handling battlecards, and CRM note logger.
Cron Job Scheduler
cron-job-scheduler
Temporal and AWS EventBridge style scheduled tasks and background cron worker manager with KPI overview, status indicators, execution details, action menus, and an interactive cron expression builder with upcoming run previews.
Crypto Wallet Portfolio
crypto-wallet-portfolio
Coinbase and Phantom-style multi-asset crypto holdings dashboard: treasury header with address copy and network badge, portfolio balance hero with 24h PnL and multi-asset allocation bar, asset holdings table with real-time token metrics, and an interactive quick swap calculator.
Conversion CTA
cta-01
Interactive developer CTA section with live framework switcher, interactive CLI installation terminal, 1-click clipboard copy, and production guarantees.
CTA — Final Band
cta-final-band
Closing call to action centred on a bordered band, pairing the primary action with a secondary path and a line of proof for readers not ready to commit.
Cta Gradient Glow Action
cta-gradient-glow-action
Conversion call-to-action block with ambient atmospheric radial glow, multi-package manager terminal installation strip, and open source trust assurances.
Cta Split Demo Request Modal
cta-split-demo-request-modal
Split-pane enterprise demo request workbench with benefit highlights, team size selectors, framework focus filters, and interactive submission feedback.
CTA — Split Panel
cta-split-panel
Two-path closing section splitting self-serve from sales-assisted, each side stating who it suits and what happens next so the choice is not a guess.
Currency Converter Widget
currency-converter-widget
Wise and Revolut-style real-time multi-currency exchange calculator and transfer fee estimator with live mid-market rates, transparent fee breakdown rail, bank savings comparison, and quick-rate ticker.
Customer Journey Map
customer-journey-map
Visual customer lifecycle funnel and journey map tracking user touchpoints across Acquisition, Activation, Monetization, and Retention. Features conversion rates, friction analysis, sentiment gauges, growth experiment notes, and cross-stage velocity summaries.
Customer Metrics Band
customer-metrics-band
Customer velocity and ROI telemetry band with cohort segmentation (Enterprise vs High-Growth), 4 verified KPI metric tiles, and deep-dive impact inspector.
Customer Reviews
customer-reviews
Dedicated customer reviews section with ratings breakdown, interactive distribution bars, photo gallery with thumbnail overlay, filter chips, sort options, detailed verified buyer cards with attached photos, reactive helpful counter, and review submission form.
Customs Clearance Tracker
customs-clearance-tracker
International import/export customs declaration tracker featuring CBP Form 7501 reference, 5-stage clearance progression stepper, tariff and regulatory fee breakdown (MPF/HMF), and HTSUS declared commodity line items table.
Daily Standup Summary
daily-standup-summary
Slack and Geekbot style async engineering daily standup summary with squad pulse cards, critical blocker alert callout, structured yesterday/today/blockers submission entries, reaction counts, and thread actions.
Dashboard Kpis
dashboard-kpis
Four-tile KPI row. Each tile is an inline Card: label, big number, signed trend pill, and a sparkline. No items prop — edit the tiles in place after install.
Dashboard Layout
dashboard-layout
Full dashboard shell — collapsible sidebar + sticky topbar (sidebar trigger, breadcrumb, theme switch, notifications) + main content children. Drop it around a page: `<DashboardLayout>{page}</DashboardLayout>`.
Data Contract Governance
data-contract-governance
PayPal and OpenDataContract style Data Contracts specification editor, breaking change validator, and producer/consumer SLA agreements dashboard with YAML inspector, schema field explorer, live breaking change linter, and registered consumer status.
Data Mesh Domain Catalog
data-mesh-domain-catalog
Zhamak Dehghani Data Mesh architecture domain catalog, Data Products directory, polyglot output ports (Snowflake, Kafka, GraphQL, S3), and federated computational governance SLA scorecards.
Data Product Card
data-product-card
Data Mesh architectural Data Product Card (DPC) featuring SLA compliance health, multi-modal output ports (Snowflake, Kafka, GraphQL, Parquet S3), domain ownership, consumer counts, and access request triggers.
Data Quality Metrics
data-quality-metrics
Great Expectations and Soda style automated data quality assertions, schema validation, and drift detector dashboard: top header with overall quality score and run triggers, 4 assertion metric cards, data quality assertions table with category filters, and an interactive anomaly inspector drawer with SQL quarantine remediation.
Data Retention Policy Manager
data-retention-policy-manager
Snowflake and BigQuery style automated data retention policy manager, partition TTL scheduler, and cold storage archive tiering with cost impact metrics, lifecycle action execution, and compliance tracking.
Database Migration Schema Diff
database-migration-schema-diff
Prisma, Flyway, and Liquibase database migration runner with pending DDL visual diffs, rollback scripts, schema integrity telemetry, and execution history.
Dbt Model Graph
dbt-model-graph
dbt Cloud style data modeling DAG dependency graph, compiled SQL view, and model documentation with lineage tree, Jinja/SQL source editor, compiled warehouse query, and column contract test suite.
Decision Matrix Table
decision-matrix-table
Product and architectural decision matrix with dynamic weighted scoring algorithms (Impact, Confidence, Effort, Risk), RICE framework toggle, interactive weight sliders, option creator, multi-dimensional SVG tradeoff radar, and ADR consensus breakdown.
Defi Staking Yield Vault
defi-staking-yield-vault
Nodeka and Uniswap-inspired decentralized finance staking yield vault, liquidity pool APY calculator, and reward claimer with live TVL metrics, multi-tier lockup multipliers, and real-time yield simulator.
Delivery Proof Card
delivery-proof-card
Last-mile Electronic Proof of Delivery (ePOD) receipt featuring customer signature canvas readout, high-contrast drop-off photo with GPS geostamp HUD overlay, recipient & courier metadata, and itemized package manifest.
Delivery Tracking Map
delivery-tracking-map
Live order delivery route showing courier location, dropoff destination, and real-time ETA countdown.
Demo — Guided Tour
demo-guided-tour
Step-through product tour where next and previous move a highlight across a mocked interface, with a step counter and a skip control.
Demo — Sandbox Panel
demo-sandbox-panel
Interactive sandbox panel where editing a definition field updates a rendered result and a generated query side by side, with a reset control.
Deployment Pipeline
deployment-pipeline
CI/CD deployment history, active environment status, execution stepper, collapsible build log terminal with stdout timestamps, and filterable deployments table.
Disaster Response Map
disaster-response-map
Incident management map with wildfire hazard perimeter, shelter capacities, and emergency staging points.
Dispatch Assignment Board
dispatch-assignment-board
Last-mile route dispatching, delivery driver stop sequencing, and vehicle payload load balancing: live dispatch overview KPIs, zone filtering, AI route auto-sequencing, and driver route cards with vehicle payload load balancing, live progress tracking, interactive stops timeline, driver communications, and telemetry actions.
Dns Record Manager
dns-record-manager
Cloudflare/Vercel style DNS records management table and nameserver inspector with type badges, proxy toggle, copyable values, zone file exporter, and add/edit record panel.
Doctor Appointment Scheduler
doctor-appointment-scheduler
Zocdoc and Epic style specialist doctor appointment booking scheduler: physician profile hero card with rating, clinic address, and insurance badges, interactive visit type selector, reason for visit dropdown, date carousel with daily availability indicators, morning and afternoon time slot picker, live appointment summary readout with copay estimate, patient registration inputs, and booking confirmation flow.
Driver Inspection Checklist
driver-inspection-checklist
Commercial vehicle Driver Vehicle Inspection Report (DVIR) pre-trip and post-trip safety audit. Features vehicle odometer & ELD telemetry header, 5 grouped FMCSA safety inspection categories (Brakes & Air Pressure, Tires & Wheels, Lights & Electrical, Engine & Fluids, Emergency Safety Gear) with Pass/Fail/N/A segmented controls, dynamic defect report card with Out-of-Service severity classification, defect notes, photo dropzone, driver CDL certification signature pad, and post-submission compliance receipt.
Email Campaign Composer
email-campaign-composer
High-craft marketing email broadcast designer, audience segment selector, AI subject line optimizer, A/B testing split, live multi-device newsletter preview, and deliverability scorecard.
Email Template Previewer
email-template-previewer
Resend and Klaviyo style marketing email designer preview with viewport switcher, subject line tester, deliverability & spam score analyzer, and live test dispatch modal.
Employee Org Chart Tree
employee-org-chart-tree
Interactive organizational hierarchy tree with manager reporting lines, team counts, multi-level expandable branches, department filter pills, employee search, and an employee profile quick info drawer.
Employee Pulse Survey Results
employee-pulse-survey-results
Culture Amp style company pulse and eNPS engagement survey results dashboard featuring executive KPI scorecards, department sentiment heatmaps, and priority engagement drivers with action items.
Empty States
empty-states
Gallery of six zero-data cards — no data, no search results, first-use, error recovery, no access, and sync complete — each with a matching isometric illustration, title, copy, and action pair. `variant` picks a single card, `size` compacts it, `layout` switches grid vs list. Override title, description, image, labels, hrefs, and callbacks. Pass `image=""` to hide the art.
Enterprise Workspace Switcher
enterprise-workspace-switcher
Multi-organization workspace switcher dropdown and creation modal inspired by Portico/Riter. Features active organization display with emerald ring, 3 tier levels (Enterprise Scale, Pro Team, Free Sandbox), team role badges, member counts, and an organization creation dialog with dynamic slug preview, region selector, and tier plan radios.
Environment Variables Manager
environment-variables-manager
Vercel and Supabase style environment variables and secrets manager with environment scoping, mask/reveal toggles, bulk import, and inline editing.
404 Not Found
error-404
Full-page 404 with an isometric missing-page illustration, HTTP code, headline, and Back to home + Contact support. Prop-driven: pass title, description, image, action labels, hrefs, and layout (`page` | `contained`). Pass `image=""` to hide the art.
500 Server Error
error-500
Full-page 500 with an isometric crashed-server illustration, HTTP code, headline, and Try again + Back to home + Contact support. Prop-driven: pass title, description, image, action labels, hrefs, and layout (`page` | `contained`). Pass `image=""` to hide the art.
Error Page
error-page
Status-screen set with prop-driven 404 and 500 pages plus a four-variant gallery (404, 500, 403, and maintenance) with single-screen, compact-size, and callback controls.
Error Pages
error-pages
Pack of four status screens — 404, 500, 403, and 503 — each with a matching isometric illustration, code, copy, and actions. `variant` picks a single screen, `size` compacts it. Override title, description, image, code, tag, labels, hrefs, disabled flags, and callbacks. Pass `image=""` to hide the art.
Event Calendar Dashboard
event-calendar-dashboard
Month-view event calendar with stats strip, drag/shift range select, side rail (selected day or range summary), upcoming list, and per-cell/per-event context menus. events / onEventsChange binds the source of truth; eventTypes config maps each type key to its label/icon/color theme so swapping the visual palette is one prop. Built on the use-month-grid headless hook.
Event List
event-list
List of upcoming events in a SectionCard. Spell rows out inline with DataListItem — title + Clock date + optional status Badge per row.
Exit Intent
exit-intent
Exit-intent dialog trio that fires once per session when the pointer leaves toward the browser chrome: an extended-trial offer, a monthly-notes newsletter capture, and a one-question exit survey.
Exit Intent — Newsletter
exit-intent-newsletter
Exit-intent dialog capturing an email for the monthly notes rather than pushing a discount, with the last issue named so the ask is concrete.
Exit Intent — Offer
exit-intent-offer
Dialog triggered when the pointer leaves toward the browser chrome, offering an extended trial once per session, with a dismissal that is remembered.
Exit Intent — Survey
exit-intent-survey
One-question exit survey asking what the visitor did not find, with preset answers, an optional free-text field, and a thank-you state that closes itself.
Exit Interview Survey
exit-interview-survey
Structured employee offboarding survey with department sentiment analysis, departure drivers, 5-star experience ratings, qualitative feedback textareas, and a knowledge handover & asset return checklist.
Accordion FAQ
faq-01
Interactive architecture knowledge base and FAQ section with real-time keyword search, category topic filtering, and helpfulness voting.
FAQ — Categorized Tabs
faq-categorized-tabs
Question set grouped behind category tabs, each panel holding its own accordion with a count badge, for support pages where one flat list would run past thirty entries.
FAQ — With Contact Sidebar
faq-contact-sidebar
Accordion of answers beside a sticky support card offering a named contact, response-time expectation, and a link to the docs, for the questions a page cannot pre-empt.
Faq Searchable Accordion Workbench
faq-searchable-accordion-workbench
Searchable FAQ workbench with real-time query filtering, category switcher, collapsible accordions, and community support links.
FAQ — Two Column
faq-two-column
Frequently asked questions split across two columns of independent accordions, so a long answer in one column never pushes the questions beside it out of alignment.
Features — Accordion with Media
feature-accordion-media
Single-open accordion of features beside a media pane that follows the open item, collapsing to inline panes on narrow screens where a side pane would be unreadable.
Feature Deep-Dive — Alternating Rows
feature-alternating-rows
Classic zig-zag feature deep-dive: three full-width rows alternating copy and visual, each with an eyebrow, headline, checklist, inline link, and a bordered preview panel built from real primitives.
Feature Bento Ai Copilot
feature-bento-ai-copilot
AI agent copilot bento workbench with model tuning sliders, live inference streaming, and token speed telemetry.
Feature Code Preview Split
feature-code-preview-split
Split-pane developer workbench featuring live code generation across Vue 3.5, React 19, and Tailwind v4 tokens synchronized with an interactive component canvas.
Feature Comparison Slider
feature-comparison-slider
Interactive architecture comparison slider workbench contrasting Monolithic npm packages against UIPKGE unbundled code ownership.
Feature Drag Drop Organizer
feature-drag-drop-organizer
Interactive dashboard block layout organizer with position reordering, visibility toggling, and JSON schema export.
Feature Flags Manager
feature-flags-manager
LaunchDarkly and PostHog style feature flags management dashboard: top header with search and create flag button, summary KPI metric cards, master status switch, percentage rollout indicators, targeting rules summary, environment statuses, and action menus.
Features — Full-Bleed Rows
feature-full-bleed-rows
Alternating full-bleed feature bands on contrasting surfaces, each pairing a headline and supporting detail with an edge-to-edge visual that runs past the container.
Feature Hover Tilt Cards
feature-hover-tilt-cards
3D perspective tilt workbench cards with dynamic mouse tracking, interactive token efficiency sliders, spring impulse testing, and dual-framework parity inspect.
Feature Interactive Api Curl Builder
feature-interactive-api-curl-builder
Interactive API cURL builder and live payload testing sandbox with multi-language code export.
Feature Interactive Tabs
feature-interactive-tabs
Master-detail architectural feature workbench with interactive source snippets, copy action, telemetry stats, and verified technical checks.
Feature Matrix Table Dense
feature-matrix-table-dense
Dense Linear-style technical specification matrix table with collapsible sections and search filtering.
Feature Metric Growth Stepper
feature-metric-growth-stepper
Interactive scale progression workbench showing infrastructure capacity from Seed to Global Enterprise.
Feature Scroll Spy Walkthrough
feature-scroll-spy-walkthrough
Step-by-step 4-phase developer workflow progression with sticky live code terminal sandbox and instant stage inspector.
Features — Segmented Compare
feature-segmented-compare
Segmented control switching one feature section between two operating modes, with the capability list, constraints, and a recommendation line changing per mode.
Features — Sticky Media Scroll
feature-sticky-media-scroll
Deep-dive where the visual pins while the copy scrolls beside it, the pinned pane swapping content as each section enters view, degrading to stacked pairs without observers.
Feature Store Registry
feature-store-registry
Feast and Tecton style machine learning feature store registry with entity definitions, low-latency Redis online cache status, Snowflake batch source lineage, feature schema inspection table, throughput metrics, and Python Feast feature view code generator.
Features — Tabbed Deep-Dive
feature-tabbed-deepdive
One feature examined from three angles behind tabs, each panel carrying its own explanation, a constraint the reader should know, and a matching detail panel.
Features — Vertical Tabs
feature-vertical-tabs-pane
Vertical feature tabs where each trigger carries a title and one-line summary, swapping a wide preview pane built from primitives without changing the panel height.
Feature Visual Changelog Diff
feature-visual-changelog-diff
Visual semantic git changelog with unified code diff highlighting and commit verification.
Tabbed Feature Matrix
features-01
Interactive enterprise product feature workbench with live module simulations, dynamic directory filters, real-time payroll calculations, continuous SOC 2 compliance verification, and TypeScript API code viewer.
Features — 2×2 Spotlight
features-2x2-spotlight
Four large feature panels in a two-by-two grid, each with a generous illustration slot built from primitives, a headline, supporting copy, and a quiet inline link.
Features — Checklist Split
features-checklist-split
Two-column feature section pairing a sticky pitch column with a dense two-up checklist of capabilities, each line carrying a short qualifier rather than a marketing adjective.
Features — Dense Icon List
features-icon-list-dense
Compact three-column list of twelve capabilities with small icons and one-line descriptions, for the lower half of a landing page where breadth matters more than depth.
Features — Numbered Grid
features-numbered-grid
Six-cell feature grid drawn with one-pixel dividers instead of cards, each cell led by a monospace ordinal, an icon, a title, and two lines of supporting copy.
Field Inspection Manager
field-inspection-manager
Mobile/Desktop commercial property & equipment site inspection audit manager featuring GPS geostamp telemetry, 4 KPI metric cards, searchable audits table with pass/fail checklist scores, photo evidence thumbnail gallery with interactive lightbox modal, cryptographic sign-off badges, and work order dispatch workflows.
File Manager
file-manager
Storage/files page with breadcrumbs, search, grid/list view toggle, upload action, and a storage meter over hardcoded folders and files.
Fine Tuning Job Monitor
fine-tuning-job-monitor
LLM fine-tuning job telemetry, loss curve convergence tracking, GPU cluster utilization, hyperparameter manifests, and LoRA checkpoint exporter.
Flash Sale Offer Bar
flash-sale-offer-bar
Limited-time flash sale countdown deal bar with stock claim progress meter, tiered multi-buy volume discounts, and 1-click cart activation.
Flashcard Study Deck
flashcard-study-deck
Anki and Quizlet style spaced-repetition flashcard study deck with smooth 3D flip card interaction, WCAG 2.2 accessibility curriculum, hint drawer, mastery percentage tracking, keyboard shortcuts, and SM-2 interval rating buttons.
Fleet Vehicle Map
fleet-vehicle-map
Live fleet map with vehicle markers. Select a unit to fly the camera and read status.
Flight Radar Map
flight-radar-map
Real-time commercial and cargo aviation radar with aircraft altitudes, ground speeds, callsigns, and flight telemetry.
Floor Plan Explorer
floor-plan-explorer
Architectural unit floor plan inspector and residential layout explorer with 2D CAD-styled blueprint canvas, interactive room highlight pins, dimensional callouts, room breakdown specs, and building unit availability table.
Footer
Site footer collection: multi-column newsletter, oversized brand statement, dense developer grid, mega newsletter, single-row minimal, and dense sitemap variants — each spelled out inline so copy lives in one place.
Multi-Column Footer
footer-01
Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.
Footer — Brand Statement
footer-brand-statement
Footer led by an oversized brand statement and mission line, with three link columns set beneath it and a legal row carrying certifications and a contact address.
Footer Developer Dense Grid
footer-developer-dense-grid
Dense developer footer with multi-column categorized links, live operational status beacon, and social triggers.
Footer — Mega with Newsletter
footer-mega-newsletter
Large footer pairing a newsletter signup and status line with five link columns, a social row, and a legal bar carrying the copyright and a compliance badge.
Footer — Minimal Row
footer-minimal-row
Single-row footer carrying the wordmark, a short inline link list, social icons, and the copyright line, for pages that should end quietly.
Footer — Dense Sitemap
footer-sitemap-dense
Sitemap-style footer with six tightly-set link columns, a region and currency selector row, compliance marks, and a status indicator reporting live uptime.
Form Layouts
form-layouts
Structured create/edit entity form ("New project"): stacked SectionCards for project details (name with live slug preview, description with char counter), configuration (visibility Select, start date, budget), and access (link vs restricted RadioGroup, notification/comment Switch rows) with a sticky-feel footer bar. Create stays disabled until the name is filled; validation hints appear under empty required fields after the first submit attempt.
Freelance Work For Hire Contract
freelance-work-for-hire-contract
Independent contractor Master Services Agreement (MSA) with work-for-hire IP assignment, payment milestones, kill fee clauses, and electronic signature workflow.
Freight Quote Calculator
freight-quote-calculator
Multimodal Air, Ocean, and Ground freight rate estimator with CBM volumetric weight calculation, dynamic route pricing, value-added services, and live comparison quotes.
Frequently Bought Together
frequently-bought-together
E-commerce frequently bought together bundle builder with interactive product preview cards, checkbox selection, dynamic bundle discount calculation, and one-click cart checkout.
Gift Card Balance Checker
gift-card-balance-checker
Customer storefront gift card balance lookup, live digital card passbook, quick fund reloading, and complete redemption audit history ledger.
Github Oss Traction Band
github-oss-traction-band
Open source community traction and velocity band with real-time star metrics, recent releases changelog feed, and quickstart CLI install terminal.
Global Edge Network
global-edge-network
Cloudflare Radar and Vercel Edge style infrastructure console with real-time anycast telemetry, interactive DottedMapChart with Bezier flow corridors, P95 latency HUD metrics, and live edge node routing table.
Graphql Query Explorer
graphql-query-explorer
Apollo and GraphiQL style GraphQL query builder and response inspector with schema documentation sidebar, syntax-highlighted query & variables editor, query history presets, execution tracing, and formatted JSON response viewer.
Guardrails Safety Scanner
guardrails-safety-scanner
NVIDIA NeMo Guardrails and LlamaGuard style input/output safety scanner with real-time prompt injection detection, PII redactor, telemetry metrics, and configurable safety policy enforcement table.
Habit Streak Tracker
habit-streak-tracker
GitHub style 52-week contribution habit heatmap, flame streak counter, consistency metrics, and daily completion tracker with 7-day mini checkbox strip and progress bars.
Header
Site header collection: sticky top bar, dismissible announcement stack, centered-logo split, floating pill, full-width mega menu, inline search with command palette, and a transparent-over-hero scroll variant — each with a mobile sheet fallback.
Sticky Top Navbar
header-01
Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, "Sign in" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.
Header — Announcement Stack
header-announcement-stack
Two-tier site header: a dismissible announcement strip above a sticky navbar, where dismissing the strip collapses it and leaves the navbar flush against the viewport top.
Header — Centered Logo
header-centered-logo
Symmetrical navbar with the wordmark centred between two nav halves, a utility cluster on the right, and a mobile layout that collapses the split into a single sheet trigger.
Header — Floating Pill
header-floating-pill
Detached pill navbar that floats above the page with a blurred surface, a sliding active indicator that tracks the current link, and a compact CTA on the right.
Header — Mega Menu
header-mega-menu
Navbar whose product and resources items open a full-width mega panel of grouped, described links plus a highlighted feature card, keyboard navigable and closing on Escape.
Header — Inline Search
header-search-command
Navbar with an inline search trigger that opens a command palette on click or ⌘K, listing grouped results with keyboard hints alongside the usual nav links and CTA.
Header — Transparent Over Hero
header-transparent-scroll
Marketing navbar that starts transparent over the hero and fades in a bordered, blurred surface once the page scrolls, with a nav row, theme-neutral CTA pair, and a mobile sheet.
Hero
Hero section collection with eleven interchangeable variants: metric showcase, 3D tilt canvas, ASCII terminal stream, bento preview grid, developer terminal, interactive globe nodes, SaaS metrics dashboard, split device mockup, typing command center, video walkthrough modal, and glowing waitlist.
Metric Showcase Hero
hero-01
Two-column hero with badge eyebrow, large headline, supporting copy, primary + outline CTAs, social proof row, and a collage of three rotated KPI cards (active users / uptime / onboarding queue) on the right.
Hero 3d Tilt Interactive Canvas
hero-3d-tilt-interactive-canvas
Hero section with hardware-accelerated 3D tilt perspective card, specular light glare, and multi-layer z-depth primitives.
Hero Ascii Terminal Stream
hero-ascii-terminal-stream
Retro-futuristic ASCII terminal stream hero section with command runner and AST telemetry logs.
Hero Bento Preview Grid
hero-bento-preview-grid
Asymmetric 3-column bento hero section with interactive OKLCH palette customizer, dual-framework parity toggle, bundle bloat calculator, and edge latency telemetry.
Hero Developer Terminal
hero-developer-terminal
Developer-first hero section with split value proposition and an interactive live CLI terminal sandbox with preset command switching and copy controls.
Hero Globe Interactive Nodes
hero-globe-interactive-nodes
Global edge latency simulation hero with interactive PoP node inspection and real-time telemetry.
Hero Saas Metrics Dashboard
hero-saas-metrics-dashboard
High-impact SaaS hero section with interactive timeframe filtering, live revenue and workload KPIs, and dynamic telemetry area chart.
Hero Split Device Mockup
hero-split-device-mockup
Dual viewport device mockup hero with interactive viewport controls and real-time state synchronization.
Hero Typing Command Center
hero-typing-command-center
Interactive CLI command center hero with animated execution simulator, output logs, and quick workflow presets.
Hero Video Modal Walkthrough
hero-video-modal-walkthrough
Product walkthrough hero section with interactive video modal player, chapter timestamps navigation, playback speed controls, and social proof.
Hero Waitlist Glow
hero-waitlist-glow
High-conversion early access waitlist hero with role tracks, dynamic live queue spot generator, launch countdown clock, and referral booster.
Hotel Booking Reservation
hotel-booking-reservation
Luxury hotel room booking and reservation widget with interactive date range picker, guest & room steppers, room upgrade checkboxes, live reactive pricing breakdown, and instant reservation checkout.
How It Works — Arrow Flow
how-it-works-arrow-flow
Four-stage horizontal flow joined by drawn SVG arrows, each stage carrying an icon tile, a short label, and the artefact it produces, wrapping to a vertical rail on narrow screens.
How It Works — Before & After
how-it-works-before-after
Two-column process contrast setting the old workflow against the new one step for step, with matched row heights so the saving at each stage reads at a glance.
How It Works — Scroll Stepper
how-it-works-scroll-stepper
Scroll-driven walkthrough where a sticky progress rail tracks which step is in view while the step copy scrolls past, falling back to a plain list without IntersectionObserver.
How It Works — Three Steps
how-it-works-steps
Horizontal three-step explainer with numbered markers on a connector rail, per-step icon, body copy, and a time estimate, closing on a primary + ghost CTA row.
How It Works — Tabbed Steps
how-it-works-tabbed-steps
Step explainer where a vertical tab list of stages swaps a paired detail panel showing the action, the expected result, and a primitive-built screen for that step.
How It Works — Vertical Timeline
how-it-works-timeline
Vertical numbered timeline with a continuous rail, per-stage status badge, outcome bullets, and a paired detail card — for onboarding or implementation narratives that need more room than a three-up row.
Hub Locator Map
hub-locator-map
Global hub locator. Pins on a Mapbox map with a short location list and fly-to on select.
Immunization History
immunization-history
Digital vaccine record passport and clinical immunization history: SMART Health Card verifiable credential with cryptographic signature, active protection summary chips, detailed CDC/WHO vaccine administration table with CVX codes and lot tracking, and travel health advisory alerts.
Import Wizard
import-wizard
CSV import flow in a SectionCard: four-step state machine (Upload → Map fields → Preview → Result) with an interactive Stepper, auto-mapped column targets carrying confidence badges, required-field validation that gates the footer action, flagged-cell highlighting in the preview table, and a success/partial result screen. Data is stubbed post-parse — wire the file reader of your choice.
Inbox
Three-pane mail surface. Left rail: Compose button, folders (Inbox/Starred/Sent/Drafts/Spam/Trash) with unread counts, colour-coded labels with totals. Middle: searchable message list with sender, subject, preview, labels, attachment glyphs, star toggle, smart timestamps. Right: reader pane with subject, from/to, body, attachment chip, reply/forward/archive actions. Stateful demo — swap `mails` for your data source.
Influencer Campaign Card
influencer-campaign-card
Creator partnership management card with verified creator hero profile, multi-channel reach demographics, 4-column campaign telemetry HUD, contract deliverables checklist with live asset telemetry, and affiliate promo code ROI tracker.
Insurance Eligibility Checker
insurance-eligibility-checker
Real-time health insurance eligibility and benefits verification dashboard: patient member demographics, active payer status, individual deductible and out-of-pocket maximum progress trackers, primary care and specialist copay benefit cards, category-level coverage breakdown table with in/out-of-network rates, and Medicare secondary coordination of benefits.
Integrations — Connector Status
integrations-connector-status
Connector health table listing each integration with its auth method, sync cadence, last successful run, and a status pill, plus a summary band counting healthy and degraded connectors.
Integrations Directory
integrations-directory
App marketplace surface: functional search, category chips with counts and an installed-only switch above a responsive grid of integration cards (logo tile, one-line blurb, author row, install/connected footer). Clicking a card opens a detail dialog with permissions; pass `featuredId` to render that dialog body as an always-visible panel. Stateful demo — swap the stub catalog for your source.
Integrations — Featured Pairs
integrations-featured-pairs
Three promoted integrations, each a card pairing the service with what the connection actually does, the three setup steps it takes, and its live connection state.
Integrations — Hub Diagram
integrations-hub-diagram
Radial integration diagram: a central platform node connected by drawn SVG spokes to eight orbiting service nodes, with a legend splitting sources from destinations.
Integrations — Logo Grid
integrations-logo-grid
Integration marquee grid: category chips filter a wall of square logo tiles with hover labels, over a count line and a request-an-integration prompt.
Integrations — Search Directory
integrations-search-directory
Searchable integration directory: a live filter field above category-grouped rows carrying a monogram, blurb, and auth type, with an empty state when nothing matches.
Inventory Reorder Forecast
inventory-reorder-forecast
Supply chain inventory replenishment planner with lead-time demand forecasting, 4 forecasting KPI metric cards, safety stock triggers, multi-SKU demand table, and automated purchase order generation.
Invite Members
invite-members
Team invite surface in a SectionCard. Header carries a live seats counter tinting warning at ≥90% capacity. Compose takes one email or a comma/space-separated paste — several addresses queue as removable chips first, plus an Admin/Editor/Viewer role Select and basic validation with a destructive error state. Rows show avatar initials, email, role/status badges (pending/accepted/expired), sent-ago timestamps, Resend (re-activates expired invites) and Revoke behind a two-click inline confirm. Self-contained stateful demo — swap DEFAULT_INVITES for your data source.
Invoice Creator Wizard
invoice-creator-wizard
Square/Stripe-style interactive invoice builder with itemized tax, discount calculation, dynamic line items, client presets, and a real-time paper document preview.
Invoices List
invoices-list
Invoice history page: header with a New invoice action, a three-card summary strip (total outstanding, paid this month, overdue), and an invoice table pairing monospace invoice numbers with avatar clients, issue/due dates, tabular-nums amounts, color-coded status badges, and a per-row View/Download/Mark-as-paid dropdown, closed by a pagination hint. Data is stubbed inline; swap for your source.
Isochrone Reachability Map
isochrone-reachability-map
Drive-time reachability zones showing 10m, 20m, and 30m commute polygons with workforce population metrics.
Kafka Stream Monitor
kafka-stream-monitor
Apache Kafka & Redpanda topic stream telemetry dashboard: partition offset monitor, leader broker distribution, consumer group lag tracker, and real-time message payload inspector with deserialized JSON viewer.
Knowledge Base Hub
knowledge-base-hub
Self-serve help center and customer documentation hub with hero search, quick topic pills, category cards grid, trending articles, and community support banner.
Lab Results Viewer
lab-results-viewer
Quest and Labcorp style diagnostic lab results report viewer: patient metadata header, clinical attention banner, grouped test panels (Lipid, Glucose, Renal) with LOINC codes, reference range linear scale bars, historical 6-month trend deltas, and doctor clinical impression card with electronic verification.
Last Mile Courier Dispatch
last-mile-courier-dispatch
Last-mile courier dispatch matrix with real-time route progress, ETA telemetry, and Proof of Delivery (POD) logging.
Lead Capture Popup
lead-capture-popup
High-conversion exit-intent discount popup and newsletter lead generator with live ticking countdown timer, emerald value props, star rating social proof, and coupon code reveal.
Leaflet Asset Tracking Map
leaflet-asset-tracking-map
Intermodal cargo container tracking on free Esri satellite tiles — no API key — with shipping lanes, cold-chain sensor status, and geofence state.
Leaflet Delivery Tracking Map
leaflet-delivery-tracking-map
Live order delivery route on free OpenStreetMap tiles — no API key. Courier position, dropoff destination, and ETA telemetry.
Leaflet Disaster Response Map
leaflet-disaster-response-map
Incident management map on free OpenStreetMap/Esri tiles — no API key. Evacuation perimeter rings, shelter capacities, and emergency staging points.
Leaflet Fleet Vehicle Map
leaflet-fleet-vehicle-map
Live fleet map on free OpenStreetMap/Esri tiles — no API key. Select a unit to fly the camera and read status.
Leaflet Flight Radar Map
leaflet-flight-radar-map
Real-time commercial and cargo aviation radar on free OpenStreetMap/Esri tiles — no API key — with curved flight paths, callsigns, and flight telemetry.
Leaflet Hub Locator Map
leaflet-hub-locator-map
Distribution hub locator on free OpenStreetMap tiles — no API key. Coverage rings, capacity badges, and fly-to on select.
Leaflet Isochrone Reachability Map
leaflet-isochrone-reachability-map
Drive-time reachability zones showing 10m, 20m, and 30m commute polygons with workforce population metrics — on free OpenStreetMap/Esri tiles, no API key.
Leaflet Last Mile Courier Dispatch
leaflet-last-mile-courier-dispatch
Last-mile courier dispatch matrix on free OpenStreetMap tiles — no API key. Route progress, ETA telemetry, and Proof of Delivery (POD) logging.
Leaflet Maritime Vessel Map
leaflet-maritime-vessel-map
Automatic Identification System (AIS) vessel tracking on free OpenStreetMap/Esri tiles — no API key. Container ships, tankers, shipping lanes, and anchorage status.
Leaflet Neighborhood Walkscore Card
leaflet-neighborhood-walkscore-card
Real estate neighborhood intelligence widget on free OpenStreetMap/Esri tiles — no API key. Walk Score, Transit Score, Bike Score, categorized points of interest (transit, dining, schools, parks), a 15-minute walk radius, and commute time estimator.
Leaflet Property Boundary Map
leaflet-property-boundary-map
Cadastral parcel boundary polygons with zoning classes, lot acreage, and assessed valuation on free Esri satellite tiles — no API key.
Leaflet Sales Territory Map
leaflet-sales-territory-map
Sales territory map on free OpenStreetMap/Esri tiles — no API key. Region boundary polygons and rep pins with quota attainment; select a territory to fly the camera.
Leaflet Store Locator Map
leaflet-store-locator-map
Store locator on free OpenStreetMap tiles — no API key. Pins with bound popups, distance/hours/amenities list, fly-to on select.
Leaflet Threat Map Radar
leaflet-threat-map-radar
Live threat radar on free OpenStreetMap/Esri dark tiles — no API key. Attack arcs hit edge PoPs under a rotating sweep; click an origin to isolate its vector.
Lease Agreement Sign
lease-agreement-sign
DocuSign-style digital residential lease agreement signature and review workflow with terms summary, interactive initial checkpoints, sticky signature action sidebar, and cryptographic audit execution.
Lesson Video Player
lesson-video-player
Online lecture video player with playback speed selector, interactive timestamped transcript, and note-taking drawer.
Llm Eval Benchmark Matrix
llm-eval-benchmark-matrix
LangSmith/Braintrust/DeepEval style LLM evaluation scorecard, automated golden dataset assertions, and model benchmark matrix with faithfulness, answer relevancy, context recall metrics, and evaluator judge reasoning inspection.
Loan Calculator
loan-calculator
Interactive mortgage and commercial loan amortization schedule calculator with dynamic sliders, loan type presets, extra payment impact simulation, principal vs interest visual ratio bar, and year-by-year amortization breakdown table.
Logo Cloud Categorized Grid
logo-cloud-categorized-grid
Categorized 4-industry logo & enterprise customer workbench with scale metrics, category filter tabs, and full testimonial modal inspect.
Logo Cloud — Grayscale Hover
logo-cloud-grayscale
Customer logo wall rendered in muted monochrome that resolves to full contrast on hover, with a headline count and a segment line beneath.
Logo Ticker Infinite
logo-ticker-infinite
Infinite marquee brand partner ticker with sector category filters, speed and pause controls, and interactive telemetry hover cards.
Logo Clouds
logos
Logo-cloud section set: a static trusted-by grid, single- and tri-row infinite marquees, a categorized filter grid with testimonial modal, a grayscale-hover wall, and a ticker with sector filters and telemetry hover cards.
Static Logo Grid
logos-01
Customer-logo cloud strip. "Trusted by teams at" eyebrow over a responsive grid of six grayscale wordmarks (2 / 3 / 6 columns by breakpoint). Each logo is an inline SVG sitting on currentColor so the muted-foreground → foreground hover swap works. Ships with placeholder marks — swap the SVGs with real customer logos before shipping.
Single Marquee Logos
logos-02
Single-row infinite marquee of customer logos. Track is duplicated and translated -50% on a 30s linear loop for a seamless seam; edges fade out via CSS mask-image; pauses on hover; respects prefers-reduced-motion.
Tri-Row Marquee Logos
logos-03
Three-row logo marquee with alternating scroll directions and slightly different speeds (32s left, 26s right, 38s left) so the eye does not lock onto a single rhythm. Edges fade out via CSS mask-image; the whole section pauses on hover; respects prefers-reduced-motion.
Loyalty Rewards Tier Hub
loyalty-rewards-tier-hub
Sephora and Starbucks style VIP customer loyalty tier dashboard, points wallet, and rewards catalog. Features a customer hero card with points balance, reward valuation, and tier progress tracker, 4 VIP privilege perks with unlock statuses, a 3-item redeemable rewards catalog grid, and a recent points earnings & redemption history ledger.
Maintenance Request Ticket
maintenance-request-ticket
Resident repair and facility work order submission portal with urgency priority and photo dropzone.
Maritime Vessel Map
maritime-vessel-map
Automatic Identification System (AIS) vessel tracking with container ships, tankers, speed, and anchorage status.
Matrix Swot Analysis
matrix-swot-analysis
Strategic planning 2x2 SWOT analysis matrix (Strengths, Weaknesses, Opportunities, Threats) with dynamic card management, quadrant counters, TOWS strategic initiatives, and PDF/share toolbar.
Media Asset Gallery
media-asset-gallery
Figma/Unsplash style Digital Asset Manager (DAM) with resolution tags, aspect ratio filters, tag chips, color palette inspector, multi-resolution download picker, and slide-over inspector drawer.
Meeting Agenda Notes
meeting-agenda-notes
Linear and Notion style structured meeting document with attendee avatars, timeboxed agenda topics, rich discussion notes, interactive action items checklist, and key decisions log.
Metrics Grid
metrics-grid
Six-tile KPI status grid. Each tile pairs a stat header (count / percentage) with a small pie or horizontal bar chart that breaks the metric down. Different tiles use different chart types so each KPI reads at a glance.
Model Token Cost Optimizer
model-token-cost-optimizer
Helicone and Portkey style AI gateway telemetry, semantic caching hit rates, model routing savings, and latency metrics dashboard with token spend analytics, model allocation breakdown, and active cost optimization rules.
Nda Agreement Generator
nda-agreement-generator
Interactive Non-Disclosure Agreement (NDA) generator and contract customizer with bilateral/unilateral modes, customizable legal covenants, real-time contract parchment preview, and e-signature execution workflow.
Neighborhood Walkscore Card
neighborhood-walkscore-card
Real estate neighborhood intelligence widget with Walk Score, Transit Score, Bike Score, categorized points of interest (transit, dining, schools, parks), and commute time estimator.
Newsletter
Newsletter growth quartet: a slim inline signup band, a filterable issue archive with featured spotlight, centered and split signup forms, and a split section pairing the pitch with a preview of the last issue.
Newsletter — Inline Band
newsletter-inline-band
Slim full-width signup band with an inline field, submit button, subscriber count as proof, and a status line that reserves its own row so confirming never shifts the layout.
Newsletter Issue Archive
newsletter-issue-archive
Substack and Beehiiv style publication archive with issue numbers, read times, subscriber counts, category filtering, search, featured issue spotlight, and subscribe flow.
Newsletter Signup
newsletter-signup
Engineering dispatch and release radar workbench with channel tracks (Architecture, Releases, Security), live archive previews, and subscriber metrics.
Newsletter — Split with Preview
newsletter-split-preview
Signup section pairing the pitch and form with a preview of the last issue — subject line, date, and opening paragraph — so the reader sees what they are subscribing to.
Notification Center
notification-center
Full-page notification center: unread badge, mark-all-read, All/Unread/Mentions tabs with functional filtering, day-grouped rows (Today / Earlier) pairing category icon tiles with titles, bodies, relative timestamps, unread dots and hover actions (mark read, dismiss). Per-tab empty states included; swap `notifications` for your source.
Notifications Popover
notifications-popover
Header-grade notifications panel. Slot-trigger Popover the consumer wraps around their own Bell button. Filter tabs (All/Unread), Today/Earlier groups, category-coloured accent bars, hover-dismiss, mark-all-read, slide-in animation. Slot receives `unreadCount` so the trigger can show a badge.
Onboarding Checklist
onboarding-checklist
Progressive activation checklist card: header with title, an N of M complete counter and a linear Progress bar, tappable task rows with icon tiles, one-line descriptions and chevrons (completed tasks flip to a filled check tile with muted copy), a footer with a Skip for now ghost link and an X dismiss that fades the card out, and a success panel with a glowing check circle at 5 of 5. State is local — wire tasks to your own activation API.
Onboarding Equipment Provisioning
onboarding-equipment-provisioning
Enterprise IT hardware, peripherals, and software license provisioning portal for new hires with primary workstation selection, display and peripheral bundles, security keys, cloud SaaS seats, and courier tracking.
Onboarding Wizard
onboarding-wizard
Multi-step workspace setup flow in a SectionCard: a four-step Stepper (Workspace → Team → Preferences → Done) with check icons on completed steps, a workspace-name input with live URL slug preview, teammate invites as removable email chips with a skip link, preference Switch rows, and a success panel with a glowing check circle. Footer carries Back/Continue actions plus a Step X of 4 counter. Data is stubbed inline — wire your API of choice.
Order Confirmation
order-confirmation
Post-purchase order confirmation & tracking page featuring a success banner with emerald checkmark halo, 4-step shipment progress bar with pulsing active state, itemized order breakdown, and customer delivery & payment cards.
Packing Slip Generator
packing-slip-generator
Shopify and ShipStation style warehouse order packing slip and picker verification checklist with warehouse header, customer ship-to routing, picker pack station barcode scan identifier, itemized pick list table with interactive packed checkboxes, bin location tags, SKU barcodes, weight calculations, and quality control inspector stamp.
Password Generator Widget
password-generator-widget
1Password and Bitwarden-style customizable password and passphrase generator with entropy strength meter, character type toggles, memorable Diceware passphrases, PIN codes, and volatile history drawer.
Patient Intake Form
patient-intake-form
HIPAA-compliant new patient registration and medical history questionnaire in a SectionCard. Features a 4-step Stepper (Personal Information → Medical History → Insurance & Billing → Consent & Sign), demographic inputs with biological sex and emergency contact, chronic conditions checklist with allergy details and medication textareas, insurance carrier selection with card photo upload dropzones, regulatory HIPAA disclosure accordion with electronic signature pad, and a post-submission confirmation receipt with patient ID.
Patient Medical Record
patient-medical-record
Epic/Cerner-style EHR patient chart and clinical summary: patient demographics header with allergy alerts, latest vitals strip, active diagnoses and ICD-10 problem list, active medications table, recent clinical encounter notes (HPI and Assessment & Plan), upcoming appointments schedule, care team directory, and emergency contacts.
Payment Form
payment-form
Credit-card checkout form with a live 3D card preview, wallet shortcut buttons (Apple Pay / Google Pay / PayPal), brand auto-detection, Luhn validation, expiry / CVC checks, and a hookable async submit. Wallet buttons call `onWallet` so the consumer wires the actual SDK; the card form calls `onSuccess` / `onError` after the consumer-provided `onSubmit` settles.
Payouts Management Table
payouts-management-table
Merchant payout management page: automated payout schedule controls, instant payout trigger, summary balance cards for available, in-transit, and rolling reserve balances, verified settlement bank account destination card, and an itemized batch transfer history table with gross/fee/net amounts, status badges, and action menus.
Payroll Run Summary
payroll-run-summary
Gusto/Rippling style bi-weekly company payroll execution preview and tax reconciliation: cycle header with approval badge and submission controls, 4 primary payroll metric cards (company cost, net pay, employee withholdings, employer taxes), direct deposit ACH funding timeline, and itemized employee payroll table.
Peer Discussion Forum
peer-discussion-forum
StackOverflow and EdStem style student community Q&A thread with upvoting, accepted instructor answers, markdown code formatting, rich answer composer, and related discussions sidebar.
Performance Review Matrix
performance-review-matrix
360-degree employee performance review scorecard and competency matrix: executive metrics, self vs manager rating comparison, detailed competency accordion with manager remarks, OKR progress table, and peer feedback quotes.
Personal Finance Budget
personal-finance-budget
YNAB and Copilot-style zero-based monthly budget planner: envelope category budgeting, monthly pacing metrics, real-time spending progress by envelope, color-coded health indicators, and savings goal trackers.
Podcast Audio Player
podcast-audio-player
Spotify and Apple Podcasts style audio player with 32-bar visual SVG waveform scrubber, chapter markers, playback speed controls, and show notes accordion.
Pomodoro Focus Timer
pomodoro-focus-timer
Pomodoro productivity workspace with focus and break interval timers, SVG circular progress countdown display, active task queue with pomodoro estimate badges, ambient sound generator switcher, and daily focus analytics metrics.
Prescription Refill Manager
prescription-refill-manager
Pharmacy patient portal for managing active prescriptions, refill requests, dosage schedules, delivery tracking, and preferred pharmacy details with an integrated refill order dialog.
Press Kit Brand Assets
press-kit-brand-assets
Comprehensive brand guidelines and press kit hub with official logo downloads in vector SVG/4K PNG/WebP, OKLCH brand palette tokens, executive leadership headshots (300 DPI), and press contact resources.
Price Drop Alert Card
price-drop-alert-card
E-commerce wishlist price tracker with 90-day price history chart, dynamic target price threshold slider, multi-channel alert configurator, and active tracked items table.
Pricing
Pricing collection with eleven interchangeable variants: seat matrix, interactive calculator, enterprise SLA card, feature add-on builder, feature tier slider, grouped matrix, per-plan cards, sticky-header matrix, single plan, tier comparison matrix, and usage calculator slider.
Seat Pricing Matrix
pricing-01
Comprehensive enterprise pricing workbench with monthly/annual billing cycle toggle, currency selector (USD/EUR/GBP), team seat simulator slider, dynamic add-on calculators, and an expandable side-by-side feature comparison matrix.
Pricing Calculator
pricing-calculator
Interactive SaaS and API pricing calculator with dynamic seat, request throughput, and cloud storage sliders, annual billing toggle with 20% discount, enterprise add-on switches, automated tier recommendation, and sticky live estimated cost breakdown.
Pricing Enterprise Sla Card
pricing-enterprise-sla-card
Enterprise contract specification block detailing 99.999% SLA metrics, SOC2/HIPAA compliance, and dedicated VPC architecture.
Pricing Feature Addon Builder
pricing-feature-addon-builder
Interactive add-on pricing calculator with tier bundling, seat scaling, and real-time invoice generation.
Pricing Feature Tier Slider
pricing-feature-tier-slider
Continuous MAU and usage scale pricing slider with dynamic tier calculation and annual discount toggle.
Pricing — Grouped Matrix
pricing-matrix-grouped
Feature comparison matrix with collapsible capability groups, so a long plan comparison opens on the summary rows and expands only where the reader is looking.
Pricing — Per-Plan Comparison
pricing-matrix-plan-cards
Plan-first comparison that renders each plan as its own card of included and excluded capabilities, the layout a wide matrix should degrade to on a phone.
Pricing — Sticky Header Matrix
pricing-matrix-sticky-header
Long feature matrix whose plan header row pins to the top while the body scrolls, so the column a checkmark belongs to stays identifiable at any scroll depth.
Pricing — Single Plan
pricing-single-plan
One-plan pricing section stating the price, what is included, what is explicitly not, and the usage line at which a conversation becomes worthwhile.
Pricing Tier Comparison Matrix
pricing-tier-comparison-matrix
Comprehensive pricing tier comparison matrix with billing cycle discount toggles, prominent recommended plan, and granular capability matrix table.
Pricing Usage Calculator Slider
pricing-usage-calculator-slider
Interactive frontend infrastructure ROI calculator with real-time MAU, QPS, and edge replica sliders and annual cost savings scorecard.
Privacy Data Export Portal
privacy-data-export-portal
GDPR Article 15 and CCPA personal data export portal with privacy governance stat cards, granular category export selector, format chooser, and export archive history table.
Privacy Policy Generator
privacy-policy-generator
Customizable website privacy policy builder with third-party tracking disclosures, CCPA, and GDPR compliance clauses.
Product Comparison Drawer
product-comparison-drawer
Floating multi-product specification comparison bar with attribute diff highlighting, expanded full-matrix drawer comparison, and sticky buy triggers.
Product Qa Community
product-qa-community
Searchable customer and engineering Q&A community forum with staff answer badges, question upvoting, category filters, and live ask modal.
Profile Menu
profile-menu
Header-grade profile/account dropdown. Slot-trigger DropdownMenu the consumer wraps around their own avatar button (default trigger ships an Avatar fallback). Sections: upgrade, account/billing/notifications/settings, log out. Emits `select` with the chosen item key so consumers wire navigation and auth themselves.
Progress Breakdown
progress-breakdown
Labeled progress bars in a SectionCard. Spell rows out inline with ProgressItem — each bar takes colorIndex to cycle through chart-1..5 colors.
Project Roadmap
project-roadmap
Full interactive project roadmap and deliverables surface: Gantt timeline with multi-scale zooming, work breakdown task tree, overall progress metrics, search and status/assignee filters, task detail slide-over Sheet, and Add Task modal dialog.
Prompt Playground
prompt-playground
AI model prompt engineering studio & parameter tuner with system instructions, user input, temperature, max tokens, top-p sliders, JSON/stream modes, and interactive response evaluation.
Property Amenities Grid
property-amenities-grid
Building and luxury residential amenities matrix featuring categorized lifestyle zones, interactive category tabs, instant keyword search, and detailed feature cards with pool photography thumbnail.
Property Boundary Map
property-boundary-map
Cadastral parcel boundaries with zoning classifications, lot acreage, and tax assessment valuation.
Property Listing Card
property-listing-card
Zillow and Redfin style real estate property listing card featuring interactive photo carousels with 16:9 aspect ratios, price and mortgage estimation, specification pills (beds, baths, square footage, price/sqft), address, key feature tags, listing agent attribution, and direct tour scheduling actions.
Purchase Order Receiving
purchase-order-receiving
Inbound dock receiving workbench with PO matching, QA discrepancy logging, lot registration, and GRN generation.
Quick Actions
quick-actions
Vertical list of clickable shortcuts in a SectionCard. Spell rows out inline with QuickActionItem — swap the anchor for your router Link when you need SPA routing.
Quiz Assessment Runner
quiz-assessment-runner
Interactive multiple-choice exam & quiz assessment runner: 2-column test canvas with real-time countdown timer, question navigator grid with status indicators (completed, active, flagged, unanswered), syntax-highlighted code snippets, single-choice selection cards, submit confirmation modal, and comprehensive score breakdown with review explanations.
Rag Pipeline Visualizer
rag-pipeline-visualizer
LlamaIndex and LangChain style Retrieval-Augmented Generation (RAG) pipeline debugger and chunk retrieval inspector. Features 5-stage interactive DAG flow, HyDE expansion preview, hybrid dense/sparse search telemetry, cross-encoder reranking, and grounded response synthesis.
Rate Limiting Config
rate-limiting-config
Cloudflare/Upstash style API rate limiting rules builder and token bucket traffic monitor with 4 health metrics cards, interactive token bucket vs sliding window simulation slider, and configured mitigation rules table with status controls and contextual action menus.
Ratings — Award Wall
ratings-award-wall
Grid of third-party awards, each naming the awarding body, the category, and the period it covers, so a badge wall stays checkable rather than decorative.
Ratings & Review Badges
ratings-review-badges
Third-party proof strip: four review-platform cards with star rating, score out of five, review count, and a category award line, over a rating-distribution bar and a verified-reviews footnote.
Ratings — Star Summary
ratings-star-summary
Aggregate rating summary pairing a large score and partial-star row with a per-star distribution and the review count each bar represents.
Referral Program Widget
referral-program-widget
Rewardful and Viral Loops-style customer referral program and milestone reward tracker. Features a balance summary header with available credits and referral counts, shareable link and code copy actions with quick social sharing, a 4-tier milestone stepper with dynamic progress, and a recent referrals activity table with payout statuses.
Resources — Category Grid
resources-category-grid
Resource library grouped into categories, each card listing its three most recent entries with kind and read time, over a link to the full archive.
Resources — Featured List
resources-featured-list
Editorial resource layout pairing one featured long-read with a numbered list of further reading, each entry carrying its kind, date, and read time.
Resources Teaser Grid
resources-teaser-grid
Blog and resources teaser: one featured article spanning two columns with kind badge and read time, beside a stacked list of four recent pieces, closing on a view-all link row.
Return Merchandise Inspection
return-merchandise-inspection
Warehouse returns intake inspection station, RMA condition grading, and restock vs quarantine disposition workbench.
Returns Portal
returns-portal
Self-serve e-commerce returns & exchange portal wizard: Stepper header (Find Order → Select Items → Choose Resolution → Confirm & Print Label), order lookup with email and order number, item selection list with return reasons and quantities, resolution selector (size exchange, store credit with +10% bonus, or original payment refund), and confirmation screen with printable prepaid shipping label, QR code drop-off instructions, and return summary.
Reverse Etl Sync Manager
reverse-etl-sync-manager
Census and Hightouch style Reverse ETL sync manager and data activation pipeline for synchronizing Snowflake data warehouse marts to SaaS destinations (Salesforce CRM and HubSpot) with live telemetry cards, schema field mapping matrix, and sync run history log.
ROI — Calculator
roi-calculator-inputs
Input-driven ROI estimate where team size, close days, and analyst rate drive a computed saving, with the assumptions stated beneath the figure.
Role Matrix
role-matrix
Roles × permissions grid grouped by resource: checkbox cells with tri-state column headers (toggle a whole role), per-resource grant summaries, horizontal scroll for many roles, and a read-only mode. value/onValueChange mirror the full grants map; stub data covers users, billing and content.
Safe Note Calculator
safe-note-calculator
Y Combinator Post-Money SAFE note valuation, conversion share price, effective discount, and cap table equity dilution simulator with interactive parameter controls and Series A financing sensitivity matrix.
Sales Territory Map
sales-territory-map
Sales territory map. Region pins with quota attainment; select a territory to fly the camera.
Saved Cards List
saved-cards-list
List of stored payment cards using compact 3D card visuals. Marks one as the default, allows setting a different one as default, removing with a confirmation dialog, and adding a new card via an inline PaymentForm that collapses open. Emits `add`, `remove`, and `set-default` — consumer owns the persistence.
Schema Drift Alert Board
schema-drift-alert-board
Automated data warehouse schema drift and structural anomaly detector with downstream blast radius impact analysis, interactive multi-tier lineage graph, schema mutation contract diffs, and remediation workflows.
Secrets Rotation Scheduler
secrets-rotation-scheduler
AWS Secrets Manager style automated credential rotation scheduler and security key audit with lifecycle telemetry cards, zero-downtime dual-version rotation workflow, rotation lambda log inspection, and schedule configuration dialogs.
Security — Certification Band
security-certification-band
Slim compliance band listing each certification with its issuing body and last audit date, plus a data residency selector, for placing above a pricing table.
Security Compliance Badges
security-compliance-badges
Enterprise security and compliance workbench featuring SOC2, ISO27001, GDPR, and HIPAA audit inspection, cryptographic SHA-256 fingerprint verification, and whitepaper download.
Security — Data Flow
security-data-flow
Diagram of what crosses the boundary and what does not: three labelled zones joined by drawn arrows, with a legend separating metadata from customer rows.
Security Incident Timeline
security-incident-timeline
Security Operations Center (SOC) incident response timeline and post-mortem tracker with telemetry KPIs, chronological audit trail, log snippets, and corrective action items.
Security — Trust Centre Grid
security-trust-center-grid
Trust centre surface pairing compliance programmes with their audit date, scope, and report link, over a row of operational controls stated as facts rather than claims.
Seo Audit Checklist
seo-audit-checklist
Ahrefs and SEMrush style on-page SEO analyzer, meta tag auditor, Google SERP snippet preview simulator, heading hierarchy validator, and Core Web Vitals checklist.
Service Health Matrix
service-health-matrix
Statuspage and BetterStack style global region latency & infrastructure health matrix with overall operational status banner, 6-region latency grid with sparklines, 90-day core service uptime bars, and incident history timeline.
Session Device Manager
session-device-manager
Active multi-device login sessions manager and security dashboard featuring current session hero card with IP geolocation, suspicious new login alert banner, 2FA verification badges, and instant individual or bulk session revocation for desktop, mobile, and CLI tokens.
Shipment Tracking Timeline
shipment-tracking-timeline
Flexport & Maersk style container freight tracking timeline with live AIS vessel telemetry, voyage ETA milestones, Reefer cold-chain specifications, and multimodal transport logistics.
Shipping Label Printer
shipping-label-printer
Multi-carrier shipping label creator and dispatch station (USPS, FedEx, UPS, DHL) with live digital scale sync, package dimensional weight calculator, delivery options, and realistic 4x6 high-contrast thermal printable label preview.
Shortcuts Dialog
shortcuts-dialog
Linear-style keyboard reference sheet: a '?' dialog listing shortcut groups (label, description, Kbd combo) in a responsive two-column grid. Ships a built-in trigger button, controlled/uncontrolled open, custom groups via prop, and an Esc footer hint. Display only — wire real handlers in your app.
Icon Rail Sidebar
sidebar-01
Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure markup, no props -- edit Sidebar01.tsx to change routes and NavUser.tsx to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.
Team Switcher Sidebar
sidebar-02
Full-featured app sidebar -- collapsible="icon" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.
Documentation Sidebar
sidebar-03
Docs-style sidebar with a version switcher at the top, a search input below, and collapsible navigation groups. All sample data inlined so consumers edit routes in place.
Floating Inset Sidebar
sidebar-04
Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant="floating" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.
Dual-Rail Sidebar
sidebar-05
Dual-rail sidebar -- a thin always-visible icon column on the far left holds quick shortcuts (a subset of the full nav), paired with a wider main panel for the brand, search, sections, and footer. Uses collapsible="icon": when the user collapses, only the rail stays. On mobile the kit Sheet shows the full dual rail. Requires the parent SidebarProvider to set both widths: style={{ '--sidebar-width': '19.5rem', '--sidebar-width-icon': '3.5rem' }}. Modeled on the GR8R HRMS admin shell.
Starred Project Sidebar
sidebar-06
Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.
Toolbar Action Sidebar
sidebar-07
App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard / Management / Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, Log out). Built on sidebar-01.
Skill Assessment Radar
skill-assessment-radar
Developer skill proficiency scorecard and radar matrix: domain percentile rankings, dual candidate vs industry benchmark progress bars, competency breakdown, radar telemetry polygon, and personalized learning pathways.
Smart Inbox Triage
smart-inbox-triage
Superhuman-style high-velocity email inbox triage command center with keyboard shortcuts, split category tabs (VIP, Team & GitHub, Newsletters, Archived), dual-pane split reader, fast triage actions (Archive, Snooze, Star, Quick Reply), and command palette.
Social Proof Stat Counter Stream
social-proof-stat-counter-stream
Live infrastructure telemetry and animated metric counter stream with real-time global edge round-trip latency ticker.
Social Proof Video Wall
social-proof-video-wall
Engineering case study and video testimonial wall with playback simulation, category filtering, and metric highlights.
Sprint Timeline
sprint-timeline
Agile sprint tracking timeline block: 2-week deliverable Gantt schedule with story point burndown indicators, milestone demos, dependency handoffs, and assignee tags.
Sql Query Notebook
sql-query-notebook
Hex, Deepnote, and Jupyter style SQL analytical query notebook with documentation cells, executable Snowflake SQL editor with syntax coloring, live tabular results grid, CSV export, and chart visualization.
Sso Identity Provider Config
sso-identity-provider-config
Enterprise Single Sign-On (SAML 2.0 / OIDC) identity provider configuration wizard with IdP preset picker, SP credentials, XML metadata dropzone, X.509 cert PEM validator, domain enforcement switch, and interactive SAML test runner.
Stats Band
stats-band
Interactive live telemetry and performance matrix band with multi-timeframe switching, real-time SLA verification, regional cluster drilldown, and JSON export.
Stats — Band with Sparklines
stats-band-sparklines
Metric band pairing each headline figure with an inline sparkline and its period, so a number arrives with the shape of the trend behind it.
Status Monitoring
status-monitoring
Uptime page. Banner derives All systems operational / Degraded performance / Partial outage from the newest day of each service. Per-service rows render a 90-segment day bar (success/warning/destructive/info/muted per status) with hover tooltips and a right-aligned uptime percentage, followed by an incident timeline with severity badges. Pass `services` (name + days array of up/degraded/down/maintenance/none) and `incidents` to replace the stubs.
Sticky CTA
sticky-cta
Sticky conversion trio that stays out of the way until scrolled for: a bottom CTA bar with offer line and social proof, a compact corner button that expands on hover or focus, and a bottom bar that doubles as a reading-progress indicator.
Sticky CTA Bar
sticky-cta-bar
Scroll-triggered bottom CTA bar that reveals past a threshold, carrying an offer line, inline social proof, primary + ghost actions, and a dismiss control that stays dismissed for the session.
Sticky CTA — Corner Button
sticky-cta-corner-button
Compact corner action that expands on hover or focus to reveal its label, staying out of the content column on narrow screens.
Sticky CTA — Reading Progress
sticky-cta-reading-progress
Sticky bottom bar that doubles as a reading-progress indicator, revealing partway down a long page and reporting how much of it remains.
Stock Transfer Manager
stock-transfer-manager
Inter-facility inventory transfer console with bin-level routing, barcode lookup, and condition classification.
Store Locator Map
store-locator-map
Store locator. Map pins plus a compact list with open/closed status and fly-to on select.
Store Pickup Curbside
store-pickup-curbside
Buy Online Pick Up in Store (BOPIS) & curbside pickup coordination board with customer arrival parking check-in, real-time staging bin tracking, runner fulfillment dispatch, and SLA monitoring.
Stream Processing Flink Topology
stream-processing-flink-topology
Apache Flink & RisingWave stateful streaming graph: real-time DAG topology, window throughput, checkpointing duration, RocksDB state inspector, and backpressure heat monitor.
Student Gradebook Table
student-gradebook-table
Academic gradebook ledger with course header, weighted assignment categories (homework, midterm, labs, final project), class GPA & enrollment metric cards, overall percentage, letter grade badges, attendance tags, and student action menus.
Subpoena Legal Hold Manager
subpoena-legal-hold-manager
Enterprise e-discovery litigation hold notice tracker, custodian preservation receipts, and compliance audit log.
Subscription Churn Analytics
subscription-churn-analytics
ChartMogul and Baremetrics style SaaS subscription churn and MRR analytics dashboard. Features 4 key SaaS metrics cards (Net MRR growth, logo churn rate, net revenue churn, and LTV/CAC), an MRR movement waterfall decomposition bridge, a churn reasons distribution table with lost ARR attribution and trend indicators, and automated churn prevention playbook quick actions.
Support Ticket Detail
support-ticket-detail
Customer support ticket conversation thread, SLA monitor & staff workbench with internal notes, canned response macros, and customer metadata sidebar.
Synthetic Data Generator
synthetic-data-generator
Gretel and Tonic-style LLM and mathematical synthetic dataset generator with differential privacy epsilon controls, custom schema field builders, K-anonymity policy toggles, live tabular CSV preview, and streaming JSON Lines export.
Tax Summary Report
tax-summary-report
QuickBooks and Stripe Tax style quarterly estimated tax calculator and liability report: four KPI summary cards, jurisdictional liability breakdown (federal, state, FICA), IRS Schedule C deductible expenses table with tax savings, and a quarterly filing timeline.
Team Section
team-section
Centered marketing team section. Eyebrow + headline + lede over a responsive member card grid (initials avatar, role badge, one-line bio, ghost social buttons). Members with a department field group under uppercase headers; variant="compact" drops bios for tighter cards. Roster is stub data — edit DEFAULT_MEMBERS or pass members.
Technical Specs Sheet
technical-specs-sheet
Comprehensive engineering technical specifications sheet with Metric/Imperial SI toggles, parameter category filters, search, and downloadable PDF trigger.
Tenant Rent Ledger
tenant-rent-ledger
Property management resident portal with tenant header, 4 financial overview cards (monthly rent, next due date, autopay status, escrow deposit), autopay toggle with date schedule selection, and a complete 6-record payment ledger with receipt actions.
Testimonials
testimonial
Testimonial section set covering the full proof spectrum: a featured pull quote, a logo-and-quote row, a verified masonry grid, social-post cards, a counter-scrolling marquee, a case-study carousel with telemetry KPIs, and an ROI workbench with filters and autoplay.
Testimonial — Logo & Quote Row
testimonial-logo-quote-row
Three-up inline row pairing each customer wordmark with a one-sentence quote and a compact attribution line, for pages that need proof without a full testimonial block.
Testimonial — Marquee Scroll
testimonial-marquee-scroll
Two counter-scrolling marquee rows of quote cards that pause on hover and stop entirely under reduced-motion, with edge masks fading the cards into the page.
Testimonial Masonry Verified Grid
testimonial-masonry-verified-grid
Masonry grid of verified engineer endorsements with role filters, star ratings, avatar badges, and quantifiable impact metrics.
Testimonial Quote Carousel Telemetry
testimonial-quote-carousel-telemetry
Enterprise customer spotlight case study carousel with interactive company tabs, executive quotes, and verified quantitative telemetry KPIs.
Testimonial — Single Featured
testimonial-single-featured
One large pull quote given the full section: oversized text, attribution with avatar and role, the customer wordmark, and a supporting result metric beside it.
Testimonial — Social Cards
testimonial-social-cards
Masonry of social-post style endorsements with handle, avatar, timestamp, body copy, and engagement counts, formatted as posts rather than polished marketing quotes.
Customer Testimonials
testimonials-01
Interactive customer case study and ROI telemetry workbench with industry filters, verified customer metrics, tech stack tags, and autoplay navigation.
Threat Map Radar
threat-map-radar
Live threat radar over a Mapbox world map. Attack arcs hit edge PoPs; click an origin to isolate its vector.
Time Off Portal
time-off-portal
Employee leave management & PTO portal: 4 PTO balance summary cards with progress meters, interactive visual month calendar with approved leave and holiday indicators, leave request dialog and inline form with working day calculations, manager pending approval cards with instant action buttons, upcoming team out-of-office tracker, and company holiday list.
Time Tracker Timesheet
time-tracker-timesheet
Toggl/Harvest-style live time tracker with active running stopwatch, project rate selection, billable status toggle, 4 weekly summary metric cards, and daily grouped timesheet activity ledger with resume actions.
Toggle Setting List
toggle-setting-list
List of toggle-able settings in a SectionCard. Spell rows out inline with ToggleSettingRow — each row is a controlled switch taking `checked` + `onCheckedChange`.
Trademark Patent Portfolio
trademark-patent-portfolio
USPTO and WIPO intellectual property asset portfolio tracker, patent grant status, jurisdiction coverage, and maintenance fee timeline with docket action workflow.
Training Compliance Tracker
training-compliance-tracker
Annual mandatory employee compliance training dashboard with certification badges, renewal deadlines, assessment scorecards, verified credential preview modal, and certificate export controls.
Transaction Feed
transaction-feed
Brex/Ramp-style real-time corporate transaction feed with expense categorization, summary financial stat cards, search and filter toolbar, cardholder metadata, receipt attachment triggers, and row action menus.
Triage Queue Dashboard
triage-queue-dashboard
Emergency Department (ED) and Urgent Care patient acuity triage queue and room allocation board: live unit header, 4 ESI overview cards with target wait thresholds, searchable patient queue table with vitals snapshot, assigned room, attending care team, and quick clinical actions.
Usage Metering Dashboard
usage-metering-dashboard
Real-time consumption metering and overage monitoring dashboard: billing cycle tracking with days remaining, 4 key resource meter cards (API requests, compute hours, vector storage, bandwidth) with color-shifting threshold progress bars and projected month-end usage, projected invoice cost summary with overage breakdown, auto-scale overage protection toggle, email alert threshold selector, and recent usage events audit log.
Use Cases
use-cases
Use-case set spanning a filterable industry grid, persona-switched tabs, self-select role cards, and a numbered end-to-end scenario walkthrough.
Use Cases — Industry Grid
use-cases-industry-grid
Filterable industry use-case grid: segment chips narrow a six-card grid in place, each card carrying an icon, industry label, outcome headline, proof metric, and a quiet read-more link.
Use Cases — Persona Tabs
use-cases-persona-tabs
Persona-switched use-case section: a tab list of roles swaps the pain-point summary, a three-item outcome list, a supporting metric, and a role-specific CTA without leaving the page.
Use Cases — Role Cards
use-cases-role-cards
Grid of role cards, each stating the job to be done, the first week of work, and the metric that role is measured on, so a reader can self-select without a tab interaction.
Use Cases — Scenario Walkthrough
use-cases-scenario-walkthrough
One concrete scenario walked end to end as a numbered sequence of what happens, who does it, and what the system records at each step.
Utm Campaign Builder
utm-campaign-builder
Google Analytics 4 (GA4) campaign link generator with preset presets, shortlink generator, syntax-highlighted URL preview, parameter verification table, and vector QR code export.
Vector Embeddings Inspector
vector-embeddings-inspector
Pinecone & Qdrant style vector database index inspector, similarity search tester, and dimensionality explorer with cosine distance scoring, vector heatmap visualization, and namespace filtering.
Vendor Supplier Portal
vendor-supplier-portal
Supplier and vendor relationship workbench with SLA scorecard metrics, purchase order status, and contracted pricing catalog.
Video Playlist Sidebar
video-playlist-sidebar
YouTube and Vimeo style video playlist drawer with active playing indicator, durations, auto-play next switch, loop/shuffle controls, and active lesson summary card.
Virtual Card Manager
virtual-card-manager
Mercury/Ramp-style corporate virtual card manager: interactive dark credit card visual hero with EMV chip, revealable credentials, live spending limit progress bar, instant freeze toggles, limit adjusters, and an active virtual cards table.
Virtual Tour Panorama
virtual-tour-panorama
360-degree immersive room virtual tour panorama viewer with interactive viewpoint hotspots, laser measurement overlays, and architectural floor plan minimap.
Vitals Tracker Chart
vitals-tracker-chart
Biometric vitals monitoring dashboard with multi-day trends, threshold bands, device sync status, 7-day vitals table with risk indicators, clinician alert limits, and quick-entry logging dialog.
Vulnerability Scanner Report
vulnerability-scanner-report
Snyk and Trivy style CVE vulnerability scanner report and dependency security audit with severity breakdown cards, CVSS metrics, package version diffs, advisory inspection drawer, and automated remediation PR actions.
Waitlist — Referral Position
waitlist-referral-position
Waitlist capture that swaps on submit to show queue position, the referral link that moves it, and a progress meter to the next tier of early access.
Warehouse Inventory Grid
warehouse-inventory-grid
WMS warehouse inventory and bin locator grid: facility selector, 4 summary metric cards for SKUs, capacity, low-stock triggers, and inbound shipments, searchable inventory table with multi-rack bin badges, on-hand/allocated/ATP counts, barcode scanning support, and slide-over bin relocation and receiving drawer.
Wave Picking Console
wave-picking-console
Batch wave picking console with multi-order tote assignment, optimized pick route, and barcode verification.
Webhook Tester
webhook-tester
Svix and Stripe style live webhook delivery inspector and event simulator with signature generation, payload editor, and request/response inspection.
Webhooks
Webhook manager in two SectionCards: endpoints with event chips, live success rate and a pause/resume switch, plus a delivery log pairing relative timestamps with HTTP status pills, durations, retry counts and retry actions. Includes an add-endpoint dialog. Stateful demo — swap the stub data for your source.
Wholesale B2b Quick Order
wholesale-b2b-quick-order
B2B wholesale bulk order matrix with volume tier pricing, case pack multipliers, and CSV SKU paste input.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Ab Test Variant Results
ab-test-variant-results
Optimizely and Statsig style A/B test statistical significance scorecard and conversion delta comparison. Features experiment status header, 4 primary experiment metrics cards, variants comparison table with statistical verdicts, and conversion funnel step drop-off comparison.
Access Request Workflow
access-request-workflow
Just-In-Time (JIT) IAM temporary privilege escalation request modal and approval queue: governance metrics cards, elevated session countdown timers, approval form dialog, and active session manager with instant revoke and audit logging.
Activity Feed
activity-feed
Record activity as a Timeline of avatar rows. Each row is spelled out inline — actor, verb, optional comment, relative time. Edit the rows after install; no items wrapper.
Ad Spend Roi Dashboard
ad-spend-roi-dashboard
Multi-channel paid acquisition ad spend, blended ROAS, and CAC performance dashboard: 4 primary KPI cards (total spend, revenue with blended ROAS, CAC, conversions), channel performance comparison table with live toggle switches, and top 3 performing campaign breakdown.
Agent Memory Inspector
agent-memory-inspector
Autonomous AI agent memory inspector featuring short-term context buffer utilization, long-term episodic vector memories with confidence scoring, and Neo4j-style entity relationship knowledge graph.
Ai Agent Orchestrator
ai-agent-orchestrator
Multi-agent workflow visualizer and execution graph. Displays real-time agent pipeline topology, active reasoning streams, tool invocation metrics, live code artifact generation, and pipeline control actions.
Ai Code Review Assistant
ai-code-review-assistant
GitHub PR automated AI code review assistant with AST syntax diff annotations, performance suggestions, and 1-click patch application.
Ai Crm Pipeline Dashboard
ai-crm-pipeline-dashboard
High-craft AI CRM deal pipeline, deal velocity, AI win probability scoring, and sales activity tracker inspired by Wise / revenue intelligence platforms. Features revenue velocity metrics, 4-stage pipeline Kanban board with predictive win scores, deal progress bars, and AI meeting summaries with buying intent detection.
Ai Llm Chat
ai-llm-chat
ChatGPT/Claude-style LLM chat surface. Collapsible left sidebar with New chat, searchable thread history grouped Today/Yesterday/Previous 7 days/Earlier, account row. Centered conversation: empty state with suggested-prompt tiles, user/assistant turns with code-block rendering and copy/regenerate/feedback actions, streaming dots, stop button. Composer with model picker (Opus/Sonnet/Haiku), attach, Enter-to-send, autosizing textarea. Stateful demo — wire `send()` to your streaming endpoint.
Ai Saas Command Center
ai-saas-command-center
Modern AI SaaS platform command center with real-time token burn telemetry, GPU cluster health, latency percentiles, and cost anomaly alerts.
Airbnb Host Earnings
airbnb-host-earnings
Short-term rental host revenue dashboard: gross earnings with month-over-month growth, occupancy rate progress, ADR & RevPAR metrics, automated direct deposit payout schedule card, dynamic pricing AI rate recommendations, and an itemized reservation payout breakdown table.
Analytics Overview
analytics-overview
Two-pane analytics dashboard: stacked bar with dot overlay on a dual y-axis above, and an interactive drill-down line chart below. Click a bar to filter the bottom pane to that route.
Announcement
Announcement band set covering six placements: a dismissible top banner in solid, soft, and gradient tones, a split release-notes band, a rotating multi-message strip, a session countdown bar, a delayed corner card, and a sticky version-pill banner.
Announcement Banner
announcement-banner
Interactive release, security, and maintenance broadcast center with rotating live ticker, CLI copy button, and floating pill / top-bar modes.
Announcement — Split Banner
announcement-banner-split
Full-width announcement band split between a labelled message column and an action column, sized for release notes and maintenance notices rather than promotions.
Announcement — Corner Card
announcement-corner-toast
Corner announcement card that slides in after a delay carrying a thumbnail, headline, supporting line, and two actions, staying out of the page flow entirely.
Announcement — Countdown Bar
announcement-countdown-bar
Top strip counting down to a deadline in days, hours, minutes and seconds, with the offer line, an inline CTA, and a dismiss control that keeps it closed for the session.
Announcement — Rotating Strip
announcement-rotating-strip
Announcement bar that cycles through several messages on a timer, pausing on hover and on focus, with dot controls for stepping between them manually.
Api Keys
api-keys
Developer API-key manager in a SectionCard. Self-contained stateful block with stub keys, reveal/copy/revoke row actions, an empty state, and a create-key dialog.
Asset Tracking Map
asset-tracking-map
Intermodal cargo container tracking with cold-chain sensor status, geofence perimeter rings, and battery levels.
Assignment Submission Dropzone
assignment-submission-dropzone
University coursework submission portal with plagiarism check indicator, grading rubric, and deadline timer.
Audio Waveform Transcript
audio-waveform-transcript
Descript and Otter style interactive podcast speech-to-text transcript with speaker diarization tags, interactive audio waveform scrubber, keyword search highlighting, talking time ratio analytics, clickable timecodes, and VTT/TXT export.
Audit Event Stream
audit-event-stream
Real-time live streaming audit log viewer and security telemetry feed with status indicators, stream pause/resume controls, regex and keyword log filtering, severity badges, expandable JSON payload inspectors, and ingestion telemetry stats.
Audit Log
audit-log
Admin activity trail in a SectionCard: live indicator, search across actor/target, action-type filter, and rows pairing an avatar actor with a color-coded action badge, monospace target, IP and relative timestamp. Filtering is functional against the `entries` prop; swap the stub data for your source.
Author Bio Box
author-bio-box
Editorial author signature card with avatar, verified badge, social links row, recent articles list, and interactive RSS subscribe button.
Backorder Split Shipment Manager
backorder-split-shipment-manager
Order fulfillment split shipment manager with stock triage, backorder tracking, and multi-node dispatch controls.
Bank Account Connector
bank-account-connector
Plaid/Tink style bank linking modal and account selector with institution search, popular bank grid (Chase, Bank of America, Wells Fargo, Citibank, Capital One, SVB), account radio selection with balances and badges, and an AES-256 encrypted security footer.
Banner Announcement Sticky
banner-announcement-sticky
Sticky release announcement banner with version pill, call-to-action link, and dismiss trigger.
Before & After — Side by Side
before-after-side-by-side
Two labelled panels set side by side at equal height with a shared annotation row beneath, for comparisons a slider would make harder rather than clearer.
Before & After — Toggle
before-after-toggle
Single panel toggling between the old and new state of the same screen, with a caption naming what changed and a control that keeps its position between switches.
Telemetry Bento
bento-01
High-density bento grid featuring an interactive AI query copilot workbench, real-time edge network telemetry feed, live latency radar, and SOC 2 compliance vault status.
Bento — Asymmetric Grid
bento-asymmetric-grid
Asymmetric bento where one tall tile anchors the composition and three shorter tiles carry a headline metric, a budget breakdown, and a customer quote.
Bento — Mixed Metrics
bento-metrics-mixed
Five-tile bento mixing headline numbers, an inline sparkline, a short list, and a status tile, for the summary band beneath a hero.
Bill Of Lading Viewer
bill-of-lading-viewer
Maritime & Air Bill of Lading (BOL) shipping document viewer and customs compliance inspector with multi-party entity grid, transport routing, container & cargo manifest, freight terms, carrier stamp, and blockchain verification.
Billing Account
billing-account
Stripe-style account billing page: current-plan card with Pro badge, price and renewal date plus Upgrade / Cancel actions, usage meters for seats and projects, a payment-method row with update and delete actions, and a compact billing-history list with paid badges and per-invoice downloads. Data is hardcoded inline so you can wire it to your own billing API.
Billing Usage Center
billing-usage-center
Stacked billing center: a current-plan card with seat meter, monthly usage rows whose bars shift success → warning → destructive as they approach the limit (with overage notes), and an invoice history table with status pills, an unpaid-balance alert, and an empty state. Plan, usage, and invoices are all overridable.
Blog Post Card Grid
blog-post-card-grid
Modern editorial magazine 3-column article card grid with featured hero story, reading time pills, category filter badges, author avatars, and newsletter subscription box.
Board Resolution Signoff
board-resolution-signoff
Corporate board meeting minutes and unanimous written consent resolution with director voting tallies, legal recitals, and digital signature signoff execution.
Bookmark Manager Grid
bookmark-manager-grid
Raindrop style visual web bookmarks and engineering resources manager with collection folders, tag cloud filtering, real-time search, favorite toggles, copy link, and add bookmark modal.
Cap Table Ownership Summary
cap-table-ownership-summary
Carta-style company equity capitalization table, share class breakdown, fully diluted ownership percentages, shareholder vesting progress, and interactive round dilution modeling simulator.
Careers Job Board
careers-job-board
Careers page and job openings board with perks overview, live department & location filtering, keyword search, grouped department openings, and general application CTA.
Cart Drawer
cart-drawer
Shopping cart drawer & full cart page view featuring free shipping progress meter, interactive line items with quantity steppers and variant tags, promo code application, order summary with tax & shipping calculation, trust badges, and empty state.
Case Study
case-study
Customer-proof set pairing a featured split story with a sticky results panel, a filterable story index, three-up metric cards, a before-and-after metric comparison table, and a compact results strip.
Case Study — Featured Story
case-study-featured-story
Single featured customer story in a split layout: narrative column with challenge/approach/result copy and a pull quote, paired with a sticky results panel of four metrics plus company facts.
Case Studies — Filterable List
case-study-filterable-list
Filterable index of customer stories with industry chips above rows carrying the headline result, stack, and read time, plus an empty state.
Case Studies — Metric Cards
case-study-metric-cards
Three-up customer results grid where each card leads with the headline metric, then the customer logo wordmark, a one-line outcome, the pull quote with attribution, and a link to the full story.
Case Study — Metric Comparison
case-study-metric-comparison
Single customer result shown as a before-and-after table of four metrics, each row carrying the prior value, the current value, and the delta, under a short context line.
Case Studies — Results Strip
case-study-results-strip
Compact proof band pairing each customer wordmark with its single headline result, sized for the gap between a feature section and a pricing table.
Cash Flow Treasury Dashboard
cash-flow-treasury-dashboard
Fluxo and Mercury style corporate cash flow treasury dashboard with 30-day runway projection, liquidity buffer monitor, inflow/outflow breakdown, and connected bank accounts table.
Category Showcase
category-showcase
E-commerce category bento grid and featured collections showcase with interactive hover zoom effects, promo sale banner, and bento or uniform grid layouts.
Cdc Replication Stream
cdc-replication-stream
Debezium and Fivetran style Change Data Capture (CDC) replication monitor and binlog sync pipeline with live telemetry metrics, table operation breakdowns, and real-time before/after row diff streaming.
Certificate Credential Card
certificate-credential-card
Digital diploma and verified credential card featuring ornamental certificate container, cryptographic seal with QR code verification, recipient honors, validated skill pills, instructor signatures, and social sharing.
Changelog
Release-notes timeline in a SectionCard: Subscribe header action, version groups with a monospace tag, Latest badge and right-aligned date, and entries pairing a typed badge (New / Improved / Fixed / Breaking) with a title and optional description along a continuous border-l rail with dot markers. Pass `releases` to replace the stub; first entry is treated as latest unless a release sets `latest`.
Changelog Release Notes Timeline
changelog-release-notes-timeline
Developer changelog timeline with interactive version filters, categorical changes (features, improvements, fixes), and commit hash links.
Chat Thread
chat-thread
Single-pane conversation surface. Peer header (avatar + online dot + call/video/more), grouped messages with day separators (Today/Yesterday/date), own vs. peer bubbles, read/delivered/sent ticks, typing indicator, composer with attach/emoji and Enter-to-send. Stateful demo; swap the `messages` ref for your transport.
Chat Two Pane
chat-two-pane
Two-pane messaging surface. Left rail: searchable conversation list with avatars, online dots, pinned section, unread badges, mute icons, last-message preview, smart timestamps. Right pane: active thread with day separators, own/peer bubbles, read ticks, typing indicator, attach/emoji/send composer. Stateful demo — replace `conversations` and `messagesByConvo` with your data layer.
Checkout Flow
checkout-flow
Three-step checkout (cart → payment → confirm) with animated step transitions, an inline PaymentForm, a success screen that fires a confetti burst with an animated checkmark, and an error screen with retry. Async submit is forwarded to the consumer-provided `onSubmit`, which returns an `orderId` that ends up on the success screen.
Cloud Backup Schedule
cloud-backup-schedule
Automated cloud snapshot scheduler with storage quota metering, encryption status, and recent snapshot timeline.
Code — Diff Review
code-diff-review
Unified diff panel with added and removed lines, a file path header, a reviewer note anchored to a line, and a summary bar counting the changes.
Code — Install Command
code-install-command
Package-manager tab strip over a single install command with a copy button, a resolved-version line, and a short note on what the command writes to disk.
Code Snippet Playground
code-snippet-playground
Multi-file interactive code runner, editor tabs, and terminal console output for components with live render sandbox, syntax highlighting, and test execution.
Code — Multi-Language Tabs
code-tabs-multi-language
Code sample switcher with a language tab row, a copy control reporting its own success state, and a caption line naming the endpoint the sample calls.
Code — Terminal Session
code-terminal-session
Terminal transcript that types itself out line by line on mount, showing prompts, output, and a success summary, and rendering instantly under reduced-motion.
Cold Chain Temp Monitor
cold-chain-temp-monitor
Refrigerated pharmaceutical & perishable cargo IoT temperature logger and excursion monitoring with multi-reading time-series trend chart, upper/lower threshold guidelines, probe logging history table, and critical excursion alert protocol.
Column Profiling Summary
column-profiling-summary
Pandas Profiling and ydata style exploratory data analysis (EDA) column profiling summary with dataset metrics, distribution histograms, quantile box plots, and categorical frequency breakdowns.
Command Palette
command-palette
Header-grade search/command palette. Bundles the slim trigger button (with platform-aware ⌘K/Ctrl-K kbd hint) AND the modal CommandDialog into one block; consumers drop it once and the global keyboard shortcut wires itself. Takes a `groups` array of `{ heading, items: [{ label, hint, icon, onSelect }] }` and calls `onSelect`. `showTrigger={false}` hides the inline button so the consumer can control open state from elsewhere.
Commercial Invoice Generator
commercial-invoice-generator
B2B cross-border commercial invoice generator with HTS tariff codes, EORI tax identifiers, and CIF valuation totals.
Commute Reimbursement Claims
commute-reimbursement-claims
Monthly commuter transit pass, mileage, and EV charging expense claim reimbursement portal with IRS pre-tax allowance metrics, claim submission form with receipt dropzone, and claims history ledger.
Comparison — Migration Path
comparison-migration-path
Migration-focused comparison pairing what a team keeps, what changes, and what is retired when moving from an existing tool, with an effort estimate per row.
Comparison Table
comparison-table
Plan comparison feature matrix (Starter / Pro / Enterprise) with a sticky header row, monthly/yearly ToggleGroup that flips prices live, grouped feature rows (Core / Collaboration / Support), and check / minus / short-value cells. The Pro column is highlighted with a "Popular" badge and a bg-primary/5 tint down the whole column.
Comparison — Versus Alternatives
comparison-vs-alternatives
Two-column comparison setting this product against the status quo row by row, each line naming the mechanism rather than scoring the competitor.
Compensation Band Benchmarking
compensation-band-benchmarking
Pave/Levels.fyi style engineering salary and equity compensation band visualizer with P25, P50, P75, P90 percentile ranges, level progression matrix, compa-ratio diagnostics, and certified pay equity audit.
Compliance Sanctions Screener
compliance-sanctions-screener
AML/KYC OFAC, Politically Exposed Persons (PEP), and global sanctions list screening workbench with fuzzy match threshold tuning, real-time entity inspection modal, and prohibited match enforcement.
Compliance Soc2 Readiness
compliance-soc2-readiness
Vanta/Drata-style SOC 2 Type II, ISO 27001, and HIPAA compliance readiness dashboard with framework selector tabs, audit readiness scorecards, 4 control pillar health bars, continuous automated evidence test tables with verified artifact badges, and auditor trust center portal controls.
Sales Contact Form
contact-01
Interactive enterprise solutions architect dispatch workbench with track selection, live hub timezones, SLA badges, and ticket generator.
Contact Us
contact-us
Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email / phone / office) and a live Mapbox map pinned to your office (pass access-token + location; falls back to a placeholder without a token). Right: a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state. Emits "submit" with the payload.
Content Calendar Matrix
content-calendar-matrix
Editorial publishing calendar and content matrix with pacing KPI summary cards, channel filter tabs, month picker, publication status pipeline, author avatars, SEO keywords, and contextual action menus.
Contract Redline Diff
contract-redline-diff
Ironclad and DocuSign CLM style legal contract redline diff viewer with clause additions, deletions, liability super-cap shift analysis, and attorney comments negotiations sidebar.
Contractor Timesheet Approval
contractor-timesheet-approval
Deel/Remote style international contractor invoice approval, hourly timesheet verification against GitHub PRs & deliverables, multi-currency payout calculation, overview KPI metrics, and itemized daily timesheet slide-over drawer.
Conversion Funnel
conversion-funnel
Horizontal conversion funnel with count strip above the SmoothFunnel chart and a stage-name + retention-from-previous footer below. Works for hiring (applied → hired), e-commerce (sessions → purchases), onboarding (signed up → activated). 3-6 stages. Theme-aware via OKLCH chart tokens.
Cookie Consent
cookie-consent
Consent trio covering the whole banner-to-dialog flow: a full-width banner with inline preferences, a bottom bar with equally weighted accept, reject, and manage actions, and a granular preferences dialog with per-category purpose, retention, and switches.
Cookie Consent Banner
cookie-consent-banner
GDPR-style cookie consent banner with two variants: a full-width bottom bar and a compact card. Customize expands inline preferences with Necessary (always on), Analytics, and Marketing switches. Accept, Reject, and Save dismiss with a 150ms fade.
Cookie Consent — Bar
cookie-consent-bar
Bottom consent bar offering accept, reject, and manage as equally weighted actions, with a one-line statement of what is actually stored.
Cookie Consent — Preferences
cookie-consent-preferences
Granular consent dialog listing each cookie category with its purpose, retention, and a switch, with strictly-necessary shown as locked rather than hidden.
Cost Breakdown
cost-breakdown
Three-panel spend dashboard. Stacked weekly bar chart over time on top, plus two side-by-side categorical pies below (share by lane / share by carrier). Theme-aware via registry tokens.
Course Curriculum Outline
course-curriculum-outline
LMS and video course syllabus block: hero header with course metadata, instructor profile, rating, progress bar, and action buttons, collapsible modular section accordions with lesson durations, type badges, and completion checks, plus a sidebar with verifiable certificate preview, downloadable course resources, and student community access.
Crm Sales Call Workbench
crm-sales-call-workbench
Live CRM sales call console with audio waveform dialer, real-time AI live transcription, objection handling battlecards, and CRM note logger.
Cron Job Scheduler
cron-job-scheduler
Temporal and AWS EventBridge style scheduled tasks and background cron worker manager with KPI overview, status indicators, execution details, action menus, and an interactive cron expression builder with upcoming run previews.
Crypto Wallet Portfolio
crypto-wallet-portfolio
Coinbase and Phantom-style multi-asset crypto holdings dashboard: treasury header with address copy and network badge, portfolio balance hero with 24h PnL and multi-asset allocation bar, asset holdings table with real-time token metrics, and an interactive quick swap calculator.
Conversion CTA
cta-01
Interactive developer CTA section with live framework switcher, interactive CLI installation terminal, 1-click clipboard copy, and production guarantees.
CTA — Final Band
cta-final-band
Closing call to action centred on a bordered band, pairing the primary action with a secondary path and a line of proof for readers not ready to commit.
Cta Gradient Glow Action
cta-gradient-glow-action
Conversion call-to-action block with ambient atmospheric radial glow, multi-package manager terminal installation strip, and open source trust assurances.
Cta Split Demo Request Modal
cta-split-demo-request-modal
Split-pane enterprise demo request workbench with benefit highlights, team size selectors, framework focus filters, and interactive submission feedback.
CTA — Split Panel
cta-split-panel
Two-path closing section splitting self-serve from sales-assisted, each side stating who it suits and what happens next so the choice is not a guess.
Currency Converter Widget
currency-converter-widget
Wise and Revolut-style real-time multi-currency exchange calculator and transfer fee estimator with live mid-market rates, transparent fee breakdown rail, bank savings comparison, and quick-rate ticker.
Customer Journey Map
customer-journey-map
Visual customer lifecycle funnel and journey map tracking user touchpoints across Acquisition, Activation, Monetization, and Retention. Features conversion rates, friction analysis, sentiment gauges, growth experiment notes, and cross-stage velocity summaries.
Customer Metrics Band
customer-metrics-band
Customer velocity and ROI telemetry band with cohort segmentation (Enterprise vs High-Growth), 4 verified KPI metric tiles, and deep-dive impact inspector.
Customer Reviews
customer-reviews
Dedicated customer reviews section with ratings breakdown, interactive distribution bars, photo gallery with thumbnail overlay, filter chips, sort options, detailed verified buyer cards with attached photos, reactive helpful counter, and review submission form.
Customs Clearance Tracker
customs-clearance-tracker
International import/export customs declaration tracker featuring CBP Form 7501 reference, 5-stage clearance progression stepper, tariff and regulatory fee breakdown (MPF/HMF), and HTSUS declared commodity line items table.
Daily Standup Summary
daily-standup-summary
Slack and Geekbot style async engineering daily standup summary with squad pulse cards, critical blocker alert callout, structured yesterday/today/blockers submission entries, reaction counts, and thread actions.
Dashboard Kpis
dashboard-kpis
Four-tile KPI row. Each tile is an inline Card: label, big number, signed trend pill, and a sparkline. No items prop — edit the tiles in place after install.
Dashboard Layout
dashboard-layout
Full dashboard shell — collapsible sidebar + sticky topbar (sidebar trigger, breadcrumb, theme switch, notifications) + main content children. Drop it around a page: `<DashboardLayout>{page}</DashboardLayout>`.
Data Contract Governance
data-contract-governance
PayPal and OpenDataContract style Data Contracts specification editor, breaking change validator, and producer/consumer SLA agreements dashboard with YAML inspector, schema field explorer, live breaking change linter, and registered consumer status.
Data Mesh Domain Catalog
data-mesh-domain-catalog
Zhamak Dehghani Data Mesh architecture domain catalog, Data Products directory, polyglot output ports (Snowflake, Kafka, GraphQL, S3), and federated computational governance SLA scorecards.
Data Product Card
data-product-card
Data Mesh architectural Data Product Card (DPC) featuring SLA compliance health, multi-modal output ports (Snowflake, Kafka, GraphQL, Parquet S3), domain ownership, consumer counts, and access request triggers.
Data Quality Metrics
data-quality-metrics
Great Expectations and Soda style automated data quality assertions, schema validation, and drift detector dashboard: top header with overall quality score and run triggers, 4 assertion metric cards, data quality assertions table with category filters, and an interactive anomaly inspector drawer with SQL quarantine remediation.
Data Retention Policy Manager
data-retention-policy-manager
Snowflake and BigQuery style automated data retention policy manager, partition TTL scheduler, and cold storage archive tiering with cost impact metrics, lifecycle action execution, and compliance tracking.
Database Migration Schema Diff
database-migration-schema-diff
Prisma, Flyway, and Liquibase database migration runner with pending DDL visual diffs, rollback scripts, schema integrity telemetry, and execution history.
Dbt Model Graph
dbt-model-graph
dbt Cloud style data modeling DAG dependency graph, compiled SQL view, and model documentation with lineage tree, Jinja/SQL source editor, compiled warehouse query, and column contract test suite.
Decision Matrix Table
decision-matrix-table
Product and architectural decision matrix with dynamic weighted scoring algorithms (Impact, Confidence, Effort, Risk), RICE framework toggle, interactive weight sliders, option creator, multi-dimensional SVG tradeoff radar, and ADR consensus breakdown.
Defi Staking Yield Vault
defi-staking-yield-vault
Nodeka and Uniswap-inspired decentralized finance staking yield vault, liquidity pool APY calculator, and reward claimer with live TVL metrics, multi-tier lockup multipliers, and real-time yield simulator.
Delivery Proof Card
delivery-proof-card
Last-mile Electronic Proof of Delivery (ePOD) receipt featuring customer signature canvas readout, high-contrast drop-off photo with GPS geostamp HUD overlay, recipient & courier metadata, and itemized package manifest.
Delivery Tracking Map
delivery-tracking-map
Live order delivery route showing courier location, dropoff destination, and real-time ETA countdown.
Demo — Guided Tour
demo-guided-tour
Step-through product tour where next and previous move a highlight across a mocked interface, with a step counter and a skip control.
Demo — Sandbox Panel
demo-sandbox-panel
Interactive sandbox panel where editing a definition field updates a rendered result and a generated query side by side, with a reset control.
Deployment Pipeline
deployment-pipeline
CI/CD deployment history, active environment status, execution stepper, collapsible build log terminal with stdout timestamps, and filterable deployments table.
Disaster Response Map
disaster-response-map
Incident management map with wildfire hazard perimeter, shelter capacities, and emergency staging points.
Dispatch Assignment Board
dispatch-assignment-board
Last-mile route dispatching, delivery driver stop sequencing, and vehicle payload load balancing: live dispatch overview KPIs, zone filtering, AI route auto-sequencing, and driver route cards with vehicle payload load balancing, live progress tracking, interactive stops timeline, driver communications, and telemetry actions.
Dns Record Manager
dns-record-manager
Cloudflare/Vercel style DNS records management table and nameserver inspector with type badges, proxy toggle, copyable values, zone file exporter, and add/edit record panel.
Doctor Appointment Scheduler
doctor-appointment-scheduler
Zocdoc and Epic style specialist doctor appointment booking scheduler: physician profile hero card with rating, clinic address, and insurance badges, interactive visit type selector, reason for visit dropdown, date carousel with daily availability indicators, morning and afternoon time slot picker, live appointment summary readout with copay estimate, patient registration inputs, and booking confirmation flow.
Driver Inspection Checklist
driver-inspection-checklist
Commercial vehicle Driver Vehicle Inspection Report (DVIR) pre-trip and post-trip safety audit. Features vehicle odometer & ELD telemetry header, 5 grouped FMCSA safety inspection categories (Brakes & Air Pressure, Tires & Wheels, Lights & Electrical, Engine & Fluids, Emergency Safety Gear) with Pass/Fail/N/A segmented controls, dynamic defect report card with Out-of-Service severity classification, defect notes, photo dropzone, driver CDL certification signature pad, and post-submission compliance receipt.
Email Campaign Composer
email-campaign-composer
High-craft marketing email broadcast designer, audience segment selector, AI subject line optimizer, A/B testing split, live multi-device newsletter preview, and deliverability scorecard.
Email Template Previewer
email-template-previewer
Resend and Klaviyo style marketing email designer preview with viewport switcher, subject line tester, deliverability & spam score analyzer, and live test dispatch modal.
Employee Org Chart Tree
employee-org-chart-tree
Interactive organizational hierarchy tree with manager reporting lines, team counts, multi-level expandable branches, department filter pills, employee search, and an employee profile quick info drawer.
Employee Pulse Survey Results
employee-pulse-survey-results
Culture Amp style company pulse and eNPS engagement survey results dashboard featuring executive KPI scorecards, department sentiment heatmaps, and priority engagement drivers with action items.
Empty States
empty-states
Gallery of six zero-data cards — no data, no search results, first-use, error recovery, no access, and sync complete — each with a matching isometric illustration, title, copy, and action pair. `variant` picks a single card, `size` compacts it, `layout` switches grid vs list. Override title, description, image, labels, hrefs, and callbacks. Pass `image=""` to hide the art.
Enterprise Workspace Switcher
enterprise-workspace-switcher
Multi-organization workspace switcher dropdown and creation modal inspired by Portico/Riter. Features active organization display with emerald ring, 3 tier levels (Enterprise Scale, Pro Team, Free Sandbox), team role badges, member counts, and an organization creation dialog with dynamic slug preview, region selector, and tier plan radios.
Environment Variables Manager
environment-variables-manager
Vercel and Supabase style environment variables and secrets manager with environment scoping, mask/reveal toggles, bulk import, and inline editing.
404 Not Found
error-404
Full-page 404 with an isometric missing-page illustration, HTTP code, headline, and Back to home + Contact support. Prop-driven: pass title, description, image, action labels, hrefs, and layout (`page` | `contained`). Pass `image=""` to hide the art.
500 Server Error
error-500
Full-page 500 with an isometric crashed-server illustration, HTTP code, headline, and Try again + Back to home + Contact support. Prop-driven: pass title, description, image, action labels, hrefs, and layout (`page` | `contained`). Pass `image=""` to hide the art.
Error Page
error-page
Status-screen set with prop-driven 404 and 500 pages plus a four-variant gallery (404, 500, 403, and maintenance) with single-screen, compact-size, and callback controls.
Error Pages
error-pages
Pack of four status screens — 404, 500, 403, and 503 — each with a matching isometric illustration, code, copy, and actions. `variant` picks a single screen, `size` compacts it. Override title, description, image, code, tag, labels, hrefs, disabled flags, and callbacks. Pass `image=""` to hide the art.
Event Calendar Dashboard
event-calendar-dashboard
Month-view event calendar with stats strip, drag/shift range select, side rail (selected day or range summary), upcoming list, and per-cell/per-event context menus. events / onEventsChange binds the source of truth; eventTypes config maps each type key to its label/icon/color theme so swapping the visual palette is one prop. Built on the use-month-grid headless hook.
Event List
event-list
List of upcoming events in a SectionCard. Spell rows out inline with DataListItem — title + Clock date + optional status Badge per row.
Exit Intent
exit-intent
Exit-intent dialog trio that fires once per session when the pointer leaves toward the browser chrome: an extended-trial offer, a monthly-notes newsletter capture, and a one-question exit survey.
Exit Intent — Newsletter
exit-intent-newsletter
Exit-intent dialog capturing an email for the monthly notes rather than pushing a discount, with the last issue named so the ask is concrete.
Exit Intent — Offer
exit-intent-offer
Dialog triggered when the pointer leaves toward the browser chrome, offering an extended trial once per session, with a dismissal that is remembered.
Exit Intent — Survey
exit-intent-survey
One-question exit survey asking what the visitor did not find, with preset answers, an optional free-text field, and a thank-you state that closes itself.
Exit Interview Survey
exit-interview-survey
Structured employee offboarding survey with department sentiment analysis, departure drivers, 5-star experience ratings, qualitative feedback textareas, and a knowledge handover & asset return checklist.
Accordion FAQ
faq-01
Interactive architecture knowledge base and FAQ section with real-time keyword search, category topic filtering, and helpfulness voting.
FAQ — Categorized Tabs
faq-categorized-tabs
Question set grouped behind category tabs, each panel holding its own accordion with a count badge, for support pages where one flat list would run past thirty entries.
FAQ — With Contact Sidebar
faq-contact-sidebar
Accordion of answers beside a sticky support card offering a named contact, response-time expectation, and a link to the docs, for the questions a page cannot pre-empt.
Faq Searchable Accordion Workbench
faq-searchable-accordion-workbench
Searchable FAQ workbench with real-time query filtering, category switcher, collapsible accordions, and community support links.
FAQ — Two Column
faq-two-column
Frequently asked questions split across two columns of independent accordions, so a long answer in one column never pushes the questions beside it out of alignment.
Features — Accordion with Media
feature-accordion-media
Single-open accordion of features beside a media pane that follows the open item, collapsing to inline panes on narrow screens where a side pane would be unreadable.
Feature Deep-Dive — Alternating Rows
feature-alternating-rows
Classic zig-zag feature deep-dive: three full-width rows alternating copy and visual, each with an eyebrow, headline, checklist, inline link, and a bordered preview panel built from real primitives.
Feature Bento Ai Copilot
feature-bento-ai-copilot
AI agent copilot bento workbench with model tuning sliders, live inference streaming, and token speed telemetry.
Feature Code Preview Split
feature-code-preview-split
Split-pane developer workbench featuring live code generation across Vue 3.5, React 19, and Tailwind v4 tokens synchronized with an interactive component canvas.
Feature Comparison Slider
feature-comparison-slider
Interactive architecture comparison slider workbench contrasting Monolithic npm packages against UIPKGE unbundled code ownership.
Feature Drag Drop Organizer
feature-drag-drop-organizer
Interactive dashboard block layout organizer with position reordering, visibility toggling, and JSON schema export.
Feature Flags Manager
feature-flags-manager
LaunchDarkly and PostHog style feature flags management dashboard: top header with search and create flag button, summary KPI metric cards, master status switch, percentage rollout indicators, targeting rules summary, environment statuses, and action menus.
Features — Full-Bleed Rows
feature-full-bleed-rows
Alternating full-bleed feature bands on contrasting surfaces, each pairing a headline and supporting detail with an edge-to-edge visual that runs past the container.
Feature Hover Tilt Cards
feature-hover-tilt-cards
3D perspective tilt workbench cards with dynamic mouse tracking, interactive token efficiency sliders, spring impulse testing, and dual-framework parity inspect.
Feature Interactive Api Curl Builder
feature-interactive-api-curl-builder
Interactive API cURL builder and live payload testing sandbox with multi-language code export.
Feature Interactive Tabs
feature-interactive-tabs
Master-detail architectural feature workbench with interactive source snippets, copy action, telemetry stats, and verified technical checks.
Feature Matrix Table Dense
feature-matrix-table-dense
Dense Linear-style technical specification matrix table with collapsible sections and search filtering.
Feature Metric Growth Stepper
feature-metric-growth-stepper
Interactive scale progression workbench showing infrastructure capacity from Seed to Global Enterprise.
Feature Scroll Spy Walkthrough
feature-scroll-spy-walkthrough
Step-by-step 4-phase developer workflow progression with sticky live code terminal sandbox and instant stage inspector.
Features — Segmented Compare
feature-segmented-compare
Segmented control switching one feature section between two operating modes, with the capability list, constraints, and a recommendation line changing per mode.
Features — Sticky Media Scroll
feature-sticky-media-scroll
Deep-dive where the visual pins while the copy scrolls beside it, the pinned pane swapping content as each section enters view, degrading to stacked pairs without observers.
Feature Store Registry
feature-store-registry
Feast and Tecton style machine learning feature store registry with entity definitions, low-latency Redis online cache status, Snowflake batch source lineage, feature schema inspection table, throughput metrics, and Python Feast feature view code generator.
Features — Tabbed Deep-Dive
feature-tabbed-deepdive
One feature examined from three angles behind tabs, each panel carrying its own explanation, a constraint the reader should know, and a matching detail panel.
Features — Vertical Tabs
feature-vertical-tabs-pane
Vertical feature tabs where each trigger carries a title and one-line summary, swapping a wide preview pane built from primitives without changing the panel height.
Feature Visual Changelog Diff
feature-visual-changelog-diff
Visual semantic git changelog with unified code diff highlighting and commit verification.
Tabbed Feature Matrix
features-01
Interactive enterprise product feature workbench with live module simulations, dynamic directory filters, real-time payroll calculations, continuous SOC 2 compliance verification, and TypeScript API code viewer.
Features — 2×2 Spotlight
features-2x2-spotlight
Four large feature panels in a two-by-two grid, each with a generous illustration slot built from primitives, a headline, supporting copy, and a quiet inline link.
Features — Checklist Split
features-checklist-split
Two-column feature section pairing a sticky pitch column with a dense two-up checklist of capabilities, each line carrying a short qualifier rather than a marketing adjective.
Features — Dense Icon List
features-icon-list-dense
Compact three-column list of twelve capabilities with small icons and one-line descriptions, for the lower half of a landing page where breadth matters more than depth.
Features — Numbered Grid
features-numbered-grid
Six-cell feature grid drawn with one-pixel dividers instead of cards, each cell led by a monospace ordinal, an icon, a title, and two lines of supporting copy.
Field Inspection Manager
field-inspection-manager
Mobile/Desktop commercial property & equipment site inspection audit manager featuring GPS geostamp telemetry, 4 KPI metric cards, searchable audits table with pass/fail checklist scores, photo evidence thumbnail gallery with interactive lightbox modal, cryptographic sign-off badges, and work order dispatch workflows.
File Manager
file-manager
Storage/files page with breadcrumbs, search, grid/list view toggle, upload action, and a storage meter over hardcoded folders and files.
Fine Tuning Job Monitor
fine-tuning-job-monitor
LLM fine-tuning job telemetry, loss curve convergence tracking, GPU cluster utilization, hyperparameter manifests, and LoRA checkpoint exporter.
Flash Sale Offer Bar
flash-sale-offer-bar
Limited-time flash sale countdown deal bar with stock claim progress meter, tiered multi-buy volume discounts, and 1-click cart activation.
Flashcard Study Deck
flashcard-study-deck
Anki and Quizlet style spaced-repetition flashcard study deck with smooth 3D flip card interaction, WCAG 2.2 accessibility curriculum, hint drawer, mastery percentage tracking, keyboard shortcuts, and SM-2 interval rating buttons.
Fleet Vehicle Map
fleet-vehicle-map
Live fleet map with vehicle markers. Select a unit to fly the camera and read status.
Flight Radar Map
flight-radar-map
Real-time commercial and cargo aviation radar with aircraft altitudes, ground speeds, callsigns, and flight telemetry.
Floor Plan Explorer
floor-plan-explorer
Architectural unit floor plan inspector and residential layout explorer with 2D CAD-styled blueprint canvas, interactive room highlight pins, dimensional callouts, room breakdown specs, and building unit availability table.
Footer
Site footer collection: multi-column newsletter, oversized brand statement, dense developer grid, mega newsletter, single-row minimal, and dense sitemap variants — each spelled out inline so copy lives in one place.
Multi-Column Footer
footer-01
Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.
Footer — Brand Statement
footer-brand-statement
Footer led by an oversized brand statement and mission line, with three link columns set beneath it and a legal row carrying certifications and a contact address.
Footer Developer Dense Grid
footer-developer-dense-grid
Dense developer footer with multi-column categorized links, live operational status beacon, and social triggers.
Footer — Mega with Newsletter
footer-mega-newsletter
Large footer pairing a newsletter signup and status line with five link columns, a social row, and a legal bar carrying the copyright and a compliance badge.
Footer — Minimal Row
footer-minimal-row
Single-row footer carrying the wordmark, a short inline link list, social icons, and the copyright line, for pages that should end quietly.
Footer — Dense Sitemap
footer-sitemap-dense
Sitemap-style footer with six tightly-set link columns, a region and currency selector row, compliance marks, and a status indicator reporting live uptime.
Form Layouts
form-layouts
Structured create/edit entity form ("New project"): stacked SectionCards for project details (name with live slug preview, description with char counter), configuration (visibility Select, start date, budget), and access (link vs restricted RadioGroup, notification/comment Switch rows) with a sticky-feel footer bar. Create stays disabled until the name is filled; validation hints appear under empty required fields after the first submit attempt.
Freelance Work For Hire Contract
freelance-work-for-hire-contract
Independent contractor Master Services Agreement (MSA) with work-for-hire IP assignment, payment milestones, kill fee clauses, and electronic signature workflow.
Freight Quote Calculator
freight-quote-calculator
Multimodal Air, Ocean, and Ground freight rate estimator with CBM volumetric weight calculation, dynamic route pricing, value-added services, and live comparison quotes.
Frequently Bought Together
frequently-bought-together
E-commerce frequently bought together bundle builder with interactive product preview cards, checkbox selection, dynamic bundle discount calculation, and one-click cart checkout.
Gift Card Balance Checker
gift-card-balance-checker
Customer storefront gift card balance lookup, live digital card passbook, quick fund reloading, and complete redemption audit history ledger.
Github Oss Traction Band
github-oss-traction-band
Open source community traction and velocity band with real-time star metrics, recent releases changelog feed, and quickstart CLI install terminal.
Global Edge Network
global-edge-network
Cloudflare Radar and Vercel Edge style infrastructure console with real-time anycast telemetry, interactive DottedMapChart with Bezier flow corridors, P95 latency HUD metrics, and live edge node routing table.
Graphql Query Explorer
graphql-query-explorer
Apollo and GraphiQL style GraphQL query builder and response inspector with schema documentation sidebar, syntax-highlighted query & variables editor, query history presets, execution tracing, and formatted JSON response viewer.
Guardrails Safety Scanner
guardrails-safety-scanner
NVIDIA NeMo Guardrails and LlamaGuard style input/output safety scanner with real-time prompt injection detection, PII redactor, telemetry metrics, and configurable safety policy enforcement table.
Habit Streak Tracker
habit-streak-tracker
GitHub style 52-week contribution habit heatmap, flame streak counter, consistency metrics, and daily completion tracker with 7-day mini checkbox strip and progress bars.
Header
Site header collection: sticky top bar, dismissible announcement stack, centered-logo split, floating pill, full-width mega menu, inline search with command palette, and a transparent-over-hero scroll variant — each with a mobile sheet fallback.
Sticky Top Navbar
header-01
Sticky marketing top-bar. Brand mark on the left, five inline anchor links in the centre on desktop, "Sign in" + primary trial CTA on the right. Below the md breakpoint the right side collapses into a hamburger that opens a right-side Sheet with the same links and CTAs stacked. Translucent background uses backdrop-blur so content can scroll behind it.
Header — Announcement Stack
header-announcement-stack
Two-tier site header: a dismissible announcement strip above a sticky navbar, where dismissing the strip collapses it and leaves the navbar flush against the viewport top.
Header — Centered Logo
header-centered-logo
Symmetrical navbar with the wordmark centred between two nav halves, a utility cluster on the right, and a mobile layout that collapses the split into a single sheet trigger.
Header — Floating Pill
header-floating-pill
Detached pill navbar that floats above the page with a blurred surface, a sliding active indicator that tracks the current link, and a compact CTA on the right.
Header — Mega Menu
header-mega-menu
Navbar whose product and resources items open a full-width mega panel of grouped, described links plus a highlighted feature card, keyboard navigable and closing on Escape.
Header — Inline Search
header-search-command
Navbar with an inline search trigger that opens a command palette on click or ⌘K, listing grouped results with keyboard hints alongside the usual nav links and CTA.
Header — Transparent Over Hero
header-transparent-scroll
Marketing navbar that starts transparent over the hero and fades in a bordered, blurred surface once the page scrolls, with a nav row, theme-neutral CTA pair, and a mobile sheet.
Hero
Hero section collection with eleven interchangeable variants: metric showcase, 3D tilt canvas, ASCII terminal stream, bento preview grid, developer terminal, interactive globe nodes, SaaS metrics dashboard, split device mockup, typing command center, video walkthrough modal, and glowing waitlist.
Metric Showcase Hero
hero-01
Two-column hero with badge eyebrow, large headline, supporting copy, primary + outline CTAs, social proof row, and a collage of three rotated KPI cards (active users / uptime / onboarding queue) on the right.
Hero 3d Tilt Interactive Canvas
hero-3d-tilt-interactive-canvas
Hero section with hardware-accelerated 3D tilt perspective card, specular light glare, and multi-layer z-depth primitives.
Hero Ascii Terminal Stream
hero-ascii-terminal-stream
Retro-futuristic ASCII terminal stream hero section with command runner and AST telemetry logs.
Hero Bento Preview Grid
hero-bento-preview-grid
Asymmetric 3-column bento hero section with interactive OKLCH palette customizer, dual-framework parity toggle, bundle bloat calculator, and edge latency telemetry.
Hero Developer Terminal
hero-developer-terminal
Developer-first hero section with split value proposition and an interactive live CLI terminal sandbox with preset command switching and copy controls.
Hero Globe Interactive Nodes
hero-globe-interactive-nodes
Global edge latency simulation hero with interactive PoP node inspection and real-time telemetry.
Hero Saas Metrics Dashboard
hero-saas-metrics-dashboard
High-impact SaaS hero section with interactive timeframe filtering, live revenue and workload KPIs, and dynamic telemetry area chart.
Hero Split Device Mockup
hero-split-device-mockup
Dual viewport device mockup hero with interactive viewport controls and real-time state synchronization.
Hero Typing Command Center
hero-typing-command-center
Interactive CLI command center hero with animated execution simulator, output logs, and quick workflow presets.
Hero Video Modal Walkthrough
hero-video-modal-walkthrough
Product walkthrough hero section with interactive video modal player, chapter timestamps navigation, playback speed controls, and social proof.
Hero Waitlist Glow
hero-waitlist-glow
High-conversion early access waitlist hero with role tracks, dynamic live queue spot generator, launch countdown clock, and referral booster.
Hotel Booking Reservation
hotel-booking-reservation
Luxury hotel room booking and reservation widget with interactive date range picker, guest & room steppers, room upgrade checkboxes, live reactive pricing breakdown, and instant reservation checkout.
How It Works — Arrow Flow
how-it-works-arrow-flow
Four-stage horizontal flow joined by drawn SVG arrows, each stage carrying an icon tile, a short label, and the artefact it produces, wrapping to a vertical rail on narrow screens.
How It Works — Before & After
how-it-works-before-after
Two-column process contrast setting the old workflow against the new one step for step, with matched row heights so the saving at each stage reads at a glance.
How It Works — Scroll Stepper
how-it-works-scroll-stepper
Scroll-driven walkthrough where a sticky progress rail tracks which step is in view while the step copy scrolls past, falling back to a plain list without IntersectionObserver.
How It Works — Three Steps
how-it-works-steps
Horizontal three-step explainer with numbered markers on a connector rail, per-step icon, body copy, and a time estimate, closing on a primary + ghost CTA row.
How It Works — Tabbed Steps
how-it-works-tabbed-steps
Step explainer where a vertical tab list of stages swaps a paired detail panel showing the action, the expected result, and a primitive-built screen for that step.
How It Works — Vertical Timeline
how-it-works-timeline
Vertical numbered timeline with a continuous rail, per-stage status badge, outcome bullets, and a paired detail card — for onboarding or implementation narratives that need more room than a three-up row.
Hub Locator Map
hub-locator-map
Global hub locator. Pins on a Mapbox map with a short location list and fly-to on select.
Immunization History
immunization-history
Digital vaccine record passport and clinical immunization history: SMART Health Card verifiable credential with cryptographic signature, active protection summary chips, detailed CDC/WHO vaccine administration table with CVX codes and lot tracking, and travel health advisory alerts.
Import Wizard
import-wizard
CSV import flow in a SectionCard: four-step state machine (Upload → Map fields → Preview → Result) with an interactive Stepper, auto-mapped column targets carrying confidence badges, required-field validation that gates the footer action, flagged-cell highlighting in the preview table, and a success/partial result screen. Data is stubbed post-parse — wire the file reader of your choice.
Inbox
Three-pane mail surface. Left rail: Compose button, folders (Inbox/Starred/Sent/Drafts/Spam/Trash) with unread counts, colour-coded labels with totals. Middle: searchable message list with sender, subject, preview, labels, attachment glyphs, star toggle, smart timestamps. Right: reader pane with subject, from/to, body, attachment chip, reply/forward/archive actions. Stateful demo — swap `mails` for your data source.
Influencer Campaign Card
influencer-campaign-card
Creator partnership management card with verified creator hero profile, multi-channel reach demographics, 4-column campaign telemetry HUD, contract deliverables checklist with live asset telemetry, and affiliate promo code ROI tracker.
Insurance Eligibility Checker
insurance-eligibility-checker
Real-time health insurance eligibility and benefits verification dashboard: patient member demographics, active payer status, individual deductible and out-of-pocket maximum progress trackers, primary care and specialist copay benefit cards, category-level coverage breakdown table with in/out-of-network rates, and Medicare secondary coordination of benefits.
Integrations — Connector Status
integrations-connector-status
Connector health table listing each integration with its auth method, sync cadence, last successful run, and a status pill, plus a summary band counting healthy and degraded connectors.
Integrations Directory
integrations-directory
App marketplace surface: functional search, category chips with counts and an installed-only switch above a responsive grid of integration cards (logo tile, one-line blurb, author row, install/connected footer). Clicking a card opens a detail dialog with permissions; pass `featuredId` to render that dialog body as an always-visible panel. Stateful demo — swap the stub catalog for your source.
Integrations — Featured Pairs
integrations-featured-pairs
Three promoted integrations, each a card pairing the service with what the connection actually does, the three setup steps it takes, and its live connection state.
Integrations — Hub Diagram
integrations-hub-diagram
Radial integration diagram: a central platform node connected by drawn SVG spokes to eight orbiting service nodes, with a legend splitting sources from destinations.
Integrations — Logo Grid
integrations-logo-grid
Integration marquee grid: category chips filter a wall of square logo tiles with hover labels, over a count line and a request-an-integration prompt.
Integrations — Search Directory
integrations-search-directory
Searchable integration directory: a live filter field above category-grouped rows carrying a monogram, blurb, and auth type, with an empty state when nothing matches.
Inventory Reorder Forecast
inventory-reorder-forecast
Supply chain inventory replenishment planner with lead-time demand forecasting, 4 forecasting KPI metric cards, safety stock triggers, multi-SKU demand table, and automated purchase order generation.
Invite Members
invite-members
Team invite surface in a SectionCard. Header carries a live seats counter tinting warning at ≥90% capacity. Compose takes one email or a comma/space-separated paste — several addresses queue as removable chips first, plus an Admin/Editor/Viewer role Select and basic validation with a destructive error state. Rows show avatar initials, email, role/status badges (pending/accepted/expired), sent-ago timestamps, Resend (re-activates expired invites) and Revoke behind a two-click inline confirm. Self-contained stateful demo — swap DEFAULT_INVITES for your data source.
Invoice Creator Wizard
invoice-creator-wizard
Square/Stripe-style interactive invoice builder with itemized tax, discount calculation, dynamic line items, client presets, and a real-time paper document preview.
Invoices List
invoices-list
Invoice history page: header with a New invoice action, a three-card summary strip (total outstanding, paid this month, overdue), and an invoice table pairing monospace invoice numbers with avatar clients, issue/due dates, tabular-nums amounts, color-coded status badges, and a per-row View/Download/Mark-as-paid dropdown, closed by a pagination hint. Data is stubbed inline; swap for your source.
Isochrone Reachability Map
isochrone-reachability-map
Drive-time reachability zones showing 10m, 20m, and 30m commute polygons with workforce population metrics.
Kafka Stream Monitor
kafka-stream-monitor
Apache Kafka & Redpanda topic stream telemetry dashboard: partition offset monitor, leader broker distribution, consumer group lag tracker, and real-time message payload inspector with deserialized JSON viewer.
Knowledge Base Hub
knowledge-base-hub
Self-serve help center and customer documentation hub with hero search, quick topic pills, category cards grid, trending articles, and community support banner.
Lab Results Viewer
lab-results-viewer
Quest and Labcorp style diagnostic lab results report viewer: patient metadata header, clinical attention banner, grouped test panels (Lipid, Glucose, Renal) with LOINC codes, reference range linear scale bars, historical 6-month trend deltas, and doctor clinical impression card with electronic verification.
Last Mile Courier Dispatch
last-mile-courier-dispatch
Last-mile courier dispatch matrix with real-time route progress, ETA telemetry, and Proof of Delivery (POD) logging.
Lead Capture Popup
lead-capture-popup
High-conversion exit-intent discount popup and newsletter lead generator with live ticking countdown timer, emerald value props, star rating social proof, and coupon code reveal.
Leaflet Asset Tracking Map
leaflet-asset-tracking-map
Intermodal cargo container tracking on free Esri satellite tiles — no API key — with shipping lanes, cold-chain sensor status, and geofence state.
Leaflet Delivery Tracking Map
leaflet-delivery-tracking-map
Live order delivery route on free OpenStreetMap tiles — no API key. Courier position, dropoff destination, and ETA telemetry.
Leaflet Disaster Response Map
leaflet-disaster-response-map
Incident management map on free OpenStreetMap/Esri tiles — no API key. Evacuation perimeter rings, shelter capacities, and emergency staging points.
Leaflet Fleet Vehicle Map
leaflet-fleet-vehicle-map
Live fleet map on free OpenStreetMap/Esri tiles — no API key. Select a unit to fly the camera and read status.
Leaflet Flight Radar Map
leaflet-flight-radar-map
Real-time commercial and cargo aviation radar on free OpenStreetMap/Esri tiles — no API key — with curved flight paths, callsigns, and flight telemetry.
Leaflet Hub Locator Map
leaflet-hub-locator-map
Distribution hub locator on free OpenStreetMap tiles — no API key. Coverage rings, capacity badges, and fly-to on select.
Leaflet Isochrone Reachability Map
leaflet-isochrone-reachability-map
Drive-time reachability zones showing 10m, 20m, and 30m commute polygons with workforce population metrics — on free OpenStreetMap/Esri tiles, no API key.
Leaflet Last Mile Courier Dispatch
leaflet-last-mile-courier-dispatch
Last-mile courier dispatch matrix on free OpenStreetMap tiles — no API key. Route progress, ETA telemetry, and Proof of Delivery (POD) logging.
Leaflet Maritime Vessel Map
leaflet-maritime-vessel-map
Automatic Identification System (AIS) vessel tracking on free OpenStreetMap/Esri tiles — no API key. Container ships, tankers, shipping lanes, and anchorage status.
Leaflet Neighborhood Walkscore Card
leaflet-neighborhood-walkscore-card
Real estate neighborhood intelligence widget on free OpenStreetMap/Esri tiles — no API key. Walk Score, Transit Score, Bike Score, categorized points of interest (transit, dining, schools, parks), a 15-minute walk radius, and commute time estimator.
Leaflet Property Boundary Map
leaflet-property-boundary-map
Cadastral parcel boundary polygons with zoning classes, lot acreage, and assessed valuation on free Esri satellite tiles — no API key.
Leaflet Sales Territory Map
leaflet-sales-territory-map
Sales territory map on free OpenStreetMap/Esri tiles — no API key. Region boundary polygons and rep pins with quota attainment; select a territory to fly the camera.
Leaflet Store Locator Map
leaflet-store-locator-map
Store locator on free OpenStreetMap tiles — no API key. Pins with bound popups, distance/hours/amenities list, fly-to on select.
Leaflet Threat Map Radar
leaflet-threat-map-radar
Live threat radar on free OpenStreetMap/Esri dark tiles — no API key. Attack arcs hit edge PoPs under a rotating sweep; click an origin to isolate its vector.
Lease Agreement Sign
lease-agreement-sign
DocuSign-style digital residential lease agreement signature and review workflow with terms summary, interactive initial checkpoints, sticky signature action sidebar, and cryptographic audit execution.
Lesson Video Player
lesson-video-player
Online lecture video player with playback speed selector, interactive timestamped transcript, and note-taking drawer.
Llm Eval Benchmark Matrix
llm-eval-benchmark-matrix
LangSmith/Braintrust/DeepEval style LLM evaluation scorecard, automated golden dataset assertions, and model benchmark matrix with faithfulness, answer relevancy, context recall metrics, and evaluator judge reasoning inspection.
Loan Calculator
loan-calculator
Interactive mortgage and commercial loan amortization schedule calculator with dynamic sliders, loan type presets, extra payment impact simulation, principal vs interest visual ratio bar, and year-by-year amortization breakdown table.
Logo Cloud Categorized Grid
logo-cloud-categorized-grid
Categorized 4-industry logo & enterprise customer workbench with scale metrics, category filter tabs, and full testimonial modal inspect.
Logo Cloud — Grayscale Hover
logo-cloud-grayscale
Customer logo wall rendered in muted monochrome that resolves to full contrast on hover, with a headline count and a segment line beneath.
Logo Ticker Infinite
logo-ticker-infinite
Infinite marquee brand partner ticker with sector category filters, speed and pause controls, and interactive telemetry hover cards.
Logo Clouds
logos
Logo-cloud section set: a static trusted-by grid, single- and tri-row infinite marquees, a categorized filter grid with testimonial modal, a grayscale-hover wall, and a ticker with sector filters and telemetry hover cards.
Static Logo Grid
logos-01
Customer-logo cloud strip. "Trusted by teams at" eyebrow over a responsive grid of six grayscale wordmarks (2 / 3 / 6 columns by breakpoint). Each logo is an inline SVG sitting on currentColor so the muted-foreground → foreground hover swap works. Ships with placeholder marks — swap the SVGs with real customer logos before shipping.
Single Marquee Logos
logos-02
Single-row infinite marquee of customer logos. Track is duplicated and translated -50% on a 30s linear loop for a seamless seam; edges fade out via CSS mask-image; pauses on hover; respects prefers-reduced-motion.
Tri-Row Marquee Logos
logos-03
Three-row logo marquee with alternating scroll directions and slightly different speeds (32s left, 26s right, 38s left) so the eye does not lock onto a single rhythm. Edges fade out via CSS mask-image; the whole section pauses on hover; respects prefers-reduced-motion.
Loyalty Rewards Tier Hub
loyalty-rewards-tier-hub
Sephora and Starbucks style VIP customer loyalty tier dashboard, points wallet, and rewards catalog. Features a customer hero card with points balance, reward valuation, and tier progress tracker, 4 VIP privilege perks with unlock statuses, a 3-item redeemable rewards catalog grid, and a recent points earnings & redemption history ledger.
Maintenance Request Ticket
maintenance-request-ticket
Resident repair and facility work order submission portal with urgency priority and photo dropzone.
Maritime Vessel Map
maritime-vessel-map
Automatic Identification System (AIS) vessel tracking with container ships, tankers, speed, and anchorage status.
Matrix Swot Analysis
matrix-swot-analysis
Strategic planning 2x2 SWOT analysis matrix (Strengths, Weaknesses, Opportunities, Threats) with dynamic card management, quadrant counters, TOWS strategic initiatives, and PDF/share toolbar.
Media Asset Gallery
media-asset-gallery
Figma/Unsplash style Digital Asset Manager (DAM) with resolution tags, aspect ratio filters, tag chips, color palette inspector, multi-resolution download picker, and slide-over inspector drawer.
Meeting Agenda Notes
meeting-agenda-notes
Linear and Notion style structured meeting document with attendee avatars, timeboxed agenda topics, rich discussion notes, interactive action items checklist, and key decisions log.
Metrics Grid
metrics-grid
Six-tile KPI status grid. Each tile pairs a stat header (count / percentage) with a small pie or horizontal bar chart that breaks the metric down. Different tiles use different chart types so each KPI reads at a glance.
Model Token Cost Optimizer
model-token-cost-optimizer
Helicone and Portkey style AI gateway telemetry, semantic caching hit rates, model routing savings, and latency metrics dashboard with token spend analytics, model allocation breakdown, and active cost optimization rules.
Nda Agreement Generator
nda-agreement-generator
Interactive Non-Disclosure Agreement (NDA) generator and contract customizer with bilateral/unilateral modes, customizable legal covenants, real-time contract parchment preview, and e-signature execution workflow.
Neighborhood Walkscore Card
neighborhood-walkscore-card
Real estate neighborhood intelligence widget with Walk Score, Transit Score, Bike Score, categorized points of interest (transit, dining, schools, parks), and commute time estimator.
Newsletter
Newsletter growth quartet: a slim inline signup band, a filterable issue archive with featured spotlight, centered and split signup forms, and a split section pairing the pitch with a preview of the last issue.
Newsletter — Inline Band
newsletter-inline-band
Slim full-width signup band with an inline field, submit button, subscriber count as proof, and a status line that reserves its own row so confirming never shifts the layout.
Newsletter Issue Archive
newsletter-issue-archive
Substack and Beehiiv style publication archive with issue numbers, read times, subscriber counts, category filtering, search, featured issue spotlight, and subscribe flow.
Newsletter Signup
newsletter-signup
Engineering dispatch and release radar workbench with channel tracks (Architecture, Releases, Security), live archive previews, and subscriber metrics.
Newsletter — Split with Preview
newsletter-split-preview
Signup section pairing the pitch and form with a preview of the last issue — subject line, date, and opening paragraph — so the reader sees what they are subscribing to.
Notification Center
notification-center
Full-page notification center: unread badge, mark-all-read, All/Unread/Mentions tabs with functional filtering, day-grouped rows (Today / Earlier) pairing category icon tiles with titles, bodies, relative timestamps, unread dots and hover actions (mark read, dismiss). Per-tab empty states included; swap `notifications` for your source.
Notifications Popover
notifications-popover
Header-grade notifications panel. Slot-trigger Popover the consumer wraps around their own Bell button. Filter tabs (All/Unread), Today/Earlier groups, category-coloured accent bars, hover-dismiss, mark-all-read, slide-in animation. Slot receives `unreadCount` so the trigger can show a badge.
Onboarding Checklist
onboarding-checklist
Progressive activation checklist card: header with title, an N of M complete counter and a linear Progress bar, tappable task rows with icon tiles, one-line descriptions and chevrons (completed tasks flip to a filled check tile with muted copy), a footer with a Skip for now ghost link and an X dismiss that fades the card out, and a success panel with a glowing check circle at 5 of 5. State is local — wire tasks to your own activation API.
Onboarding Equipment Provisioning
onboarding-equipment-provisioning
Enterprise IT hardware, peripherals, and software license provisioning portal for new hires with primary workstation selection, display and peripheral bundles, security keys, cloud SaaS seats, and courier tracking.
Onboarding Wizard
onboarding-wizard
Multi-step workspace setup flow in a SectionCard: a four-step Stepper (Workspace → Team → Preferences → Done) with check icons on completed steps, a workspace-name input with live URL slug preview, teammate invites as removable email chips with a skip link, preference Switch rows, and a success panel with a glowing check circle. Footer carries Back/Continue actions plus a Step X of 4 counter. Data is stubbed inline — wire your API of choice.
Order Confirmation
order-confirmation
Post-purchase order confirmation & tracking page featuring a success banner with emerald checkmark halo, 4-step shipment progress bar with pulsing active state, itemized order breakdown, and customer delivery & payment cards.
Packing Slip Generator
packing-slip-generator
Shopify and ShipStation style warehouse order packing slip and picker verification checklist with warehouse header, customer ship-to routing, picker pack station barcode scan identifier, itemized pick list table with interactive packed checkboxes, bin location tags, SKU barcodes, weight calculations, and quality control inspector stamp.
Password Generator Widget
password-generator-widget
1Password and Bitwarden-style customizable password and passphrase generator with entropy strength meter, character type toggles, memorable Diceware passphrases, PIN codes, and volatile history drawer.
Patient Intake Form
patient-intake-form
HIPAA-compliant new patient registration and medical history questionnaire in a SectionCard. Features a 4-step Stepper (Personal Information → Medical History → Insurance & Billing → Consent & Sign), demographic inputs with biological sex and emergency contact, chronic conditions checklist with allergy details and medication textareas, insurance carrier selection with card photo upload dropzones, regulatory HIPAA disclosure accordion with electronic signature pad, and a post-submission confirmation receipt with patient ID.
Patient Medical Record
patient-medical-record
Epic/Cerner-style EHR patient chart and clinical summary: patient demographics header with allergy alerts, latest vitals strip, active diagnoses and ICD-10 problem list, active medications table, recent clinical encounter notes (HPI and Assessment & Plan), upcoming appointments schedule, care team directory, and emergency contacts.
Payment Form
payment-form
Credit-card checkout form with a live 3D card preview, wallet shortcut buttons (Apple Pay / Google Pay / PayPal), brand auto-detection, Luhn validation, expiry / CVC checks, and a hookable async submit. Wallet buttons call `onWallet` so the consumer wires the actual SDK; the card form calls `onSuccess` / `onError` after the consumer-provided `onSubmit` settles.
Payouts Management Table
payouts-management-table
Merchant payout management page: automated payout schedule controls, instant payout trigger, summary balance cards for available, in-transit, and rolling reserve balances, verified settlement bank account destination card, and an itemized batch transfer history table with gross/fee/net amounts, status badges, and action menus.
Payroll Run Summary
payroll-run-summary
Gusto/Rippling style bi-weekly company payroll execution preview and tax reconciliation: cycle header with approval badge and submission controls, 4 primary payroll metric cards (company cost, net pay, employee withholdings, employer taxes), direct deposit ACH funding timeline, and itemized employee payroll table.
Peer Discussion Forum
peer-discussion-forum
StackOverflow and EdStem style student community Q&A thread with upvoting, accepted instructor answers, markdown code formatting, rich answer composer, and related discussions sidebar.
Performance Review Matrix
performance-review-matrix
360-degree employee performance review scorecard and competency matrix: executive metrics, self vs manager rating comparison, detailed competency accordion with manager remarks, OKR progress table, and peer feedback quotes.
Personal Finance Budget
personal-finance-budget
YNAB and Copilot-style zero-based monthly budget planner: envelope category budgeting, monthly pacing metrics, real-time spending progress by envelope, color-coded health indicators, and savings goal trackers.
Podcast Audio Player
podcast-audio-player
Spotify and Apple Podcasts style audio player with 32-bar visual SVG waveform scrubber, chapter markers, playback speed controls, and show notes accordion.
Pomodoro Focus Timer
pomodoro-focus-timer
Pomodoro productivity workspace with focus and break interval timers, SVG circular progress countdown display, active task queue with pomodoro estimate badges, ambient sound generator switcher, and daily focus analytics metrics.
Prescription Refill Manager
prescription-refill-manager
Pharmacy patient portal for managing active prescriptions, refill requests, dosage schedules, delivery tracking, and preferred pharmacy details with an integrated refill order dialog.
Press Kit Brand Assets
press-kit-brand-assets
Comprehensive brand guidelines and press kit hub with official logo downloads in vector SVG/4K PNG/WebP, OKLCH brand palette tokens, executive leadership headshots (300 DPI), and press contact resources.
Price Drop Alert Card
price-drop-alert-card
E-commerce wishlist price tracker with 90-day price history chart, dynamic target price threshold slider, multi-channel alert configurator, and active tracked items table.
Pricing
Pricing collection with eleven interchangeable variants: seat matrix, interactive calculator, enterprise SLA card, feature add-on builder, feature tier slider, grouped matrix, per-plan cards, sticky-header matrix, single plan, tier comparison matrix, and usage calculator slider.
Seat Pricing Matrix
pricing-01
Comprehensive enterprise pricing workbench with monthly/annual billing cycle toggle, currency selector (USD/EUR/GBP), team seat simulator slider, dynamic add-on calculators, and an expandable side-by-side feature comparison matrix.
Pricing Calculator
pricing-calculator
Interactive SaaS and API pricing calculator with dynamic seat, request throughput, and cloud storage sliders, annual billing toggle with 20% discount, enterprise add-on switches, automated tier recommendation, and sticky live estimated cost breakdown.
Pricing Enterprise Sla Card
pricing-enterprise-sla-card
Enterprise contract specification block detailing 99.999% SLA metrics, SOC2/HIPAA compliance, and dedicated VPC architecture.
Pricing Feature Addon Builder
pricing-feature-addon-builder
Interactive add-on pricing calculator with tier bundling, seat scaling, and real-time invoice generation.
Pricing Feature Tier Slider
pricing-feature-tier-slider
Continuous MAU and usage scale pricing slider with dynamic tier calculation and annual discount toggle.
Pricing — Grouped Matrix
pricing-matrix-grouped
Feature comparison matrix with collapsible capability groups, so a long plan comparison opens on the summary rows and expands only where the reader is looking.
Pricing — Per-Plan Comparison
pricing-matrix-plan-cards
Plan-first comparison that renders each plan as its own card of included and excluded capabilities, the layout a wide matrix should degrade to on a phone.
Pricing — Sticky Header Matrix
pricing-matrix-sticky-header
Long feature matrix whose plan header row pins to the top while the body scrolls, so the column a checkmark belongs to stays identifiable at any scroll depth.
Pricing — Single Plan
pricing-single-plan
One-plan pricing section stating the price, what is included, what is explicitly not, and the usage line at which a conversation becomes worthwhile.
Pricing Tier Comparison Matrix
pricing-tier-comparison-matrix
Comprehensive pricing tier comparison matrix with billing cycle discount toggles, prominent recommended plan, and granular capability matrix table.
Pricing Usage Calculator Slider
pricing-usage-calculator-slider
Interactive frontend infrastructure ROI calculator with real-time MAU, QPS, and edge replica sliders and annual cost savings scorecard.
Privacy Data Export Portal
privacy-data-export-portal
GDPR Article 15 and CCPA personal data export portal with privacy governance stat cards, granular category export selector, format chooser, and export archive history table.
Privacy Policy Generator
privacy-policy-generator
Customizable website privacy policy builder with third-party tracking disclosures, CCPA, and GDPR compliance clauses.
Product Comparison Drawer
product-comparison-drawer
Floating multi-product specification comparison bar with attribute diff highlighting, expanded full-matrix drawer comparison, and sticky buy triggers.
Product Qa Community
product-qa-community
Searchable customer and engineering Q&A community forum with staff answer badges, question upvoting, category filters, and live ask modal.
Profile Menu
profile-menu
Header-grade profile/account dropdown. Slot-trigger DropdownMenu the consumer wraps around their own avatar button (default trigger ships an Avatar fallback). Sections: upgrade, account/billing/notifications/settings, log out. Emits `select` with the chosen item key so consumers wire navigation and auth themselves.
Progress Breakdown
progress-breakdown
Labeled progress bars in a SectionCard. Spell rows out inline with ProgressItem — each bar takes colorIndex to cycle through chart-1..5 colors.
Project Roadmap
project-roadmap
Full interactive project roadmap and deliverables surface: Gantt timeline with multi-scale zooming, work breakdown task tree, overall progress metrics, search and status/assignee filters, task detail slide-over Sheet, and Add Task modal dialog.
Prompt Playground
prompt-playground
AI model prompt engineering studio & parameter tuner with system instructions, user input, temperature, max tokens, top-p sliders, JSON/stream modes, and interactive response evaluation.
Property Amenities Grid
property-amenities-grid
Building and luxury residential amenities matrix featuring categorized lifestyle zones, interactive category tabs, instant keyword search, and detailed feature cards with pool photography thumbnail.
Property Boundary Map
property-boundary-map
Cadastral parcel boundaries with zoning classifications, lot acreage, and tax assessment valuation.
Property Listing Card
property-listing-card
Zillow and Redfin style real estate property listing card featuring interactive photo carousels with 16:9 aspect ratios, price and mortgage estimation, specification pills (beds, baths, square footage, price/sqft), address, key feature tags, listing agent attribution, and direct tour scheduling actions.
Purchase Order Receiving
purchase-order-receiving
Inbound dock receiving workbench with PO matching, QA discrepancy logging, lot registration, and GRN generation.
Quick Actions
quick-actions
Vertical list of clickable shortcuts in a SectionCard. Spell rows out inline with QuickActionItem — swap the anchor for your router Link when you need SPA routing.
Quiz Assessment Runner
quiz-assessment-runner
Interactive multiple-choice exam & quiz assessment runner: 2-column test canvas with real-time countdown timer, question navigator grid with status indicators (completed, active, flagged, unanswered), syntax-highlighted code snippets, single-choice selection cards, submit confirmation modal, and comprehensive score breakdown with review explanations.
Rag Pipeline Visualizer
rag-pipeline-visualizer
LlamaIndex and LangChain style Retrieval-Augmented Generation (RAG) pipeline debugger and chunk retrieval inspector. Features 5-stage interactive DAG flow, HyDE expansion preview, hybrid dense/sparse search telemetry, cross-encoder reranking, and grounded response synthesis.
Rate Limiting Config
rate-limiting-config
Cloudflare/Upstash style API rate limiting rules builder and token bucket traffic monitor with 4 health metrics cards, interactive token bucket vs sliding window simulation slider, and configured mitigation rules table with status controls and contextual action menus.
Ratings — Award Wall
ratings-award-wall
Grid of third-party awards, each naming the awarding body, the category, and the period it covers, so a badge wall stays checkable rather than decorative.
Ratings & Review Badges
ratings-review-badges
Third-party proof strip: four review-platform cards with star rating, score out of five, review count, and a category award line, over a rating-distribution bar and a verified-reviews footnote.
Ratings — Star Summary
ratings-star-summary
Aggregate rating summary pairing a large score and partial-star row with a per-star distribution and the review count each bar represents.
Referral Program Widget
referral-program-widget
Rewardful and Viral Loops-style customer referral program and milestone reward tracker. Features a balance summary header with available credits and referral counts, shareable link and code copy actions with quick social sharing, a 4-tier milestone stepper with dynamic progress, and a recent referrals activity table with payout statuses.
Resources — Category Grid
resources-category-grid
Resource library grouped into categories, each card listing its three most recent entries with kind and read time, over a link to the full archive.
Resources — Featured List
resources-featured-list
Editorial resource layout pairing one featured long-read with a numbered list of further reading, each entry carrying its kind, date, and read time.
Resources Teaser Grid
resources-teaser-grid
Blog and resources teaser: one featured article spanning two columns with kind badge and read time, beside a stacked list of four recent pieces, closing on a view-all link row.
Return Merchandise Inspection
return-merchandise-inspection
Warehouse returns intake inspection station, RMA condition grading, and restock vs quarantine disposition workbench.
Returns Portal
returns-portal
Self-serve e-commerce returns & exchange portal wizard: Stepper header (Find Order → Select Items → Choose Resolution → Confirm & Print Label), order lookup with email and order number, item selection list with return reasons and quantities, resolution selector (size exchange, store credit with +10% bonus, or original payment refund), and confirmation screen with printable prepaid shipping label, QR code drop-off instructions, and return summary.
Reverse Etl Sync Manager
reverse-etl-sync-manager
Census and Hightouch style Reverse ETL sync manager and data activation pipeline for synchronizing Snowflake data warehouse marts to SaaS destinations (Salesforce CRM and HubSpot) with live telemetry cards, schema field mapping matrix, and sync run history log.
ROI — Calculator
roi-calculator-inputs
Input-driven ROI estimate where team size, close days, and analyst rate drive a computed saving, with the assumptions stated beneath the figure.
Role Matrix
role-matrix
Roles × permissions grid grouped by resource: checkbox cells with tri-state column headers (toggle a whole role), per-resource grant summaries, horizontal scroll for many roles, and a read-only mode. value/onValueChange mirror the full grants map; stub data covers users, billing and content.
Safe Note Calculator
safe-note-calculator
Y Combinator Post-Money SAFE note valuation, conversion share price, effective discount, and cap table equity dilution simulator with interactive parameter controls and Series A financing sensitivity matrix.
Sales Territory Map
sales-territory-map
Sales territory map. Region pins with quota attainment; select a territory to fly the camera.
Saved Cards List
saved-cards-list
List of stored payment cards using compact 3D card visuals. Marks one as the default, allows setting a different one as default, removing with a confirmation dialog, and adding a new card via an inline PaymentForm that collapses open. Emits `add`, `remove`, and `set-default` — consumer owns the persistence.
Schema Drift Alert Board
schema-drift-alert-board
Automated data warehouse schema drift and structural anomaly detector with downstream blast radius impact analysis, interactive multi-tier lineage graph, schema mutation contract diffs, and remediation workflows.
Secrets Rotation Scheduler
secrets-rotation-scheduler
AWS Secrets Manager style automated credential rotation scheduler and security key audit with lifecycle telemetry cards, zero-downtime dual-version rotation workflow, rotation lambda log inspection, and schedule configuration dialogs.
Security — Certification Band
security-certification-band
Slim compliance band listing each certification with its issuing body and last audit date, plus a data residency selector, for placing above a pricing table.
Security Compliance Badges
security-compliance-badges
Enterprise security and compliance workbench featuring SOC2, ISO27001, GDPR, and HIPAA audit inspection, cryptographic SHA-256 fingerprint verification, and whitepaper download.
Security — Data Flow
security-data-flow
Diagram of what crosses the boundary and what does not: three labelled zones joined by drawn arrows, with a legend separating metadata from customer rows.
Security Incident Timeline
security-incident-timeline
Security Operations Center (SOC) incident response timeline and post-mortem tracker with telemetry KPIs, chronological audit trail, log snippets, and corrective action items.
Security — Trust Centre Grid
security-trust-center-grid
Trust centre surface pairing compliance programmes with their audit date, scope, and report link, over a row of operational controls stated as facts rather than claims.
Seo Audit Checklist
seo-audit-checklist
Ahrefs and SEMrush style on-page SEO analyzer, meta tag auditor, Google SERP snippet preview simulator, heading hierarchy validator, and Core Web Vitals checklist.
Service Health Matrix
service-health-matrix
Statuspage and BetterStack style global region latency & infrastructure health matrix with overall operational status banner, 6-region latency grid with sparklines, 90-day core service uptime bars, and incident history timeline.
Session Device Manager
session-device-manager
Active multi-device login sessions manager and security dashboard featuring current session hero card with IP geolocation, suspicious new login alert banner, 2FA verification badges, and instant individual or bulk session revocation for desktop, mobile, and CLI tokens.
Shipment Tracking Timeline
shipment-tracking-timeline
Flexport & Maersk style container freight tracking timeline with live AIS vessel telemetry, voyage ETA milestones, Reefer cold-chain specifications, and multimodal transport logistics.
Shipping Label Printer
shipping-label-printer
Multi-carrier shipping label creator and dispatch station (USPS, FedEx, UPS, DHL) with live digital scale sync, package dimensional weight calculator, delivery options, and realistic 4x6 high-contrast thermal printable label preview.
Shortcuts Dialog
shortcuts-dialog
Linear-style keyboard reference sheet: a '?' dialog listing shortcut groups (label, description, Kbd combo) in a responsive two-column grid. Ships a built-in trigger button, controlled/uncontrolled open, custom groups via prop, and an Esc footer hint. Display only — wire real handlers in your app.
Icon Rail Sidebar
sidebar-01
Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure markup, no props -- edit Sidebar01.tsx to change routes and NavUser.tsx to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.
Team Switcher Sidebar
sidebar-02
Full-featured app sidebar -- collapsible="icon" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.
Documentation Sidebar
sidebar-03
Docs-style sidebar with a version switcher at the top, a search input below, and collapsible navigation groups. All sample data inlined so consumers edit routes in place.
Floating Inset Sidebar
sidebar-04
Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant="floating" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.
Dual-Rail Sidebar
sidebar-05
Dual-rail sidebar -- a thin always-visible icon column on the far left holds quick shortcuts (a subset of the full nav), paired with a wider main panel for the brand, search, sections, and footer. Uses collapsible="icon": when the user collapses, only the rail stays. On mobile the kit Sheet shows the full dual rail. Requires the parent SidebarProvider to set both widths: style={{ '--sidebar-width': '19.5rem', '--sidebar-width-icon': '3.5rem' }}. Modeled on the GR8R HRMS admin shell.
Starred Project Sidebar
sidebar-06
Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.
Toolbar Action Sidebar
sidebar-07
App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard / Management / Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, Log out). Built on sidebar-01.
Skill Assessment Radar
skill-assessment-radar
Developer skill proficiency scorecard and radar matrix: domain percentile rankings, dual candidate vs industry benchmark progress bars, competency breakdown, radar telemetry polygon, and personalized learning pathways.
Smart Inbox Triage
smart-inbox-triage
Superhuman-style high-velocity email inbox triage command center with keyboard shortcuts, split category tabs (VIP, Team & GitHub, Newsletters, Archived), dual-pane split reader, fast triage actions (Archive, Snooze, Star, Quick Reply), and command palette.
Social Proof Stat Counter Stream
social-proof-stat-counter-stream
Live infrastructure telemetry and animated metric counter stream with real-time global edge round-trip latency ticker.
Social Proof Video Wall
social-proof-video-wall
Engineering case study and video testimonial wall with playback simulation, category filtering, and metric highlights.
Sprint Timeline
sprint-timeline
Agile sprint tracking timeline block: 2-week deliverable Gantt schedule with story point burndown indicators, milestone demos, dependency handoffs, and assignee tags.
Sql Query Notebook
sql-query-notebook
Hex, Deepnote, and Jupyter style SQL analytical query notebook with documentation cells, executable Snowflake SQL editor with syntax coloring, live tabular results grid, CSV export, and chart visualization.
Sso Identity Provider Config
sso-identity-provider-config
Enterprise Single Sign-On (SAML 2.0 / OIDC) identity provider configuration wizard with IdP preset picker, SP credentials, XML metadata dropzone, X.509 cert PEM validator, domain enforcement switch, and interactive SAML test runner.
Stats Band
stats-band
Interactive live telemetry and performance matrix band with multi-timeframe switching, real-time SLA verification, regional cluster drilldown, and JSON export.
Stats — Band with Sparklines
stats-band-sparklines
Metric band pairing each headline figure with an inline sparkline and its period, so a number arrives with the shape of the trend behind it.
Status Monitoring
status-monitoring
Uptime page. Banner derives All systems operational / Degraded performance / Partial outage from the newest day of each service. Per-service rows render a 90-segment day bar (success/warning/destructive/info/muted per status) with hover tooltips and a right-aligned uptime percentage, followed by an incident timeline with severity badges. Pass `services` (name + days array of up/degraded/down/maintenance/none) and `incidents` to replace the stubs.
Sticky CTA
sticky-cta
Sticky conversion trio that stays out of the way until scrolled for: a bottom CTA bar with offer line and social proof, a compact corner button that expands on hover or focus, and a bottom bar that doubles as a reading-progress indicator.
Sticky CTA Bar
sticky-cta-bar
Scroll-triggered bottom CTA bar that reveals past a threshold, carrying an offer line, inline social proof, primary + ghost actions, and a dismiss control that stays dismissed for the session.
Sticky CTA — Corner Button
sticky-cta-corner-button
Compact corner action that expands on hover or focus to reveal its label, staying out of the content column on narrow screens.
Sticky CTA — Reading Progress
sticky-cta-reading-progress
Sticky bottom bar that doubles as a reading-progress indicator, revealing partway down a long page and reporting how much of it remains.
Stock Transfer Manager
stock-transfer-manager
Inter-facility inventory transfer console with bin-level routing, barcode lookup, and condition classification.
Store Locator Map
store-locator-map
Store locator. Map pins plus a compact list with open/closed status and fly-to on select.
Store Pickup Curbside
store-pickup-curbside
Buy Online Pick Up in Store (BOPIS) & curbside pickup coordination board with customer arrival parking check-in, real-time staging bin tracking, runner fulfillment dispatch, and SLA monitoring.
Stream Processing Flink Topology
stream-processing-flink-topology
Apache Flink & RisingWave stateful streaming graph: real-time DAG topology, window throughput, checkpointing duration, RocksDB state inspector, and backpressure heat monitor.
Student Gradebook Table
student-gradebook-table
Academic gradebook ledger with course header, weighted assignment categories (homework, midterm, labs, final project), class GPA & enrollment metric cards, overall percentage, letter grade badges, attendance tags, and student action menus.
Subpoena Legal Hold Manager
subpoena-legal-hold-manager
Enterprise e-discovery litigation hold notice tracker, custodian preservation receipts, and compliance audit log.
Subscription Churn Analytics
subscription-churn-analytics
ChartMogul and Baremetrics style SaaS subscription churn and MRR analytics dashboard. Features 4 key SaaS metrics cards (Net MRR growth, logo churn rate, net revenue churn, and LTV/CAC), an MRR movement waterfall decomposition bridge, a churn reasons distribution table with lost ARR attribution and trend indicators, and automated churn prevention playbook quick actions.
Support Ticket Detail
support-ticket-detail
Customer support ticket conversation thread, SLA monitor & staff workbench with internal notes, canned response macros, and customer metadata sidebar.
Synthetic Data Generator
synthetic-data-generator
Gretel and Tonic-style LLM and mathematical synthetic dataset generator with differential privacy epsilon controls, custom schema field builders, K-anonymity policy toggles, live tabular CSV preview, and streaming JSON Lines export.
Tax Summary Report
tax-summary-report
QuickBooks and Stripe Tax style quarterly estimated tax calculator and liability report: four KPI summary cards, jurisdictional liability breakdown (federal, state, FICA), IRS Schedule C deductible expenses table with tax savings, and a quarterly filing timeline.
Team Section
team-section
Centered marketing team section. Eyebrow + headline + lede over a responsive member card grid (initials avatar, role badge, one-line bio, ghost social buttons). Members with a department field group under uppercase headers; variant="compact" drops bios for tighter cards. Roster is stub data — edit DEFAULT_MEMBERS or pass members.
Technical Specs Sheet
technical-specs-sheet
Comprehensive engineering technical specifications sheet with Metric/Imperial SI toggles, parameter category filters, search, and downloadable PDF trigger.
Tenant Rent Ledger
tenant-rent-ledger
Property management resident portal with tenant header, 4 financial overview cards (monthly rent, next due date, autopay status, escrow deposit), autopay toggle with date schedule selection, and a complete 6-record payment ledger with receipt actions.
Testimonials
testimonial
Testimonial section set covering the full proof spectrum: a featured pull quote, a logo-and-quote row, a verified masonry grid, social-post cards, a counter-scrolling marquee, a case-study carousel with telemetry KPIs, and an ROI workbench with filters and autoplay.
Testimonial — Logo & Quote Row
testimonial-logo-quote-row
Three-up inline row pairing each customer wordmark with a one-sentence quote and a compact attribution line, for pages that need proof without a full testimonial block.
Testimonial — Marquee Scroll
testimonial-marquee-scroll
Two counter-scrolling marquee rows of quote cards that pause on hover and stop entirely under reduced-motion, with edge masks fading the cards into the page.
Testimonial Masonry Verified Grid
testimonial-masonry-verified-grid
Masonry grid of verified engineer endorsements with role filters, star ratings, avatar badges, and quantifiable impact metrics.
Testimonial Quote Carousel Telemetry
testimonial-quote-carousel-telemetry
Enterprise customer spotlight case study carousel with interactive company tabs, executive quotes, and verified quantitative telemetry KPIs.
Testimonial — Single Featured
testimonial-single-featured
One large pull quote given the full section: oversized text, attribution with avatar and role, the customer wordmark, and a supporting result metric beside it.
Testimonial — Social Cards
testimonial-social-cards
Masonry of social-post style endorsements with handle, avatar, timestamp, body copy, and engagement counts, formatted as posts rather than polished marketing quotes.
Customer Testimonials
testimonials-01
Interactive customer case study and ROI telemetry workbench with industry filters, verified customer metrics, tech stack tags, and autoplay navigation.
Threat Map Radar
threat-map-radar
Live threat radar over a Mapbox world map. Attack arcs hit edge PoPs; click an origin to isolate its vector.
Time Off Portal
time-off-portal
Employee leave management & PTO portal: 4 PTO balance summary cards with progress meters, interactive visual month calendar with approved leave and holiday indicators, leave request dialog and inline form with working day calculations, manager pending approval cards with instant action buttons, upcoming team out-of-office tracker, and company holiday list.
Time Tracker Timesheet
time-tracker-timesheet
Toggl/Harvest-style live time tracker with active running stopwatch, project rate selection, billable status toggle, 4 weekly summary metric cards, and daily grouped timesheet activity ledger with resume actions.
Toggle Setting List
toggle-setting-list
List of toggle-able settings in a SectionCard. Spell rows out inline with ToggleSettingRow — each row is a controlled switch taking `checked` + `onCheckedChange`.
Trademark Patent Portfolio
trademark-patent-portfolio
USPTO and WIPO intellectual property asset portfolio tracker, patent grant status, jurisdiction coverage, and maintenance fee timeline with docket action workflow.
Training Compliance Tracker
training-compliance-tracker
Annual mandatory employee compliance training dashboard with certification badges, renewal deadlines, assessment scorecards, verified credential preview modal, and certificate export controls.
Transaction Feed
transaction-feed
Brex/Ramp-style real-time corporate transaction feed with expense categorization, summary financial stat cards, search and filter toolbar, cardholder metadata, receipt attachment triggers, and row action menus.
Triage Queue Dashboard
triage-queue-dashboard
Emergency Department (ED) and Urgent Care patient acuity triage queue and room allocation board: live unit header, 4 ESI overview cards with target wait thresholds, searchable patient queue table with vitals snapshot, assigned room, attending care team, and quick clinical actions.
Usage Metering Dashboard
usage-metering-dashboard
Real-time consumption metering and overage monitoring dashboard: billing cycle tracking with days remaining, 4 key resource meter cards (API requests, compute hours, vector storage, bandwidth) with color-shifting threshold progress bars and projected month-end usage, projected invoice cost summary with overage breakdown, auto-scale overage protection toggle, email alert threshold selector, and recent usage events audit log.
Use Cases
use-cases
Use-case set spanning a filterable industry grid, persona-switched tabs, self-select role cards, and a numbered end-to-end scenario walkthrough.
Use Cases — Industry Grid
use-cases-industry-grid
Filterable industry use-case grid: segment chips narrow a six-card grid in place, each card carrying an icon, industry label, outcome headline, proof metric, and a quiet read-more link.
Use Cases — Persona Tabs
use-cases-persona-tabs
Persona-switched use-case section: a tab list of roles swaps the pain-point summary, a three-item outcome list, a supporting metric, and a role-specific CTA without leaving the page.
Use Cases — Role Cards
use-cases-role-cards
Grid of role cards, each stating the job to be done, the first week of work, and the metric that role is measured on, so a reader can self-select without a tab interaction.
Use Cases — Scenario Walkthrough
use-cases-scenario-walkthrough
One concrete scenario walked end to end as a numbered sequence of what happens, who does it, and what the system records at each step.
Utm Campaign Builder
utm-campaign-builder
Google Analytics 4 (GA4) campaign link generator with preset presets, shortlink generator, syntax-highlighted URL preview, parameter verification table, and vector QR code export.
Vector Embeddings Inspector
vector-embeddings-inspector
Pinecone & Qdrant style vector database index inspector, similarity search tester, and dimensionality explorer with cosine distance scoring, vector heatmap visualization, and namespace filtering.
Vendor Supplier Portal
vendor-supplier-portal
Supplier and vendor relationship workbench with SLA scorecard metrics, purchase order status, and contracted pricing catalog.
Video Playlist Sidebar
video-playlist-sidebar
YouTube and Vimeo style video playlist drawer with active playing indicator, durations, auto-play next switch, loop/shuffle controls, and active lesson summary card.
Virtual Card Manager
virtual-card-manager
Mercury/Ramp-style corporate virtual card manager: interactive dark credit card visual hero with EMV chip, revealable credentials, live spending limit progress bar, instant freeze toggles, limit adjusters, and an active virtual cards table.
Virtual Tour Panorama
virtual-tour-panorama
360-degree immersive room virtual tour panorama viewer with interactive viewpoint hotspots, laser measurement overlays, and architectural floor plan minimap.
Vitals Tracker Chart
vitals-tracker-chart
Biometric vitals monitoring dashboard with multi-day trends, threshold bands, device sync status, 7-day vitals table with risk indicators, clinician alert limits, and quick-entry logging dialog.
Vulnerability Scanner Report
vulnerability-scanner-report
Snyk and Trivy style CVE vulnerability scanner report and dependency security audit with severity breakdown cards, CVSS metrics, package version diffs, advisory inspection drawer, and automated remediation PR actions.
Waitlist — Referral Position
waitlist-referral-position
Waitlist capture that swaps on submit to show queue position, the referral link that moves it, and a progress meter to the next tier of early access.
Warehouse Inventory Grid
warehouse-inventory-grid
WMS warehouse inventory and bin locator grid: facility selector, 4 summary metric cards for SKUs, capacity, low-stock triggers, and inbound shipments, searchable inventory table with multi-rack bin badges, on-hand/allocated/ATP counts, barcode scanning support, and slide-over bin relocation and receiving drawer.
Wave Picking Console
wave-picking-console
Batch wave picking console with multi-order tote assignment, optimized pick route, and barcode verification.
Webhook Tester
webhook-tester
Svix and Stripe style live webhook delivery inspector and event simulator with signature generation, payload editor, and request/response inspection.
Webhooks
Webhook manager in two SectionCards: endpoints with event chips, live success rate and a pause/resume switch, plus a delivery log pairing relative timestamps with HTTP status pills, durations, retry counts and retry actions. Includes an add-endpoint dialog. Stateful demo — swap the stub data for your source.
Wholesale B2b Quick Order
wholesale-b2b-quick-order
B2B wholesale bulk order matrix with volume tier pricing, case pack multipliers, and CSV SKU paste input.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information