Components/GretTech/Feature Bento

Feature Bento

A feature bento where each card plays a small live scene. Use the built-in deploy, speed, build and growth scenes by name, or drop in your own.

View Installation Guide

Landing Marketing Animation

How we work

A studio that ships, measures and keeps you in the loop

Small senior team, short feedback loops, and a live preview you can open any day of the week.

Ships on every push

Each change is built, checked and live in a few minutes. No release days.

Fast on any phone

We watch Core Web Vitals from the first commit, not the week before launch.

Built where you can see it

Follow along in a shared preview while the pages come together, block by block.

Numbers after launch

See what changed for sign-ups and sales, not just that the site looks nicer.

Installation

Full Setup guide

Install the component automatically via Shadcn CLI.

npx shadcn@latest add https://www.grettech.com/api/registry/feature-bento

Other Examples

Custom Cards

Everything your launch needs

Preview every change

Each pull request gets its own link to share with the team.

Fast by default

Images, fonts and scripts are tuned before they reach a phone.

Design and build together

Designers and developers work on the same live page.

Any scene you like

A skeleton is just a React node: drop in an illustration, a chart or a screenshot.

Props

Prop	Type	Default	Description
eyebrow	string	-	Small label above the heading.
heading	string	-	Section heading, on the left above the bento.
description	string	-	Supporting text, on the right of the heading.
features	FeatureBentoFeature[]	[{ title: "Ships on every push", description: "Each change is built, checked and live in a few minutes. No release days.", skeleton: "deploy" }, { title: "Fast on any phone", description: "We watch Core Web Vitals from the first commit, not the week before launch.", skeleton: "speed" }, { title: "Built where you can see it", description: "Follow along in a shared preview while the pages come together, block by block.", skeleton: "build", span: "tall" }, { title: "Numbers after launch", description: "See what changed for sign-ups and sales, not just that the site looks nicer.", skeleton: "growth", span: "wide" }]	The cards, in order. The grid fills itself: tall cards take two rows, wide ones two columns. Ignored when you pass FeatureCard children.
children	React.ReactNode	-	Your own cards (<FeatureCard title skeleton={…} />), in place of features. A skeleton can be any React node.
commits	DeployCommit[]	[{ message: "Tighten hero spacing", author: "Ana", avatar: "/demo/avatar-ana.webp" }, { message: "Add pricing FAQ", author: "Ravi", avatar: "/demo/avatar-ravi.webp" }, { message: "Compress product images", author: "Sam", avatar: "/demo/avatar-sam.webp" }]	Commits in the deploy scene (up to three).
domain	string	"yourbrand.com"	Domain on the deploy scene's Ready chip.
score	number	99	Score in the speed scene's ring, 0–100.
metrics	SpeedMetric[]	[{ label: "LCP", value: "0.8s" }, { label: "CLS", value: "0.01" }]	Metrics under the score.
people	BuildPerson[]	[{ name: "Ana", color: "#ec4899", avatar: "/demo/avatar-ana.webp" }, { name: "Ravi", color: "#3b82f6", avatar: "/demo/avatar-ravi.webp" }]	The two people in the build scene.
growth	string	"+38%"	The figure at the end of the growth chart.
growthLabel	string	"sign-ups in 90 days"	What the figure measures.
quotes	GrowthQuote[]	[{ quote: "Sign-ups doubled in the month after we relaunched.", name: "Ana Ruiz", role: "Founder, Fieldnote", avatar: "/demo/avatar-ana.webp" }, { quote: "Our product pages went from four seconds to well under one.", name: "Sam Okafor", role: "Head of Growth, Kestrel", avatar: "/demo/avatar-sam.webp" }, { quote: "We saw progress every day instead of one big reveal at the end.", name: "Ravi Menon", role: "Product lead, Halcyon", avatar: "/demo/avatar-ravi.webp" }]	Quotes that take turns beside the chart (up to four).
accentColor	string	"#6366f1"	Colour of the growth chart.
className	string	-	Extra classes for the section.

PreviousSkewed Grid

Next Keyboard