A
Airy

Feature Card

Marketing

A large feature showcase card with text, demo area, and optional callouts. Use it on marketing pages, landing pages, and feature tours.

Preview

Default

Ship features faster

Build and iterate on product features with a design system that scales with your team.

Reversed with CTA

Real-time collaboration

Work together with your team in real time. See changes as they happen.

Learn more

With callouts

Built for developers

A component library that respects your workflow and gets out of your way.

Composable

Build complex layouts from simple primitives.

Fast

Optimized for performance out of the box.

Accessible

Keyboard navigation and screen reader support.

Without window shell

Full bleed content

Remove the window shell to let your demo content fill the entire area.

Your content here

Install

Add this block from the Airy registry:

npx shadcn@latest add @airy/feature-card

Usage

Import the component:

import { FeatureCard } from "@/components/blocks/cards/feature-card"

Basic usage:

<FeatureCard
  id="my-feature"
  title="Your feature title"
  description="A description of what this feature does."
  demoContent={<YourDemoComponent />}
/>

Props

interface FeatureCardProps {
  id: string
  title: string
  description: string
  icon?: LucideIcon
  color?: string              // CTA link color
  ctaText?: string            // CTA label
  ctaLink?: string            // CTA href
  reversed?: boolean          // Flip text/demo sides
  backgroundGradient?: string // CSS gradient for demo bg
  backgroundImage?: string    // Image URL for demo bg
  withDemoWindow?: boolean    // Wrap demo in window shell (default: true)
  demoWindowClassName?: string
  callouts?: Callout[]        // Cards below the main content
  demoContent?: ReactNode     // Custom demo content
  className?: string
}

interface Callout {
  icon: LucideIcon
  title: string
  description: string
}