BillingSummary

Compact billing summary with semantic usage progress, renewal context, and clear plan-management actions.

InterfaceSource ready10 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/billing-summary.json
Interactive preview
Interface

Current plan

Studio

Renews Aug 15, 2026

$29/month

Exports68 of 100

Install with the CLI

# adds BillingSummary to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/billing-summary.json

Or install the package

// npm install @uigrids/react-ui
import { BillingSummary } from '@uigrids/react-ui'

export default function App() {
  return <BillingSummary />
}

Props

PropTypeDefaultDescription
planstring'Studio'Configures the plan option.
amountstring'$29'Configures the amount option.
intervalstring'month'Configures the interval option.
usagenumber68Configures the usage option.
allowancenumber100Configures the allowance option.
usageLabelstring'Exports'Configures the usage label option.
renewalstring'Renews Aug 15, 2026'Configures the renewal option.
onManageunknown-Configures the on manage option.
onChangePlanunknown-Configures the on change plan option.
classNamestring''Additional CSS classes for the outer element.