@saaskit

The shadcn/ui registry for B2B SaaS products.

Aperçu

Saaskit Home

10 essential components — pricing, trial, usage, onboarding, billing — ready to use, installable in one command.

bash
npx shadcn add @saaskit/pricing-table

Components

ComponentCategoryDescription
PricingTableMonetizationPlans, monthly/annual toggle, recommended plan highlight
TrialBannerConversion"X days remaining" banner with upgrade CTA
UsageMeterUsageQuota bar with alert thresholds (warn / danger)
OnboardingStepsActivationSetup checklist with progress tracking and skip
UpgradeModalUpsellModal for upgrading to a higher plan, with feature gate
TeamInviteCollaborationEmail invitation with role selection
InvoiceRowBillingInvoice row with status, amount, and download
PlanBadgeIdentityFree / Pro / Enterprise badge in the header
ApiKeyCardDeveloperDisplay + rotation of a masked API key
FeatureGatePermissionsWrapper that blocks or reveals a slot based on the plan

Installation

Prerequisites

  • Next.js 14+
  • shadcn/ui CLI 2.0+
  • Tailwind CSS v4
  • TypeScript 5+

Usage

bash
# Initialize shadcn/ui if needednpx shadcn@latest init
# Install a componentnpx shadcn add @saaskit/pricing-tablenpx shadcn add @saaskit/trial-bannernpx shadcn add @saaskit/usage-meter

Tech Stack

  • Next.js 15 — React framework
  • shadcn/ui CLI — Registry-based distribution
  • Tailwind CSS v4 — Styling
  • TypeScript — Strict typing
  • registry.json — Registry configuration
  • Vercel — Deployment
  • MDX — Documentation

Local Development

bash
pnpm installpnpm dev

License

MIT