@carefully-built/saas-kit

One install for Carefully Built SaaS components, product surfaces, and helpers.

Carefully Built SaaS Kit exists so every new B2B product does not have to reinvent the same tables, forms, filters, sheets, settings, files, notifications, calendars, and dashboard patterns from scratch.

Use this package when you want managed npm imports and shared upgrades across apps. Use @carefully-built/cli when you want to eject editable component source into an app.

Component Previews

Install

bun add @carefully-built/saas-kit

import { Button, SmartTable, TableToolbar, ResponsiveSheet } from "@carefully-built/saas-kit";

The package includes the modular Carefully Built packages as dependencies. Your app should still install the framework peer dependencies it actually uses, such as React, Next.js, Convex, WorkOS, Radix primitives, React Hook Form, TipTap, FullCalendar, and Recharts.

Package Modules

Import from the root for shared UI primitives, or from a subpath for a product area.

Example subpath imports:

import { DashboardPageLayout } from "@carefully-built/saas-kit/app-shell";
import { AuthLoginPage } from "@carefully-built/saas-kit/auth-pages/pages";
import { createWorkOSWidgetTokenResponse } from "@carefully-built/saas-kit/server";
import { createSuperAdminPage } from "@carefully-built/saas-kit/next";

Full UI Registry

Every public UI module exported by @carefully-built/ui is available through @carefully-built/saas-kit and through the CLI registry.

Some entries export several related components, hooks, helpers, and types from one module. TypeScript autocomplete will show the full API after installing the kit.

Editable Source With The CLI

Use the CLI when a component should become local code that you can edit directly.

bunx @carefully-built/cli list
bunx @carefully-built/cli add button
bunx @carefully-built/cli add smart-table
bunx @carefully-built/cli add responsive-sheet

The CLI copies the component source and its local dependency closure into your app. It reads common shadcn project conventions such as components.json aliases and tsconfig.json paths.

Import vs Eject

Import from @carefully-built/saas-kit when:

• you want package updates and bug fixes
• the component should stay shared across apps
• product-specific differences can be handled with props, slots, className, or classes

Use @carefully-built/cli add when:

• the component needs local product behavior
• design needs to diverge from the shared package
• you want to own and edit every line in the consuming app
• the component should follow the app's normal source-control workflow

Copy And Localization

Every user-facing string is still a label/config prop. Defaults follow the kit locale: English without a provider, Italian with KitLocaleProvider:

import { KitLocaleProvider } from '@carefully-built/saas-kit';

<KitLocaleProvider locale="it">{children}</KitLocaleProvider>;

Localized so far: ui (overlays, table toolbar, searchable select, empty and error states, file dropzone, user picker), forms fields, auth-pages (pages, forms, social buttons, organization selection, legal consent, validation) and the search command palette. Server-side auth action messages stay in config.messages.