Billing Sso Addon Pricing
A targeted upsell card for selling single sign-on as an add-on instead of gating it behind a full enterprise plan. Lists the concrete security features included, SAML, SCIM provisioning, audit logs, and enforced SSO, each with a short explanation, above a price and an Enable SSO button. Built for security settings pages, organization management dashboards, and enterprise upsell flows.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-sso-addon-pricing.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing125.tsx instead.
Usage
The file also exports billing125Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing125, billing125Demo } from "@/components/blocks/billing/billing125"; export default function Page() { return <Billing125 {...billing125Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Single sign-on" | Card heading. |
| description | string | none | Optional one-line note under the heading. |
| badge | string | "Add-on" | Small badge shown next to the heading. |
| price | string | none | Pre-formatted price, for example "$99". |
| period | string | "/mo" | Billing period suffix shown after the price. |
| features | SsoFeatureItem[] | none | Feature list rendered with a checkmark, each with an optional description. |
| ctaLabel | string | "Enable SSO" | Label on the call-to-action link. |
| ctaHref | string | "#" | URL the call-to-action links to, typically an IdP configuration page. |
| className | string | none | Extra classes for the outer container. |
Types
interface SsoFeatureItem { label: string; description?: string; }
Behavior notes
- This is a static display card. The Enable SSO action is a next/link, not a button with an onClick handler, since enabling SSO in practice means navigating to a setup or configuration page.
- Every feature in the list uses the same checkmark icon; only the label and optional description text change per item.
- Price and period are separate props (price and period) so the period suffix can be styled smaller and muted next to the bold price.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.