Back to Components
Cards

Feature Card

A card component for showcasing features with icon, title, and description. Supports default, bordered, gradient, and glass variants.

Lightning Fast

Built for performance with optimized animations and minimal bundle size.

Customizable

Easily adapt to your brand with CSS variables and Tailwind classes.

Accessible

WCAG compliant with keyboard navigation and screen reader support.

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/feature-card.tsx

Installation

Using shadcn CLI

npx shadcn add feature-card --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge