fma-ds

Feature Promo

A locked feature or an offer on a card: why it matters, what it gives and the call to action.

originalMITexperimentalChangelogRegistry JSON

Overview

Inside FeaturePromo, put:

  • `FeaturePromoContent`: with FeaturePromoTitle, one or more FeaturePromoDescription, FeaturePromoBenefits of FeaturePromoBenefit (with an icon tile) and FeaturePromoActions.
  • `FeaturePromoMedia` (optional): a framed panel — no background images or gradients.
  • `FeaturePromoGrid` (optional): spans the full width with one to three columns — choice cards, Items with href for shortcuts, or cards that explain options.

variant="brand" frames the card with a primary → brand gradient border.

layout="split" puts the media beside the content and hides it when the card is narrow; layout="centered" stacks everything in the middle.

With a FeaturePromoAcceptance (a checkbox card), the buttons in FeaturePromoActions stay disabled until it is checked — uncontrolled (defaultAccepted) or controlled (isAccepted + onAcceptedChange).

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/feature-promo

    Files land in components/fma-ds/feature-promo/feature-promo.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0react-aria-components@^1.22.1