Skip to content
GetUrUI

Feature Grid

.md

Bento grid of six features where each tile runs a small live micro-animation — a typing command, a theme toggle, a moving focus ring, a rolling counter, springy bars and a clicking cursor — and lifts on hover.

featuresbentogridlandingmicro-interactionmarketing

Installation

$npx shadcn@latest add @geturui/feature-grid
Download source (.zip)

Also installs: Odometer Number, Switch

Usage

usage.tsx
1import { FeatureGrid } from "@/components/blocks/feature-grid";
2import { Zap } from "lucide-react";
3
4export default function Features() {
5  return (
6    <FeatureGrid
7      heading="Everything your team needs"
8      features={[
9        { title: "Instant deploys", description: "Push to main and you are live.", icon: <Zap className="size-4" />, visual: "typing" },
10        { title: "Themes", description: "Dark and light from one set of tokens.", visual: "toggle" },
11        { title: "Keyboard first", description: "Every action has a shortcut.", visual: "focus" },
12        { title: "Growing fast", description: "New installs every week.", visual: "ticker" },
13        { title: "Fast everywhere", description: "Edge rendering in 30 regions.", visual: "bars" },
14        { title: "Composable", description: "Mix and match sections.", visual: "cursor" },
15      ]}
16    />
17  );
18}

Props

PropTypeDefaultDescription
eyebrowstring"Why GetUrUI"Small label above the heading.
headingstring—Section heading.
subheadingstring—Supporting line under the heading.
featuresFeature[]—{ title, description, icon?, visual?, media? }. Six fill the bento; tiles 1 and 6 span two columns.
features[].visual"typing" | "toggle" | "focus" | "ticker" | "bars" | "cursor"—Built-in live illustration for the tile.
features[].mediaReactNode—Your own illustration; overrides visual.
classNamestring—Classes for the outer section.

Accessibility

  • Each tile is an article with a real heading; illustrations are decorative except the theme switch, which is labelled.
  • Animations only run while a tile is in view and stop entirely under reduced motion.

Related