@neynar/ui/docs/llm/components/cards.md

React UI component library built on shadcn/ui and Tailwind CSS

# Cards

Card components for structured content with semantic sections.

## Components

```typescript
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@neynar/ui"
```

## Basic Structure

```tsx
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Optional description text</CardDescription>
  </CardHeader>
  <CardContent>
    Main content area
  </CardContent>
  <CardFooter>
    Footer actions or metadata
  </CardFooter>
</Card>
```

## Composition Patterns

```tsx
// Profile card
<Card>
  <CardHeader>
    <CardTitle>@username</CardTitle>
    <CardDescription>User bio text</CardDescription>
  </CardHeader>
  <CardContent>
    <Avatar />
    <p>Additional profile details</p>
  </CardContent>
  <CardFooter>
    <Button>Follow</Button>
  </CardFooter>
</Card>

// Data card with minimal sections
<Card>
  <CardContent>
    <h3>Analytics</h3>
    <p>Key metrics and data</p>
  </CardContent>
</Card>
```