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

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

# CardFooter

**Type**: component

CardFooter - Footer area of a card, typically for actions Positioned at the bottom of the card and commonly used for action buttons, supplementary information, or navigation elements. Uses flexbox layout with automatic alignment of items. Can be styled with border-top when visual separation from content is needed.

## JSX Usage

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

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

## 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 footer with actions
<CardFooter>
  <Button variant="outline">Cancel</Button>
  <Button>Save</Button>
</CardFooter>
```
### Example 2
```tsx
// Footer with gap for better spacing
<CardFooter className="gap-2">
  <Button variant="outline" className="flex-1">Cancel</Button>
  <Button className="flex-1">Confirm</Button>
</CardFooter>
```
### Example 3
```tsx
// Footer with supplementary info
<CardFooter className="justify-between">
  <span className="text-sm text-muted-foreground">Last updated 2 days ago</span>
  <Button size="sm">Edit</Button>
</CardFooter>
```