Start
Foundations
Design Systemv1.3.0Search documentation
Search for a command to run or a page to navigate to.
Design Systemv1.3.0Search for a command to run or a page to navigate to.
Pre-built React components with Strongtie styling for rapid development.
The @strongtie/design-system package is the recommended way to use the Strongtie Design System in authenticated React projects. It delivers pre-built, versioned, accessible components as one dependency and upgrades with one version bump.
Migrating an existing shadcn app? The shadcn → Package
Codemod rewrites your @/components/ui/* imports to
@strongtie/design-system, swaps dependencies, and modularizes your CSS in one
pass.
@strongtie/* packages live on the Simpson Azure Artifacts feed; everything else stays on the public npm registry. Setup is two files — a committed project .npmrc that routes the @strongtie scope, plus credentials in your user-level ~/.npmrc.
Set up your .npmrc → walks through both files
step by step (scope routing and authentication). It takes about a minute, and
it's the single source of truth every install path shares.
Once set up, run npm view @strongtie/design-system version. It should print a
version. If it does not, your auth or registry routing is wrong — see
Set up your .npmrc or
Troubleshooting.
sonner is the peer dependency for toast notifications. Skip it if you don't use toasts.
If your project already runs Tailwind, use the modular imports so your app keeps its own full Tailwind build while sharing the design system's theme tokens.
/* 1. SST fonts and design tokens */
@import "@strongtie/design-system/styles/tokens";
/* 2. Tailwind CSS — your app owns this single instance */
@import "tailwindcss";
/* 3. Design system theme (CSS variables + @theme mappings) */
@import "@strongtie/design-system/styles/theme";
/* 4. Animations (optional) */
@import "tw-animate-css";
/* 5. Register the design system dist for Tailwind scanning */
@import "@strongtie/design-system/styles/scan";
/* Scan your app source */
@source "../app";
@source "../components";SST fonts + CSS custom properties
light/dark vars + @theme mappings + dark variant
registers the package dist so Tailwind generates component utilities
Importing @strongtie/design-system/styles/scan is required. Without it,
Tailwind won't generate the utility classes design system components use, and
they render unstyled.
Do not import @strongtie/design-system/styles/source — it is the package's
unprocessed CSS and contains build-internal @source paths that only work
inside the package's own build pipeline.
Import the single monolithic bundle at your application entry point:
import "@strongtie/design-system/styles"This ships only the utilities the design system itself uses. Consumer-specific classes like bg-purple-500 will not be generated — use the Tailwind path above if you need them.
import { Button } from "@strongtie/design-system/button"
export function Example() {
return <Button>Get Started</Button>
}If the button renders unstyled, you're missing the /styles/scan import.