Launch Billing UIs at warp speed
Stop reinventing the wheel , Ship production ready accessible billing components with 10x more faster speed, built for React and Shadcn.
import { UpdatePlanCard } from "@/components/billingsdk/update-plan-card"
import { plans } from "@/lib/billingsdk-config"
export default function App() {
return (
<UpdatePlanCard
currentPlan={plans[0]}
plans={plans}
onPlanChange={(planId) => console.log('Upgraded to:', planId)}
/>
)
}
import { UpdatePlanCard } from "@/components/billingsdk/update-plan-card"
import { plans } from "@/lib/billingsdk-config"
export default function App() {
return (
<UpdatePlanCard
currentPlan={plans[0]}
plans={plans}
onPlanChange={(planId) => console.log('Upgraded to:', planId)}
/>
)
}Why choose BillingSDK?
Customizable
Easily adjust components with props and Tailwind classes for full control over styling, colors, and layout.
Copy & Paste
No dependencies or installs required. Copy the code into your project and start using it instantly.
Ready to Use
Production-ready components tested across browsers and devices—just import and use, no setup needed.
Open Source
Free to use and modify for any project with full source code access and community contributions.
Fast Development
Save weeks of work with pre-built billing components and focus on core business logic instead.
Accessible
WCAG-compliant components with ARIA labels and keyboard support to ensure usability for all.
Explore Interactive Billing Components
Pricing
Choose the plan that's right for you
per month
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
per month
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
per month
- Presence
- Comments
- Notifications
- Text Editor
- Sync Datastore
Get your billing system running in minutes
npx shadcn@latest add @billingsdk/pricing-table-onenpx shadcn@latest add @billingsdk/pricing-table-one1:root {
2 --primary: oklch(0.6 0.25 253);
3 --primary-foreground: oklch(0.985 0 0);
4 --secondary: oklch(0.97 0.01 253);
5 --radius: 0.625rem;
6}1:root {
2 --primary: oklch(0.6 0.25 253);
3 --primary-foreground: oklch(0.985 0 0);
4 --secondary: oklch(0.97 0.01 253);
5 --radius: 0.625rem;
6}1import { PricingTableOne } from "@/components/billingsdk/pricing-table-one";
2import { plans } from "@/lib/billingsdk-config";
3
4<PricingTableOne
5 plans={plans}
6 onPlanSelect={(planId) => console.log('Selected:', planId)}
7 theme="classic"
8 size="medium"
9/>1import { PricingTableOne } from "@/components/billingsdk/pricing-table-one";
2import { plans } from "@/lib/billingsdk-config";
3
4<PricingTableOne
5 plans={plans}
6 onPlanSelect={(planId) => console.log('Selected:', planId)}
7 theme="classic"
8 size="medium"
9/>
Don't code,
just prompt & integrate.
Sentra is the new agentic stack from Dodo Payments, an IDE-first assistant that integrates billing and payments, gives insights, and executes actions inside VS Code, Cursor or Windsurf.
You got questions? We got answers
Join our community
Connect with other developers, get help, and contribute to the project