Interactive product showcases with hotspots and detailed views.
25–47 of 47
PRO
showcase25
Webhook Deliveries With Code Editor
Browser-chrome card pairing a webhook delivery log on the left with a syntax-highlighted code editor on the right — color-coded status codes, timing per delivery, retry support. Every label is editable; no media props required.
PRO
showcase24
Files Changed With Code Editor
Browser-chrome card pairing a changed-files list on the left with a syntax-highlighted code editor on the right — status icons, +/- stats, and an active row highlight. Every label is editable; no media props required.
PRO
showcase23
Component Preview With Code Editor
Browser-chrome card pairing a live button-variant preview on the left with a syntax-highlighted code editor on the right — dotted canvas background, size pill toggle. Every label is editable; no media props required.
PRO
showcase22
Database Query With Code Editor
Browser-chrome card pairing a typed query result table on the left with a syntax-highlighted code editor on the right — sortable columns, status-toned cells, row count footer. Every label is editable; no media props required.
PRO
showcase21
API Inspector With Code Editor
Browser-chrome card pairing a DevTools-style API inspector on the left with a syntax-highlighted code editor on the right — method badge, response body, timing footer. Every label is editable; no media props required.
PRO
showcase20
Code Editor With Environments Panel
Browser-chrome card pairing a syntax-highlighted code editor with a deploy environments panel — health dots, version pills, and a promote-to-production footer. Every label is editable; no media props required.
PRO
showcase19
Code Editor With PR Review
Browser-chrome card pairing a syntax-highlighted code editor with a pull-request review panel — branch arrow, check rows with statuses, reviewer initials, and a merge footer. Every label is editable; no media props required.
PRO
showcase18
Code Editor With Live Logs
Browser-chrome card pairing a syntax-highlighted code editor with a live log stream — filter pills, color-coded levels, and a tail-mode footer. Every label is editable; no media props required.
PRO
showcase17
Code Editor With Test Results
Browser-chrome card pairing a syntax-highlighted code editor with a live test-results panel — pass/fail rows, expandable failures, and a coverage footer. Every label is editable; no media props required.
PRO
showcase16
Code Editor With AI Copilot
Browser-chrome card pairing a syntax-highlighted code editor with an AI chat panel — assistant suggestions arrive as inline snippets you can apply with one click. Every label is editable; no media props required.
PRO
showcase15
Code Editor With Live Activity Feed
Browser-chrome card pairing a syntax-highlighted code editor with a live activity feed — pulsing status dot, color-coded events, and an open-log footer. Every label is editable; no media props required.
PRO
showcase14
Code Editor With Upload Drawer
Browser-chrome card pairing a syntax-highlighted code editor with a side upload drawer — folder asset, progress bar, and cancel/continue actions. Every label is editable; no media props required.
PRO
showcase13
Bento Code Editor Trio
Bento layout pairing a code editor mockup with a video play card and a file upload preview. Every label is editable; no media props required.
PRO
showcase12
Features with Stats and Image
Two-column layout with key metrics bar, icon feature list, CTA button, and large product image. Perfect for enterprise feature sections highlighting performance and capabilities.
PRO
showcase10
Video Demo Thumbnail
Video preview section with thumbnail image, centered play button overlay, duration badge, and CTA buttons below. Perfect for product demo videos and explainer content.
PRO
showcase7
Screenshot with Testimonial Quote
Two-column section combining product image with large customer quote, author avatar, name, and role. Perfect for social proof sections alongside product visuals.
PRO
showcase6
Desktop and Mobile Device Mockup
Cross-platform display with desktop monitor mockup and overlapping mobile phone frame showing product screenshots. Perfect for showcasing responsive apps and multi-device experiences.
PRO
showcase5
Side-by-Side Competitor Comparison
Two-column comparison layout with product images, feature checklists, and visual differentiation between your product and competitors. Perfect for competitive positioning sections.
PRO
showcase4
Browser Mockup Screenshot
Centered hero section with heading, CTA buttons, and a realistic browser chrome mockup displaying product screenshots. Perfect for SaaS landing pages showcasing web app interfaces.
FREE
showcase3
Project Gallery Grid
Responsive three-column image gallery with hover zoom effects, captions, and optional clickable cards. Perfect for showcasing project portfolios or work samples.
FREE
showcase2
Split Hotspot Feature Section
Two-column layout with text content, CTA buttons, and interactive image with clickable hotspot popovers. Perfect for SaaS feature pages with reversible layout option.
PRO
showcase1
Interactive Hotspot Image
Full-width image showcase with clickable animated hotspots that reveal feature popovers with icons and descriptions. Perfect for product tours and interactive feature demonstrations.
PRO
showcase44
Brand Partner Grid
Centered eyebrow, heading, and description above a grid of borderless brand cards — each with a square, colorable logo plate, a title and short description, and a full-width animated seal detail button.