# Awesome Card
URL: /docs/web/components/awesome-card

A card with a hatched-stripe header and an inset content area, perfect for displaying stats and metrics.

**Demo:**

```tsx
'use client';
// @custom-demo

import {
  AwesomeCard,
  AwesomeCardBody,
  AwesomeCardExpandedBody,
  AwesomeCardHeader,
  AwesomeCardIcon,
  AwesomeCardTitle,
  AwesomeCardTrend,
  AwesomeCardValue
} from '@docyrus/ui/components/awesome-card';

import {
  Activity, DollarSign, ShoppingCart, Users
} from 'lucide-react';

export function AwesomeCardDemo() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-3">
      
          
        
        
          
        
      

      
          
        
        
          
        
      

      
          
        
        
          
        
      

      <div className="self-start">
        
            
          
          
            
          
        
      </div>

      
          
        
        
          
        
        
      

      
          
        
        
          
        
        
      
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-awesome-card
```

## Usage

```tsx
import {
  AwesomeCard,
  AwesomeCardHeader,
  AwesomeCardTitle,
  AwesomeCardIcon,
  AwesomeCardBody,
  AwesomeCardValue,
  AwesomeCardTrend
} from "@docyrus/ui/components/awesome-card";

    
  
  
    
  

```

## Components

| Component | Description |
|-----------|-------------|
| `AwesomeCard` | Root container with diagonal stripe background |
| `AwesomeCardHeader` | Header section with flex layout |
| `AwesomeCardTitle` | Title text element |
| `AwesomeCardIcon` | Icon container in the header |
| `AwesomeCardBody` | Inset content area with card background |
| `AwesomeCardValue` | Large value display (e.g. metrics, stats) |
| `AwesomeCardTrend` | Trend indicator with positive/negative coloring |

## API Reference

### AwesomeCardTrend

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `positive` | `boolean` | — | When `true`, text is green. When `false`, text is red. When `undefined`, uses muted color. |
| `className` | `string` | — | Additional CSS classes |