Skip to content
Agentic UI Kit
Buy

Billing Dunning States

Handling failed charges and the grace period in SaaS subscriptions.

Full screen Try a theme

About this feature

What it's for

  • Handling failed charges and the grace period in SaaS subscriptions.
  • Notification of suspension for non-payment with immediate reactivation.
  • Panel for resolving overdue invoices and updating the payment method.

For initial checkout or first purchase screens, use Billing Checkout Flow. For comparative selection of commercial plans, use Billing Pricing Table.

Includes

  • Past due state
  • Grace period state
  • Suspended state
  • Empty state
  • Payment retry
  • Payment method update
  • Timeline retry history
  • Invoice breakdown

Works with

  • Radix UI primitives (the registry variant it ships in)
  • React 19, Next.js App Router and Tailwind CSS 4, installed with the 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 billing-dunning-states
Installs through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/billing-dunning-states

Used in

A standalone component: drop it into any screen.

Type
Feature
Variants
Radix UI
Themes
Light and dark
Widths
Preview it at desktop, tablet and mobile widths above.
Motion
Animated, with a reduced-motion fallback