Hex UIv1

CommerceProductFeatures

Product features spotlight on a PDP — either an alternating row layout (image + copy, sides flip each row) or a compact icon-grid for spec lists. Presentational and theme-driven. Sits between commerce-product-detail and commerce-reviews on a product page.

Installation

pnpm
pnpm dlx @hex-core/cli add commerce-product-features

Usage

tsx
import { CommerceProductFeatures } from "@/components/ui/commerce-product-features"

Alternating PDP features

Two feature rows with detail photos on alternating sides.

tsx
import { CommerceProductFeatures } from "@hex-core/components";

<CommerceProductFeatures
  eyebrow="Built to last"
  title="Why this tote earns its keep"
  features={[
    {
      title: "Heavyweight canvas",
      description: "16 oz natural canvas, twice as thick as standard totes.",
      media: <img src="/features/canvas.jpg" alt="Close-up of canvas weave" />,
    },
    {
      title: "Reinforced handles",
      description: "Bar-tacked at every stress point so handles never tear.",
      media: <img src="/features/handles.jpg" alt="Close-up of bar-tacked handle" />,
    },
  ]}
/>

Variant values

variantLayout.
ValueDescription
alternatingdefault
One feature per row, media alternating sides.
grid
Three-column icon-grid.

API Reference

PropTypeDefaultDescription
featuresrequired
object—ReadonlyArray<{ title; description?; media?: ReactNode; icon?: ReactNode }>. Alternating layout uses media; grid layout uses icon.
eyebrow
ReactNode—Section eyebrow above the title.
title
ReactNode—Section heading.
description
ReactNode—Section subcopy below the heading.
variant
enumalternating'alternating' (one per row, image alternating sides) or 'grid' (3-col icon-grid).
className
string—Additional classes applied to the root <section>.

AI Guidance

When to use

Use on a PDP below commerce-product-detail to spotlight materials, construction, or signature details. 'alternating' for detail photos that deserve the full row; 'grid' for compact spec lists.

When not to use

Don't use for marketing claims on the storefront (use marketing-feature-grid). Don't put pricing here. Don't repeat the product title — that's the PDP's <h1>.

Common mistakes

  • Three+ alternating rows that all look the same — mix in copy length, image crop, or add a grid section to break the rhythm.
  • Tiny icons in 'grid' that look like noise — use 24px glyphs sized to the size-5 well.
  • Forgetting alt text on feature media — these are informative, not decorative.

Accessibility

Section title is <h2>; per-feature titles render as <h3>. The alternating order flip is purely visual — source order stays top-to-bottom, so screen readers reach features in declared order regardless of which side the image is on.

Token budget: 1084

Verified against @hex-core/components@1.14.0

Edit this page on GitHub