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

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

# CardAction

**Type**: component

CardAction - Container for card header actions Positioned to the right of the card header using CSS Grid positioning. Typically contains icon buttons, badges, or dropdown menus for card-specific actions. Automatically positioned when used within CardHeader. Grid positioning: - `col-start-2`: Places in second column - `row-span-2`: Spans both title and description rows - `row-start-1`: Starts from first row - `self-start justify-self-end`: Aligns to top-right

## JSX Usage

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

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

## 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
<CardAction>
  <Button variant="ghost" size="icon">
    <MoreHorizontal className="size-4" />
  </Button>
</CardAction>
```
### Example 2
```tsx
// With badge
<CardAction>
  <Badge variant="secondary">New</Badge>
</CardAction>
```
### Example 3
```tsx
// With dropdown menu
<CardAction>
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant="ghost" size="icon">
        <MoreHorizontal className="size-4" />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Edit</DropdownMenuItem>
      <DropdownMenuItem>Delete</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</CardAction>
```