@neynar/ui/llm-docs/card.llm.md

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

# Card

**Type**: component

Card - A flexible container component for grouping related content Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Cards support composition through multiple sub-components and can be customized with various layouts and styling patterns. Based on the shadcn/ui Card component, this implementation provides: - Flexible composition through sub-components - Semantic HTML structure for accessibility - Consistent spacing and visual hierarchy - Support for interactive elements and actions

## JSX Usage

```jsx
import { Card } from '@neynar/ui';

<Card
  className="value"
>
  {/* Your content here */}
</Card>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic card with header and content
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here</p>
  </CardContent>
</Card>
```
### Example 2
```tsx
// Card with action button in header
<Card>
  <CardHeader>
    <CardTitle>Settings</CardTitle>
    <CardAction>
      <Button variant="ghost" size="icon">
        <Settings />
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>Manage your settings</p>
  </CardContent>
  <CardFooter>
    <Button>Save Changes</Button>
  </CardFooter>
</Card>
```
### Example 3
```tsx
// Minimal card with only content
<Card>
  <CardContent>
    <p>Simple card content without header or footer</p>
  </CardContent>
</Card>
```
### Example 4
```tsx
// Product card with custom styling
<Card className="w-80 hover:shadow-lg transition-shadow">
  <CardHeader>
    <div className="aspect-video bg-muted rounded-lg mb-4" />
    <CardTitle>Product Name</CardTitle>
    <CardDescription>Product description</CardDescription>
    <CardAction>
      <Badge variant="secondary">New</Badge>
    </CardAction>
  </CardHeader>
  <CardContent>
    <div className="flex items-center justify-between">
      <span className="text-2xl font-bold">$299</span>
      <span className="text-sm text-muted-foreground line-through">$399</span>
    </div>
  </CardContent>
  <CardFooter className="gap-2">
    <Button className="flex-1">Add to Cart</Button>
    <Button size="icon" variant="outline">
      <Heart className="size-4" />
    </Button>
  </CardFooter>
</Card>
```