# Coupon Card

> Discount codes with their usage and what they earned.

Component · Commerce · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/CouponCard/)

Discount codes with their usage and what they earned.

Props: `code`, `kind` ("percent" | "fixed"), `value` (percent or amount), `currency`, `used`, `limit`, `until`, `min` (minimum order), `revenue`, `text`, `status` + `statusLabel`, `onCopy`, `menu`.

## Example

```tsx
import * as React from "react";
import { CouponCard } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "1fr 1fr",
          gap: 16,
        } as React.CSSProperties
      }
    >
      <CouponCard
        code="SPRING20"
        kind="percent"
        value={20}
        used={312}
        limit={500}
        until="Apr 30"
        min={10}
        revenue={8420}
        text="All Instagram packages"
        menu={[
          {
            label: "Edit",
            icon: "edit",
          },
          {
            label: "Duplicate",
            icon: "copy",
          },
          "-",
          {
            label: "Deactivate",
            icon: "pause",
            danger: true,
          },
        ]}
      />
      <CouponCard
        code="WELCOME5"
        kind="fixed"
        value={5}
        used={1204}
        text="First order"
        revenue={21890}
      />
      <CouponCard
        code="BLACKFRIDAY"
        kind="percent"
        value={30}
        used={1000}
        limit={1000}
        until="Nov 29"
        statusLabel="Used up"
      />
    </div>
  );
}
```

## Props

### CouponCard

| Prop | Type | Notes |
| --- | --- | --- |
| `code` | `string` | Required |
| `kind?` | `"percent" \| "fixed"` |  |
| `value` | `number` | Required |
| `currency?` | `string` |  |
| `used?` | `number` |  |
| `limit?` | `number` |  |
| `until?` | `string` |  |
| `min?` | `number` |  |
| `revenue?` | `number` |  |
| `text?` | `ReactNode` |  |
| `status?` | `Status` |  |
| `statusLabel?` | `string` |  |
| `onCopy?` | `() => void` |  |
| `menu?` | `MenuProps["items"]` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |