---
name: "@saaskit"
slug: "saaskit"
description: "10 essential shadcn/ui components for B2B SaaS: Pricing, Billing, Usage, and Onboarding. Minimalist Soft Brutalist design."
category: "E-commerce/payments"
tags: ["audio", "cards", "onboarding", "overlays", "payments", "pro-available", "retro", "tables"]
framework: "react"
license: null
author: null
website: "https://saaskit-theta.vercel.app"
github: null
registry: "https://saaskit-theta.vercel.app/registry.json"
pro: true
pro_url: "https://saaskit-theta.vercel.app/pricing"
github_stars: null
component_count: 10
generated_at: "2026-07-28T08:00:50.948Z"
---

# @saaskit

10 essential shadcn/ui components for B2B SaaS: Pricing, Billing, Usage, and Onboarding. Minimalist Soft Brutalist design.

## Links

- Website: https://saaskit-theta.vercel.app
- Registry JSON: https://saaskit-theta.vercel.app/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/saaskit
- This file: https://sh4dcn.vercel.app/md/saaskit.md
- Pro / pricing: https://saaskit-theta.vercel.app/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://saaskit-theta.vercel.app/registry.json
pnpm dlx shadcn@latest add https://saaskit-theta.vercel.app/registry.json
bunx shadcn@latest add https://saaskit-theta.vercel.app/registry.json
# fetch the raw registry index
curl -s https://saaskit-theta.vercel.app/registry.json
```

## Components (10)

| name | type | description | install |
| --- | --- | --- | --- |
| pricing-table | registry:component | Plans, toggle mensuel/annuel, highlight plan recommandé | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/pricing-table.json` |
| trial-banner | registry:component | Bandeau J jours restants avec CTA upgrade | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/trial-banner.json` |
| usage-meter | registry:component | Barre de quota avec seuils d'alerte (warn / danger) | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/usage-meter.json` |
| onboarding-steps | registry:component | Checklist de setup avec progression et skip | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/onboarding-steps.json` |
| upgrade-modal | registry:component | Modal de passage au plan supérieur, avec feature gate | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/upgrade-modal.json` |
| team-invite | registry:component | Invitation par email avec sélection de rôle | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/team-invite.json` |
| invoice-row | registry:component | Ligne de facture avec statut, montant, téléchargement | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/invoice-row.json` |
| plan-badge | registry:component | Badge Free / Pro / Enterprise dans le header | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/plan-badge.json` |
| api-key-card | registry:component | Affichage + rotation de clé API masquée | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/api-key-card.json` |
| feature-gate | registry:component | Wrapper qui bloque ou affiche un slot selon le plan | `npx shadcn@latest add https://saaskit-theta.vercel.app/r/feature-gate.json` |

## For AI agents

```text
You are adding components from @saaskit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/saaskit.md) for the component list.
2. Fetch the machine-readable index: https://saaskit-theta.vercel.app/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: saaskit).
```