Marketing

Feature Card

new

A plain feature with an icon, a title and a line of copy.

Themes that follow your brand

Point the semantic layer at your palette once. Every component, block and chart picks it up, in light and dark.

Installation

npx shadcn@latest add @blank/feature-card

Usage

import {
  FeatureCard,
  FeatureCardDescription,
  FeatureCardHeader,
  FeatureCardIcon,
  FeatureCardTitle,
} from "@/components/ui/feature-card"

<FeatureCard>
  <FeatureCardIcon>
    <LayersIcon />
  </FeatureCardIcon>
  <FeatureCardHeader>
    <FeatureCardTitle>Themes that follow your brand</FeatureCardTitle>
    <FeatureCardDescription>Point the tokens at your palette.</FeatureCardDescription>
  </FeatureCardHeader>
</FeatureCard>

Feature Card is for features that are said, not shown. When a feature needs a picture or a live piece of UI, use a Bento Grid card instead.

Examples

Icon grid

variant="ghost" drops the card surface, for a row of features sitting on a section background.

Two token layers

A palette for raw values, a semantic layer for roles. Retheme one, never both.

Dark mode by default

Every role has a dark value, so nothing needs a dark: override to look right.

Accessible parts

Built on Radix primitives with focus rings, labels and keyboard paths in place.