Docs
Feature Card

Feature Card

Icon, title, and description layout with hover lift and optional highlighted variant.

Lightning Fast

Optimized for performance with zero runtime overhead and tree-shaking support.

Type Safe

Full TypeScript support with auto-complete and compile-time error checking.

Accessible

Built with ARIA attributes and keyboard navigation support out of the box.

Installation

Usage

import { FeatureCard, FeatureGrid } from "@/components/pioneerui/feature-card"
 
export default function Features() {
  return (
    <FeatureGrid columns={3}>
      <FeatureCard
        icon={<ZapIcon />}
        title="Fast"
        description="Zero runtime overhead."
        highlighted
      />
      <FeatureCard icon={<ShieldIcon />} title="Safe" description="Type safe by default." />
    </FeatureGrid>
  )
}

Props — FeatureCard

PropTypeDefaultDescription
iconReact.ReactNodeundefinedIcon element
titlestringCard title (required)
descriptionstringCard description (required)
highlightedbooleanfalseAccent border and background

Props — FeatureGrid

PropTypeDefaultDescription
columns2 | 3 | 43Number of columns