Feature Grid
Icon-framed feature cards in three-up, bento, icon-list and alternating-row layouts.
pnpm dlx @glinui/cli@latest add feature-gridWhy Glin
Everything a landing page needs
Six reasons to stop rebuilding the same section.
Accessible
Landmarks, focus rings and AA contrast built in.
Measurable
Hooks for analytics on every call to action.
Private
No third party requests, no tracking pixels.
Easy to leave
Plain React and Tailwind. Copy the file and own it.
Installation
pnpm dlx @glinui/cli@latest add feature-gridPrefer the package?
Usage
Own design from Card, IconFrame, Heading and Text. The `bento` layout composes BentoGrid for the grid and uses Card tiles with repeating spans; it does not duplicate BentoCard.
Icons are nodes (Phosphor elements work). They are decorative and wrapped in an IconFrame.
Variants
Bento, icon list and alternating rows.
Bento
Accessible
Landmarks, focus rings and AA contrast built in.
Measurable
Hooks for analytics on every call to action.
Private
No third party requests, no tracking pixels.
Icon list
Accessible
Landmarks, focus rings and AA contrast built in.
Measurable
Hooks for analytics on every call to action.
Alternating rows
Accessible
Landmarks, focus rings and AA contrast built in.
<FeatureGrid layout="bento" features={features} /><FeatureGrid layout="icon-list" features={features} /><FeatureGrid layout="alternating-rows" features={features} />Accessibility
- A `section` labelled by its heading with headings in order.
- Rows and icon lists are semantic lists.
- Card links are real anchors with focus rings.
ARIA Attributes
- `aria-labelledby` on the section
- `aria-hidden` on icon frames
Reduced Motion
Entrance reveals and the card hover lift follow the Glin motion level. At level none or prefers-reduced-motion everything renders in its final static state.
API Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
features | FeatureItem[] | Yes | - | icon, title, description, href, linkLabel, media (alternating-rows), span (bento). |
layout | FeatureGridLayout | No | three-up | Arrangement. |
eyebrow / title / description | ReactNode | - | - | Section header. |
headingLevel | 2 | 3 | No | 2 | Section heading level; cards use the next level. |
variant | BlockLook | "default" | null | No | ambient | Omit `variant` to follow the ambient style: glinr (open canvas), plain under minimal, glass panel when opted in. |
description | React.ReactNode | No | - | Auto-generated from TypeScript source. |
eyebrow | React.ReactNode | No | - | Auto-generated from TypeScript source. |
title | React.ReactNode | No | - | Auto-generated from TypeScript source. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { FeatureGrid } from "@glinui/ui"Dependencies
@glinui/ui@phosphor-icons/reactGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/feature-grid.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
FeatureGridProps
FeatureGridProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
description | React.ReactNode | No | - | - |
eyebrow | React.ReactNode | No | - | - |
features | FeatureItem[] | Yes | - | - |
headingLevel | 2 | 3 | No | 2 | Level of the section heading. Cards use the next level. Default 2. |
layout | FeatureGridLayout | No | "three-up" | - |
title | React.ReactNode | No | - | - |
variant | BlockLook | "default" | null | No | - | Block shell: glinr (open), plain, glass panel. Omit for the ambient style. |