@saaskit
10 essential shadcn/ui components for B2B SaaS: Pricing, Billing, Usage, and Onboarding. Minimalist Soft Brutalist design.
10 components react shadcn-cli
Install this registry
shadcn (npm)
npx shadcn@latest add https://saaskit-theta.vercel.app/registry.json pnpm
pnpm dlx shadcn@latest add https://saaskit-theta.vercel.app/registry.json bun
bunx shadcn@latest add https://saaskit-theta.vercel.app/registry.json fetch registry
curl -s https://saaskit-theta.vercel.app/registry.json Components
10 total PricingTable component
Plans, toggle mensuel/annuel, highlight plan recommandé
npx shadcn@latest add https://saaskit-theta.vercel.app/r/pricing-table.json TrialBanner component
Bandeau J jours restants avec CTA upgrade
npx shadcn@latest add https://saaskit-theta.vercel.app/r/trial-banner.json UsageMeter component
Barre de quota avec seuils d'alerte (warn / danger)
npx shadcn@latest add https://saaskit-theta.vercel.app/r/usage-meter.json OnboardingSteps component
Checklist de setup avec progression et skip
npx shadcn@latest add https://saaskit-theta.vercel.app/r/onboarding-steps.json UpgradeModal component
Modal de passage au plan supérieur, avec feature gate
npx shadcn@latest add https://saaskit-theta.vercel.app/r/upgrade-modal.json TeamInvite component
Invitation par email avec sélection de rôle
npx shadcn@latest add https://saaskit-theta.vercel.app/r/team-invite.json InvoiceRow component
Ligne de facture avec statut, montant, téléchargement
npx shadcn@latest add https://saaskit-theta.vercel.app/r/invoice-row.json PlanBadge component
Badge Free / Pro / Enterprise dans le header
npx shadcn@latest add https://saaskit-theta.vercel.app/r/plan-badge.json ApiKeyCard component
Affichage + rotation de clé API masquée
npx shadcn@latest add https://saaskit-theta.vercel.app/r/api-key-card.json FeatureGate component
Wrapper qui bloque ou affiche un slot selon le plan
npx shadcn@latest add https://saaskit-theta.vercel.app/r/feature-gate.json