A collection of composable card UI components built on `React.forwardRef`, providing a structured layout system for displaying grouped content with optional header, title, description, content, and footer sections. Also exports a specialized `CardHorizontal` component for icon-labeled feature rows.
## Key Components
| Export | Description |
|---|---|
| `Card` | Root container with rounded border, card background, and shadow |
| `CardHeader` | Flex column wrapper with vertical spacing and padding |
| `CardTitle` | Styled heading using `text-h2` typography token |
| `CardDescription` | Muted subtitle using `text-h6` and `text-muted-foreground` |
| `CardContent` | Main body area with padding (top padding removed) |
| `CardFooter` | Horizontal flex row for actions, aligned at card bottom |
| `CardHorizontal` | Standalone horizontal card with icon, title, and description |
All `forwardRef` components accept standard `HTMLDivElement` attributes and merge custom `className` via the `cn` utility.
## Usage Example
```typescript
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@/components/ui/card"
import { CardHorizontal } from "@/components/ui/card"
import { ShieldIcon } from "lucide-react"
// Composable vertical card
function FeatureCard() {
return (
Endpoint ManagementMonitor and manage all devices