Card

Versatile content container for information blocks, with hover shadow elevation.

Basic Usage

import { Card } from '@airo-ui/react'

function Demo() {
  return (
    <Card title="Getting Started">
      <p>
        Airo is an open-source React UI component library focused on refining
        the "feel" -- fluid spring animations, restrained color system, clean
        visual hierarchy.
      </p>
    </Card>
  )
}

Card Without Title

<Card>
  <p>Card content without a header title.</p>
</Card>

API

Props

Name	Type	Default	Description
title	string	--	Card title
children	React.ReactNode	--	Card body content

Interaction

• Hover: --shadow-sm to --shadow-md smooth transition
• Content area provides consistent padding