Features
v1.0.17Updated 19 Oct 2026Product feature showcase section — icon grids, alternating media rows, tabs and checklists. Copy-paste block; baked-in demo content (edit the JSX to customise).
Preview
Live · 12 stories▸Why this is recommendedfeaturesbenefitsmarketingicon-grid+4
Features with icons — three col.
- ✓Landing pages
- ✓Product/feature pages
- ✓Marketing pages
- Three-column icons, alternating media, tabbed, grid-checklist and centered-icon-grid layouts
- Icon + title + description per feature
- Every call to action renders NOTHING until it is wired: ctaHref / onCtaClick and secondaryCtaHref / onSecondaryCtaClick. These blocks used to ship a Button that fired nothing (condo69 fb_bc8045e2 / fb_f8fba1de)
- FeaturesIconCards took its learn-more row from labels and its destination from a hardwired href-hash; cardHrefs supplies the real ones, index-aligned, and a card with none omits the row entirely
- The faux app screenshots are configurable through `mock` and keep their current defaults - they are illustration inside aria-hidden windows, not claims
- Client-side routing: pass linkComponent and every anchor routes through the host app link component (fb_bf7dc63a)
- ✕In-app settings screens
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override
—labelsOverride every built-in display string across the features family (eyebrows, headings, subcopy, per-feature titles and bodies, tab and step labels, mockup chrome) for i18n or white-labelling. Merged over DEFAULT_FEATURES_LABELS.
—ctaHrefWhere this section PRIMARY call to action goes - one prop drives whichever block you picked. No default: until this (or onCtaClick) is given the CTA renders NOTHING, because these blocks used to ship a button that fired nothing. MCP feedback fb_bc8045e2 / fb_f8fba1de.
—onCtaClickWhat the primary call to action does. Safe to combine with ctaHref (it fires before navigation); on its own it makes the CTA a real type=button. Receives the click event so a routed host can preventDefault (fb_bf7dc63a).
—secondaryCtaHrefWhere the secondary call to action goes. Same contract as ctaHref.
—onSecondaryCtaClickWhat the secondary call to action does. See onCtaClick.
—cardHrefsFeaturesIconCards only: the destination behind each card learn-more row, index-aligned with the cards. A card with no destination omits the row entirely rather than rendering the old dead anchor - the row exists only to be clicked.
—mockOverride the records inside the faux app screenshots (invoice, stock, profit, till, journal, dashboard). Merged over the built-in defaults, so you can replace one without restating the rest. Illustration inside aria-hidden windows, so it keeps its current defaults - but it is configured here, never by editing the file.
—linkComponentThe host app link component for every anchor this family renders. Defaults to a plain anchor, which in a routed app reloads the whole document (fb_bf7dc63a).
—