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

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

# CardHeader

**Type**: component

CardHeader - Container for card header content Groups the card title, description, and optional action button. Automatically handles grid layout when CardAction is present, positioning the action to the right while allowing title and description to span the remaining space. Uses CSS Grid with container queries for responsive behavior: - Default: Single column layout for title and description - With CardAction: Two-column grid with action positioned top-right - Auto-adjusts spacing with gap utilities

## JSX Usage

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

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

## 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 header with title and description
<CardHeader>
  <CardTitle>Dashboard Overview</CardTitle>
  <CardDescription>View your analytics and metrics</CardDescription>
</CardHeader>
```
### Example 2
```tsx
// Header with action button
<CardHeader>
  <CardTitle>Settings</CardTitle>
  <CardDescription>Manage your preferences</CardDescription>
  <CardAction>
    <Button variant="ghost" size="icon">
      <MoreHorizontal className="size-4" />
    </Button>
  </CardAction>
</CardHeader>
```