Email Payment Failed
Payment failed email template.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this email
What it's for
- Payment failed email template.
- Dunning email card declined update payment method.
- Failed charge email with retry date.
For in-app billing banners, use Billing Dunning States.
Includes
- Payment failed
- Dunning
- Decline reason
- Retry schedule
- Update payment method
- Grace period
- Plain text
- Preheader
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19 and Tailwind CSS 4 in Next.js (App Router), Vite, React Router or TanStack Start, installed with the agentic-ui or shadcn CLI
- Your theme tokens, in light and dark mode
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
Agentic UI CLI
agentic-ui add email-payment-failedInstalls through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/email-payment-failedUsed in
A standalone component: drop it into any screen.
- Type
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- npm packages
- None beyond your project's React and Next.js
- Registry dependencies
email-kit- Files
1 file
- components/agentic-ui/email-payment-failed/email-payment-failed/email-payment-failed.tsx
Related components
Email Account Deleted
Account deleted confirmation email.
Details and live previewEmail File Ready
Export ready email with download link.
Details and live previewEmail Kit
Shared email layout and theme for transactional emails that match the app's theme preset.
Details and live previewEmail Magic Link
Magic link sign in email.
Details and live preview