Blocks/Showcase(50)

Interactive product showcases with hotspots and detailed views.

PRO

showcase28

Markdown Editor With Live Preview

Browser-chrome card rendering a markdown source editor on the left and the rendered HTML on the right — minimal monochrome syntax markers, structured preview blocks (headings, paragraphs, lists, fenced code). Every label is editable; no media props required.

PRO

showcase27

Inline Diff Viewer

Browser-chrome card rendering an inline diff — added lines glow emerald, removed lines fade rose, branch arrow row in the header, and an approve-and-merge footer. Every label is editable; no media props required.

PRO

showcase26

Code Editor With Command Palette

Browser-chrome card layering a Cmd+K command palette over a backdrop-blurred code editor — search input, grouped commands with keyboard shortcuts, and a navigation hint footer. Every label is editable; no media props required.

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.

Markdown version