Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Subscription Plans
Table component with subscription management showing plan details, billing cycles, renewal dates and usage for React SaaS dashboards
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Manage subscriptions on your Next.js SaaS dashboard with this subscription plans table component. Features plan names with tier badges, billing cycle indicators, next renewal dates, usage meters against limits, payment status, and action buttons for upgrades or cancellations. Built with shadcn/ui Table, Badge, Progress, and Button components using Tailwind CSS and Lucide icons. The subscription overview enables quick account management perfect for SaaS billing pages, subscription platforms, membership sites, API usage dashboards, or any React app displaying recurring payment information.
Your Subscriptions
3 active · $78.00/month
| Plan | Status | Price | Next Billing | Usage | Payment |
|---|---|---|---|---|---|
Pro Plan pro | Active | $29/mo | Apr 15, 2024 | API Calls8420/10000 Storage3.2/5 +1 more metrics | Visa •••• 4242 |
Business Add-on business | Active | $49/mo | Apr 15, 2024 | Advanced Analytics1/1 Custom Domains2/5 | Visa •••• 4242 |
Enterprise Trial enterprise | Trial 12 days left | $199/yr | Apr 28, 2024 | API Calls1250/100000 Storage0.8/50 | Not set |
Starter Plan starter | Past Due | $9/mo | Overdue | Projects3/3 | Card expired |
Pro Plan (Paused) pro | Paused | $29/mo | Paused | API Calls0/10000 | Visa •••• 1234 |
Installation
Related blocks you will also like
Table with Pricing Comparison
Plan comparison
Table with Progress Bars
Usage meters
Table with Badge Counters
Limit badges
Table with DateTime Formatting
Renewal dates
Table with Status History
Billing history
Table with Quick Actions
Plan actions