# Usage alert (/docs/ui/product/usage-alert)



<EmailExample id="usage-alert" />

## Installation [#installation]

<Tabs items="[&#x22;CLI&#x22;, &#x22;Manual&#x22;]">
  <Tab value="CLI">
    ```bash
    npx shadcn@latest add https://email-sdk.dev/r/usage-alert.json
    ```
  </Tab>

  <Tab value="Manual">
    Copy this template into your app and customize its props, words, and links.

    ```tsx title="src/ui/email/usage-alert.tsx"
    import {
      EmailButton,
      EmailCard,
      EmailHeading,
      EmailText,
      ShadcnEmail,
    } from "@opencoredev/email-sdk/react";

    export function UsageAlertEmail({ percent }: { percent: number }) {
      return (
        <ShadcnEmail preview={`You have used ${percent}% of this month’s email volume`}>
          <EmailCard>
            <EmailHeading>You’re nearing your email limit</EmailHeading>
            <EmailText>Your workspace has used {percent}% of its monthly email volume.</EmailText>
            <div style={{
              backgroundColor: "#e4e4e7",
              borderRadius: 999,
              height: 8,
              margin: "24px 0",
              overflow: "hidden",
            }}>
              <div style={{ backgroundColor: "#18181b", height: "100%", width: `${percent}%` }} />
            </div>
            <EmailText>85,240 of 100,000 emails used</EmailText>
            <EmailButton href="https://acme.com/usage">Review usage</EmailButton>
          </EmailCard>
        </ShadcnEmail>
      );
    }
    ```
  </Tab>
</Tabs>