Blocks/Feature

Production-ready React blocks built with Tailwind CSS and shadcn/ui. Copy, paste, and customize for your next project.

PRO

feature192

Hero Card + Grid Cards over Media

Large hero card with image at top followed by three-column feature card grid over background media

PRO

feature193

Asymmetric Tall + Compact Cards over Media

Alternating rows with tall highlight card and stacked compact cards over background media

FREE

feature194

Three Cards With Asset Media

Three feature cards that swap an icon for a real micro-asset: a bar chart, a before/after stat, and a terminal prompt. Demonstrates how registry-pieces drop into block media slots.

FREE

feature195

Four Cards With Centered Icon

Four equal feature cards on a clean background, each with a large circular icon badge above a bold h3 title. Ideal for outlining the steps or pillars of a service offering.

PRO

feature196

Module Cards Grid With Hover Lift

Three-column grid of clickable feature cards. Each card has a top-left icon, top-right diagonal arrow, title, and description. Cards lift on hover with a configurable accent color (emerald, primary, foreground, rose, blue, amber, violet, sky, orange, teal). Two-tone heading splits a primary phrase from a colored highlight.

PRO

feature197

Alternating Image & Content

Zig-zag layout where each feature alternates an image with a content block — a colored icon badge, bold title, and description. Configurable icon badge accent color (emerald, primary, foreground, rose, blue, amber, violet, sky, orange, teal). Ideal for product modules, services, or capabilities.

PRO

feature198

Tabbed Plan Cards With Checklist

Tab-switched grid of plan cards. Each card shows title, full-width CTA button, subtitle (price), description, and a checklist with check icons. Layout is responsive: ≤2 cards center as flex, multiples of 4 use a 4-column grid, otherwise a 3-column grid. Ideal for pricing, plan comparisons, and tiered packages.

PRO

feature199

Feature with Side Heading and Icon Grid

Two-column feature section with a large heading on the left and a 2x2 grid of feature cards on the right, each with a large badge icon, title, and description.

PRO

feature200

Feature with Two-Column Checklist and Image

Two-column feature section with badge, heading, description, a 2-column checklist of icon items (defaults to check icon), and CTA on one side, with a square image on the other. Image position is configurable.

PRO

feature201

Feature with Numbered Process Steps and CTA Card

Centered header followed by a 4-step numbered process row with arrows between cards on desktop, plus a wide CTA card with badge, heading, description, button, and image.

PRO

feature202

Feature with Side Heading and Custom Tabs

Two-column feature section with badge, heading, and multi-paragraph copy on the left, plus a custom tab strip and panel on the right.

PRO

feature203

Feature with Stats Grid and Image

Two-column feature section with heading, description, and a 2x2 stats grid (icon card, value, label) on one side and a square image on the other. Image position is configurable.

PRO

feature204

Feature with Image Carousel and Lightbox Modal

Centered header followed by a side-by-side image carousel (3 visible on desktop, 2 on tablet, 1 on mobile) with prev/next arrows and dots. Tap an item to open a full-size modal lightbox with its own navigation.

PRO

feature205

Feature with Split Header and Service Cards

Two-column header — badge, heading with an accent-colored highlight on the last phrase, and intro paragraph on the left, with a supporting paragraph on the right — followed by a three-card grid of services with outlined Lucide icons and a learn-more link.

PRO

feature206

Centered Heading with CTA and Icon Row

Centered service-style block with optional badge, large heading, description, primary CTA buttons, and a row of icon-prefixed items below. Each item icon defaults to a check, and the row collapses to a stack on mobile.