436 blocks · 20 categories · Vue (Nuxt 4)
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.
7 deps
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.
2 deps
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.
4 deps
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.
3 deps
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.
2 deps
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.
4 deps
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.
5 deps
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.
3 deps
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.
5 deps
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.
4 deps
hero-3d-tilt-interactive-canvas
Hero section with hardware-accelerated 3D tilt perspective card, specular light glare, and multi-layer z-depth primitives.
2 deps
hero-ascii-terminal-stream
Retro-futuristic ASCII terminal stream hero section with command runner and AST telemetry logs.
2 deps
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.
3 deps
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.
2 deps
hero-globe-interactive-nodes
Global edge latency simulation hero with interactive PoP node inspection and real-time telemetry.
3 deps
hero-saas-metrics-dashboard
High-impact SaaS hero section with interactive timeframe filtering, live revenue and workload KPIs, and dynamic telemetry area chart.
3 deps
hero-split-device-mockup
Dual viewport device mockup hero with interactive viewport controls and real-time state synchronization.
3 deps
hero-typing-command-center
Interactive CLI command center hero with animated execution simulator, output logs, and quick workflow presets.
2 deps
hero-video-modal-walkthrough
Product walkthrough hero section with interactive video modal player, chapter timestamps navigation, playback speed controls, and social proof.
3 deps
hero-waitlist-glow
High-conversion early access waitlist hero with role tracks, dynamic live queue spot generator, launch countdown clock, and referral booster.
3 deps
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.
4 deps
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.
5 deps
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.
4 deps
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.
5 deps
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.
4 deps
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.
5 deps
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.
3 deps
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.
4 deps
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.
3 deps
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.
5 deps
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.
3 deps
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.
4 deps
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.
5 deps
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.
7 deps
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.
4 deps
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.
4 deps
feature-bento-ai-copilot
AI agent copilot bento workbench with model tuning sliders, live inference streaming, and token speed telemetry.
3 deps
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.
3 deps
feature-comparison-slider
Interactive architecture comparison slider workbench contrasting Monolithic npm packages against UIPKGE unbundled code ownership.
3 deps
feature-drag-drop-organizer
Interactive dashboard block layout organizer with position reordering, visibility toggling, and JSON schema export.
3 deps
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.
4 deps
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.
3 deps
feature-interactive-api-curl-builder
Interactive API cURL builder and live payload testing sandbox with multi-language code export.
3 deps
feature-interactive-tabs
Master-detail architectural feature workbench with interactive source snippets, copy action, telemetry stats, and verified technical checks.
2 deps
feature-matrix-table-dense
Dense Linear-style technical specification matrix table with collapsible sections and search filtering.
feature-metric-growth-stepper
Interactive scale progression workbench showing infrastructure capacity from Seed to Global Enterprise.
3 deps
feature-scroll-spy-walkthrough
Step-by-step 4-phase developer workflow progression with sticky live code terminal sandbox and instant stage inspector.
2 deps
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.
5 deps
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.
4 deps
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.
5 deps
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.
5 deps
feature-visual-changelog-diff
Visual semantic git changelog with unified code diff highlighting and commit verification.
2 deps
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.
5 deps
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.
5 deps
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.
3 deps
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.
3 deps
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.
2 deps
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.
3 deps
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.
4 deps
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.
4 deps
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.
2 deps
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.
5 deps
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.
5 deps
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.
5 deps
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.
4 deps
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.
3 deps
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.
3 deps
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.
5 deps
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.
7 deps
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.
4 deps
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.
4 deps
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.
5 deps
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.
4 deps
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.
8 deps
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.
8 deps
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.
8 deps
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.
6 deps
pricing-enterprise-sla-card
Enterprise contract specification block detailing 99.999% SLA metrics, SOC2/HIPAA compliance, and dedicated VPC architecture.
2 deps
pricing-feature-addon-builder
Interactive add-on pricing calculator with tier bundling, seat scaling, and real-time invoice generation.
3 deps
pricing-feature-tier-slider
Continuous MAU and usage scale pricing slider with dynamic tier calculation and annual discount toggle.
3 deps
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.
5 deps
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.
4 deps
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.
4 deps
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.
4 deps
pricing-tier-comparison-matrix
Comprehensive pricing tier comparison matrix with billing cycle discount toggles, prominent recommended plan, and granular capability matrix table.
3 deps
pricing-usage-calculator-slider
Interactive frontend infrastructure ROI calculator with real-time MAU, QPS, and edge replica sliders and annual cost savings scorecard.
3 deps
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.
5 deps
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.
7 deps
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.
5 deps
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.
5 deps
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.
5 deps
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.
5 deps
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.
3 deps
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.
2 deps
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.
3 deps
logo-cloud-categorized-grid
Categorized 4-industry logo & enterprise customer workbench with scale metrics, category filter tabs, and full testimonial modal inspect.
2 deps
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.
3 deps
logo-ticker-infinite
Infinite marquee brand partner ticker with sector category filters, speed and pause controls, and interactive telemetry hover cards.
1 dep
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.
4 deps
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.
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.
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.
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.
4 deps
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.
5 deps
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.
5 deps
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.
3 deps
security-compliance-badges
Enterprise security and compliance workbench featuring SOC2, ISO27001, GDPR, and HIPAA audit inspection, cryptographic SHA-256 fingerprint verification, and whitepaper download.
3 deps
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.
4 deps
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.
4 deps
social-proof-stat-counter-stream
Live infrastructure telemetry and animated metric counter stream with real-time global edge round-trip latency ticker.
1 dep
social-proof-video-wall
Engineering case study and video testimonial wall with playback simulation, category filtering, and metric highlights.
2 deps
stats-band
Interactive live telemetry and performance matrix band with multi-timeframe switching, real-time SLA verification, regional cluster drilldown, and JSON export.
2 deps
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.
2 deps
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.
5 deps
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.
2 deps
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.
3 deps
testimonial-masonry-verified-grid
Masonry grid of verified engineer endorsements with role filters, star ratings, avatar badges, and quantifiable impact metrics.
2 deps
testimonial-quote-carousel-telemetry
Enterprise customer spotlight case study carousel with interactive company tabs, executive quotes, and verified quantitative telemetry KPIs.
3 deps
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.
4 deps
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.
4 deps
testimonials-01
Interactive customer case study and ROI telemetry workbench with industry filters, verified customer metrics, tech stack tags, and autoplay navigation.
3 deps
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.
4 deps
announcement-banner
Interactive release, security, and maintenance broadcast center with rotating live ticker, CLI copy button, and floating pill / top-bar modes.
1 dep
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.
3 deps
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.
4 deps
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.
3 deps
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.
2 deps
banner-announcement-sticky
Sticky release announcement banner with version pill, call-to-action link, and dismiss trigger.
1 dep
coming-soon
Interactive launch and maintenance workbench with high-impact countdown, VIP early access waitlist queue allocator, live launch roadmap progress tracker, and feature sneak-peek previews.
6 deps
contact-01
Interactive enterprise solutions architect dispatch workbench with track selection, live hub timezones, SLA badges, and ticket generator.
7 deps
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.
7 deps
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.
3 deps
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.
5 deps
cta-01
Interactive developer CTA section with live framework switcher, interactive CLI installation terminal, 1-click clipboard copy, and production guarantees.
3 deps
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.
3 deps
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.
2 deps
cta-split-demo-request-modal
Split-pane enterprise demo request workbench with benefit highlights, team size selectors, framework focus filters, and interactive submission feedback.
4 deps
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.
4 deps
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.
7 deps
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.
5 deps
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.
4 deps
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.
5 deps
faq-01
Interactive architecture knowledge base and FAQ section with real-time keyword search, category topic filtering, and helpfulness voting.
5 deps
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.
4 deps
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.
6 deps
faq-searchable-accordion-workbench
Searchable FAQ workbench with real-time query filtering, category switcher, collapsible accordions, and community support links.
4 deps
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.
3 deps
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.
3 deps
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.
5 deps
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.
3 deps
newsletter-signup
Engineering dispatch and release radar workbench with channel tracks (Architecture, Releases, Security), live archive previews, and subscriber metrics.
5 deps
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.
5 deps
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.
4 deps
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.
3 deps
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.
2 deps
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.
4 deps
waitlist
Pre-launch signup page. Split layout with product pitch, logo mark, three benefit bullets on the left and an email capture card on the right that flips to a queue-position confirmation with referral hint after submit.
3 deps
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.
6 deps
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.
6 deps
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.
4 deps
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`.
3 deps
changelog-release-notes-timeline
Developer changelog timeline with interactive version filters, categorical changes (features, improvements, fixes), and commit hash links.
2 deps
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.
8 deps
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.
6 deps
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.
5 deps
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.
3 deps
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.
3 deps
footer-developer-dense-grid
Dense developer footer with multi-column categorized links, live operational status beacon, and social triggers.
1 dep
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.
4 deps
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.
2 deps
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.
4 deps
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.
7 deps
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.
5 deps
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.
8 deps
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.
4 deps
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.
5 deps
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.
5 deps
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.
7 deps
social-media-post-scheduler
Multi-platform social media composer and post scheduler. Features channel toggles, rich text composer with emoji & hashtag insertion, character counter, media upload preview, scheduled time picker with best-time recommendations, auto-repost toggle, and high-fidelity live social feed previews for X (Twitter), LinkedIn, Instagram, and Threads.
9 deps
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.
4 deps
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.
7 deps
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.
3 deps
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.
4 deps
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.
8 deps
product-comparison-drawer
Floating multi-product specification comparison bar with attribute diff highlighting, expanded full-matrix drawer comparison, and sticky buy triggers.
6 deps
product-detail-page
Flagship e-commerce product detail page with multi-angle gallery, finish & cable selectors, stock urgency counter, warranty upsell, flash sale countdown bar, frequently bought together bundle, technical specs sheet, customer reviews breakdown, and community Q&A.
4 deps
product-grid-page
E-commerce product listing page (PLP) featuring breadcrumb navigation, category header with sorting and mobile filter drawer, a 2-column layout with a multi-facet sidebar (categories, price range slider, color swatches, brands, ratings), and a responsive 3-column product grid with image hover zoom, badges, wishlist toggle, color swatches, quick add to cart, and pagination.
8 deps
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.
5 deps
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.
5 deps
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 emit a `wallet` event so the consumer wires the actual SDK; the card form emits `success` / `error` after the consumer-provided `onSubmit` settles.
4 deps
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.
9 deps
wholesale-b2b-quick-order
B2B wholesale bulk order matrix with volume tier pricing, case pack multipliers, and CSV SKU paste input.
6 deps
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.
4 deps
order-management-page
E-commerce and SaaS order fulfillment admin table: header with export CSV and new order action, 4 KPI summary metric cards, search and multi-status filter toolbar with date range selector, selectable order rows with customer avatars and status badges, slide-over order details drawer with line items breakdown and tracking info, bulk action bar, and pagination.
9 deps
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.
8 deps
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.
7 deps
gift-card-balance-checker
Customer storefront gift card balance lookup, live digital card passbook, quick fund reloading, and complete redemption audit history ledger.
6 deps
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.
6 deps
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.
7 deps
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.
8 deps
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.
8 deps
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.
6 deps
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.
5 deps
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.
5 deps
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.
5 deps
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.
6 deps
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.
2 deps
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.
6 deps
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.
8 deps
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.
5 deps
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.
6 deps
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.
5 deps
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.
6 deps
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.
5 deps
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.
6 deps
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.
6 deps
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.
6 deps
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.
8 deps
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.
5 deps
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.
9 deps
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.
8 deps
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.
1 dep
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.
3 deps
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.
2 deps
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.
2 deps
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.
4 deps
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.
1 dep
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.
5 deps
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.
7 deps
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.
7 deps
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.
4 deps
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.
7 deps
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.
4 deps
multimodal-vision-playground
GPT-4o/Claude 3.5 Vision multimodal visual analysis studio with interactive bounding box overlays, OCR entity extraction, tabular line item parsing, raw RFC-8259 JSON viewer, and visual question answering (VQA).
9 deps
prompt-ab-testing-comparator
Side-by-side prompt variation comparison shootout with automated LLM judge scoring, win rates, and token diffs. Features benchmark test payload, side-by-side arena with latency, cost, and judge critique, plus aggregate win-rate scorecard.
5 deps
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.
8 deps
fine-tuning-job-monitor
LLM fine-tuning job telemetry, loss curve convergence tracking, GPU cluster utilization, hyperparameter manifests, and LoRA checkpoint exporter.
6 deps
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.
6 deps
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.
5 deps
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.
7 deps
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.
11 deps
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.
6 deps
mcp-server-registry-manager
Anthropic Model Context Protocol (MCP) server registry manager with connection health monitoring, stdio/SSE stream transport metrics, live tool schema explorer, parameterized resource URI templates, and JSON-RPC 2.0 payload inspection drawer.
10 deps
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.
8 deps
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.
7 deps
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.
7 deps
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.
6 deps
etl-pipeline-dag
Airflow and Dagster style directed acyclic graph (DAG) pipeline visualizer with interactive node execution topologies, health metrics, and terminal stdout log inspector.
5 deps
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.
7 deps
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.
6 deps
spark-job-stage-visualizer
Databricks and Apache Spark distributed job execution DAG visualizer with stage performance metrics, task skew distribution quantiles, and executor JVM GC telemetry.
6 deps
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.
6 deps
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.
5 deps
data-catalog-lineage
Alation and Monte Carlo style enterprise data catalog lineage map and table documentation explorer with interactive upstream source DAGs, dbt transform models, downstream BI consumer traces, schema column definitions with types and constraints, automated data quality assertions, and SQL console query runner.
6 deps
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.
7 deps
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.
6 deps
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.
6 deps
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.
7 deps
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.
10 deps
database-migration-schema-diff
Prisma, Flyway, and Liquibase database migration runner with pending DDL visual diffs, rollback scripts, schema integrity telemetry, and execution history.
6 deps
database-schema-viewer
Visual database schema inspector and SQL query previewer with cluster health header, table navigation sidebar with row counts, columns metadata table (data types, nullability, defaults, PK/FK indicators), foreign keys diagram, B-Tree indexes, and syntax-styled DDL preview with copy actions.
7 deps
lakehouse-table-optimizer
Apache Iceberg and Delta Lake table maintenance manager, compaction optimizer, snapshot history visualizer, and time-travel SQL query helper.
7 deps
parquet-metadata-inspector
Apache Parquet file format deep-dive inspector with telemetry overview, row groups switcher, column chunk statistics, dictionary encoding metrics, and hierarchical schema tree with repetition and definition levels.
6 deps
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.
6 deps
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.
4 deps
ai-code-review-assistant
GitHub PR automated AI code review assistant with AST syntax diff annotations, performance suggestions, and 1-click patch application.
6 deps
api-documentation-page
Stripe and Mintlify style two-pane API documentation reference page with HTTP method badge, endpoint path, headers, request parameter tables with nested schema hints, response attributes, interactive multi-language code snippets (cURL, Node.js, Python, Go, Ruby), and status response tabs with copy actions.
5 deps
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.
5 deps
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.
8 deps
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.
9 deps
environment-variables-manager
Vercel and Supabase style environment variables and secrets manager with environment scoping, mask/reveal toggles, bulk import, and inline editing.
11 deps
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.
8 deps
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.
4 deps
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.
6 deps
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.
7 deps
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.
9 deps
webhook-tester
Svix and Stripe style live webhook delivery inspector and event simulator with signature generation, payload editor, and request/response inspection.
9 deps
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.
7 deps
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.
6 deps
deployment-pipeline
CI/CD deployment history, active environment status, execution stepper, collapsible build log terminal with stdout timestamps, and filterable deployments table.
8 deps
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.
3 deps
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.
2 deps
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. v-model:events 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 composable.
9 deps
event-list
List of upcoming events in a SectionCard. Spell rows out inline with DataListItem — title + Clock date + optional status Badge per row.
2 deps
kanban-task-board
Full kanban task board surface: 4 status columns, drag-and-drop card movement with insertion indicator, board/list view toggle, search + priority + assignee filters, collapsible columns, click-to-open task detail Sheet (comments, subtasks, files), full-form Add Task Dialog with priority/assignee/due-date/tags/subtasks. Mega-block: ships 14 Vue files (KanbanBoard + 6 kanban-* views + 7 small badges/lists). Bind with v-model:columns; consumer owns the columns array so swapping the in-memory store for Drizzle/Postgres is a one-line change. Auto-pulls the use-kanban hook (types + configs + helpers) and kanban-data lib (seed columns).
16 deps
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.
10 deps
sprint-timeline
Agile sprint tracking timeline block: 2-week deliverable Gantt schedule with story point burndown indicators, milestone demos, dependency handoffs, and assignee tags.
2 deps
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.
4 deps
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.
5 deps
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.
4 deps
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.
7 deps
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.
8 deps
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.
7 deps
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.
7 deps
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.
4 deps
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.
6 deps
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.
3 deps
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.
4 deps
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.
8 deps
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.
4 deps
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.
5 deps
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.
3 deps
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.
4 deps
support-ticket-detail
Customer support ticket conversation thread, SLA monitor & staff workbench with internal notes, canned response macros, and customer metadata sidebar.
9 deps
article-editor-toolbar
Medium and Substack style rich text formatting toolbar and article drafting canvas with typography controls, syntax highlighted code blocks, callouts, and publishing drawer.
6 deps
author-bio-box
Editorial author signature card with avatar, verified badge, social links row, recent articles list, and interactive RSS subscribe button.
5 deps
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.
6 deps
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.
8 deps
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.
4 deps
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.
4 deps
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.
6 deps
file-manager
Storage/files page with breadcrumbs, search, grid/list view toggle, upload action, and a storage meter over hardcoded folders and files.
6 deps
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.
7 deps
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.
8 deps
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.
5 deps
auth-mfa
Two-step verification surface. 6-digit OTP pin input auto-submits on entry, shows verifying state and an inline error on mismatch, has a 30-second resend cooldown, and swaps to a Verified card with a Continue button on success. Emits `verify` (code), `resend`, and `continue`. `demoCode` prop controls the value the built-in mock validator accepts.
3 deps
auth-password-reset
Four-stage password reset surface in a single card: request (email form) -> sent (check-your-inbox confirmation with "Open reset form" demo button) -> reset (new password + confirm with match validation) -> done (success confirmation linking back to sign-in). Emits `request` (email) when the link is asked for and `reset` (password) when the new password is set; consumer wires the actual mail/db calls.
4 deps
auth-sign-in
Full-page sign-in surface. Email + password + remember-me form, forgot-password and sign-up links, optional GitHub/Google OAuth row. Emits `submit` with the form payload and `oauth` with the chosen provider; consumer wires the actual auth call. Link targets are configurable via props.
6 deps
auth-sign-up
Full-page sign-up surface. Name/email/password/confirm form with password-match validation, T&C acceptance gate, optional OAuth row, link back to sign-in. Emits `submit` with the validated payload and `oauth` with provider; consumer wires the actual auth call.
6 deps
login-01
Split-screen developer console authentication suite featuring brand telemetry showcases, OAuth providers, passkey biometric sign-in, and automatic enterprise SAML SSO domain detection.
6 deps
login-02
Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.
4 deps
register-01
Centered sign-up card. Name + email + password + confirm with inline mismatch warning, terms checkbox gating the submit, divider, and a 2-button SSO row (Google + GitHub). Footer links back to sign-in. Emits submit, sign-in, oauth, view-terms, view-privacy.
6 deps
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.
3 deps
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.
6 deps
user-profile-page
Profile page composition: gradient cover banner with an overlapping ringed avatar, identity row with role badge plus edit button and a kebab actions menu, an inline follower stats row, and tabs for Overview (bio + icon detail rows), Activity (muted-tile feed), and Projects (progress cards). All data is hardcoded inline for you to replace.
8 deps
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.
10 deps
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.
6 deps
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.
6 deps
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.
7 deps
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. v-model mirrors the full grants map; stub data covers users, billing and content.
4 deps
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.
8 deps
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.
4 deps
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.
8 deps
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.
6 deps
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.
8 deps
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.
5 deps
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.
6 deps
recruitment-candidate-pipeline
AI-powered applicant tracking pipeline, candidate scorecard, resume match scoring, and interview stages board.
7 deps
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.
7 deps
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.
5 deps
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.
11 deps
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.
8 deps
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.
7 deps
benefits-enrollment-portal
Employee benefits open enrollment portal with interactive medical, dental, and vision plan comparisons, customizable 401(k) contribution slider with real-time employer match calculation, and a sticky paycheck impact summary.
5 deps
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.
10 deps
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.
9 deps
training-compliance-tracker
Annual mandatory employee compliance training dashboard with certification badges, renewal deadlines, assessment scorecards, verified credential preview modal, and certificate export controls.
6 deps
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.
6 deps
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.
6 deps
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.
5 deps
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.
7 deps
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.
9 deps
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.
9 deps
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.
8 deps
return-merchandise-inspection
Warehouse returns intake inspection station, RMA condition grading, and restock vs quarantine disposition workbench.
7 deps
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.
10 deps
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.
5 deps
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.
5 deps
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.
7 deps
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.
6 deps
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.
7 deps
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.
4 deps
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.
6 deps
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.
10 deps
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.
6 deps
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.
12 deps
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.
9 deps
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.
6 deps
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.
8 deps
telehealth-video-room
HIPAA-compliant telehealth video consultation room with live telemetry vitals, clinical SOAP notes, in-call encrypted chat, and prescription generator drawer.
8 deps
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.
9 deps
assignment-submission-dropzone
University coursework submission portal with plagiarism check indicator, grading rubric, and deadline timer.
6 deps
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.
6 deps
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.
5 deps
lesson-video-player
Online lecture video player with playback speed selector, interactive timestamped transcript, and note-taking drawer.
7 deps
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.
3 deps
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.
6 deps
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.
6 deps
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.
6 deps
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.
7 deps
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.
4 deps
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.
5 deps
virtual-tour-panorama
360-degree immersive room virtual tour panorama viewer with interactive viewpoint hotspots, laser measurement overlays, and architectural floor plan minimap.
4 deps
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.
5 deps
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.
4 deps
maintenance-request-ticket
Resident repair and facility work order submission portal with urgency priority and photo dropzone.
7 deps
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.
6 deps
board-resolution-signoff
Corporate board meeting minutes and unanimous written consent resolution with director voting tallies, legal recitals, and digital signature signoff execution.
5 deps
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.
5 deps
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.
6 deps
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.
7 deps
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.
7 deps
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.
8 deps
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.
7 deps
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.
5 deps
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.
3 deps
legal-policy-page
Privacy Policy and legal documentation layout with top metadata header, version switcher, sticky table of contents navigation, and structured compliance sections for GDPR and CCPA.
5 deps
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.
7 deps
privacy-policy-generator
Customizable website privacy policy builder with third-party tracking disclosures, CCPA, and GDPR compliance clauses.
7 deps
subpoena-legal-hold-manager
Enterprise e-discovery litigation hold notice tracker, custodian preservation receipts, and compliance audit log.
8 deps
trademark-patent-portfolio
USPTO and WIPO intellectual property asset portfolio tracker, patent grant status, jurisdiction coverage, and maintenance fee timeline with docket action workflow.
6 deps
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 emits `select`. `show-trigger=false` hides the inline button so the consumer can fire it from elsewhere via the exposed `show()` / `toggle()` methods.
1 dep
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.
8 deps
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.
2 deps
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.
3 deps
sidebar-01
Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure template, no props -- edit Sidebar01.vue to change routes and NavUser.vue to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.
3 deps
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.
4 deps
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.
4 deps
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.
1 dep
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.
3 deps
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.
3 deps
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.
2 deps
dashboard-layout
Full dashboard shell — collapsible sidebar (sidebar-02) + sticky topbar (sidebar trigger, breadcrumb, command palette, theme switch, notifications, profile menu) + main content slot. Drop it in a Nuxt layout: `<DashboardLayout><slot /></DashboardLayout>`. Auto-pulls every transitive piece (sidebar-02, command-palette, notifications-popover, profile-menu, theme-switch).
8 deps
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.
8 deps
quick-actions
Vertical list of clickable shortcuts in a SectionCard. Spell rows out inline with QuickActionItem — swap the anchor for NuxtLink or RouterLink when you need SPA routing.
2 deps
record-detail-page
Admin record detail page: breadcrumb header with status badge and Edit / Delete actions, two-column layout with a summary card (avatar, identity, key metrics), Details / Activity tabs (labeled description-list sections and an icon timeline feed), plus a side panel with owner metadata, relative timestamps, tag badges, and a recent-orders mini list. All data is hardcoded inline for you to replace.
6 deps
search-results-page
Full search results page: large pre-filled search input with result count, removable filter chips with clear-all, a left facet sidebar with Type and Team checkbox groups (hidden below lg), six result rows with icon tiles, titles, paths, snippets, and type/updated meta, plus a Previous/Next pagination footer. Chips and facets are interactive; swap the stub rows for your search source.
5 deps
settings-page
Linear-style settings shell: a nav rail of icon sections (collapses to a horizontal tab strip on narrow screens) switching between fully composed panels — profile form with sticky save bar, notification switches, theme picker, workspace identity, billing summary, and a type-to-confirm danger zone. Swap the panel internals for your own forms.
9 deps
theme-customize
Compact theme customization popover. Light/Dark/System mode (via the useTheme cookie), six curated color presets that overwrite `--primary` / `--primary-foreground` / `--ring`, and a radius slider bound to `--radius`. Persists to localStorage and exposes a one-click Copy CSS for the active token set.
3 deps
toggle-setting-list
List of toggle-able settings in a SectionCard. Spell rows out inline with ToggleSettingRow — each row binds `checked` + `update:checked` (v-model:checked).
1 dep
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.
1 dep
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.
1 dep
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.
1 dep
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.
1 dep
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.
1 dep
backorder-split-shipment-manager
Order fulfillment split shipment manager with stock triage, backorder tracking, and multi-node dispatch controls.
4 deps
cloud-backup-schedule
Automated cloud snapshot scheduler with storage quota metering, encryption status, and recent snapshot timeline.
6 deps
commercial-invoice-generator
B2B cross-border commercial invoice generator with HTS tariff codes, EORI tax identifiers, and CIF valuation totals.
5 deps
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.
1 dep
purchase-order-receiving
Inbound dock receiving workbench with PO matching, QA discrepancy logging, lot registration, and GRN generation.
6 deps
stock-transfer-manager
Inter-facility inventory transfer console with bin-level routing, barcode lookup, and condition classification.
6 deps
vendor-supplier-portal
Supplier and vendor relationship workbench with SLA scorecard metrics, purchase order status, and contracted pricing catalog.
4 deps
wave-picking-console
Batch wave picking console with multi-order tote assignment, optimized pick route, and barcode verification.
5 deps
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.
2 deps
product-qa-community
Searchable customer and engineering Q&A community forum with staff answer badges, question upvoting, category filters, and live ask modal.
5 deps
technical-specs-sheet
Comprehensive engineering technical specifications sheet with Metric/Imperial SI toggles, parameter category filters, search, and downloadable PDF trigger.
5 deps
