Components/GretTech/Stack Hero

Stack Hero

A split hero with a checklist on one side and a fanned stack of screenshots on a drifting mesh-gradient stage on the other, framed by design-tool rulers.

View Installation Guide

Hero Landing Marketing

Pagewright for studios

Launch client sites faster. Skip the late nights.

Build from sections your clients can edit themselves, then publish with hosting, forms and analytics already set up.

Page sections your clients can edit safely
One review link for feedback and approvals
Hosting, forms and analytics included

Start building See examples

Free while you build. Pay when a site goes live.

Installation

Full Setup guide

Install the component automatically via Shadcn CLI.

npx shadcn@latest add https://www.grettech.com/api/registry/stack-hero

Props

Prop	Type	Default	Description
title*	React.ReactNode	-	The main headline. Wrap part of it in a muted span for a two-tone title.
images*	StackImage[]	-	Up to three screenshots; the first sits in front.
eyebrow	string	-	Small label above the title.
description	string	-	Supporting text under the title.
points	string[]	[]	Short benefits, shown as a checklist.
children	React.ReactNode	-	Calls to action.
note	string	-	Small print under the actions.
reverse	boolean	false	Put the screenshots on the left.
rulers	boolean	true	Ruler marks along the edges.
colors	[string, string, string]	["#38bdf8", "#a78bfa", "#f472b6"]	Three colours for the mesh gradient behind the screenshots.
className	string	-	Extra classes for the section.

PreviousBeam Hero

Next Prompt Hero