Feature Grid
.mdBento 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
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
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | "Why GetUrUI" | Small label above the heading. |
heading | string | — | Section heading. |
subheading | string | — | Supporting line under the heading. |
features | Feature[] | — | { 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[].media | ReactNode | — | Your own illustration; overrides visual. |
className | string | — | 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.