Installing the @strongtie/design-system Package

Pre-built React components with Strongtie styling for rapid development.

The @strongtie/design-system package provides pre-built React components. It's built on the same shadcn/ui + Tailwind foundation as the recommended approach, but packaged for convenience.

Trade-off: Faster setup, less customization. For deeper control over components, consider the ShadCN + Tailwind approach instead.

When to Choose This

Internal tools - Quick setup for admin dashboards, internal apps
Rapid prototyping - Get something working fast
Teams new to shadcn/Tailwind - Familiar package-based workflow
Consistency over customization - Standard components are fine

What's Included

50+ React components - Buttons, forms, dialogs, navigation, data display
TypeScript - Full type definitions
Accessibility - WCAG compliant, keyboard navigation, ARIA attributes

Prerequisites

React 18+ or 19+
Node.js >= 22.0.0
npm >= 10.0.0

Installation

Configure Azure Artifacts

The package is hosted on Azure Artifacts (Simpson feed). You'll need to configure npm authentication:

Create a .npmrc file in your project root:

@strongtie:registry=https://pkgs.dev.azure.com/StrongTie/_packaging/Simpson/npm/registry/
@strongtie:always-auth=true
registry=https://registry.npmjs.org/

Important: Use @strongtie:registry (scoped) instead of registry (global). This ensures only @strongtie/* packages use Azure Artifacts authentication, while public packages like sonner, tsdown, etc. install from npmjs.org without errors.

Set up authentication for the Simpson feed by following the Azure Artifacts npm authentication guide

The authentication setup differs for Windows (uses vsts-npm-auth) vs macOS/Linux (manual PAT configuration). Follow the instructions for your operating system in the Microsoft documentation.

Install the package


npm install @strongtie/design-system sonner

sonner is a peer dependency for toast notifications. Skip if you don't need toasts.

Import styles

Add the styles import to your application entry point:

import "@strongtie/design-system/styles"

Use components

import { Button } from "@strongtie/design-system/button"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"
 
export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  )
}

Framework Setup

Using Tailwind CSS in your Next.js app? Don't import styles here — see Using with Tailwind CSS below instead.

app/layout.tsx

import "@strongtie/design-system/styles"
import type { Metadata } from "next"
 
export const metadata: Metadata = {
  title: "My App",
  description: "Built with Strongtie Design System",
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Using with Tailwind CSS

The monolithic @strongtie/design-system/styles import does not give your app full Tailwind access. It contains only the utility classes the design system itself uses — consumer-specific classes like bg-purple-500 or text-fuchsia-600 will not be generated.

If your project has Tailwind CSS installed, use the modular imports instead. This gives your app its own full Tailwind build while sharing the design system's theme tokens.

src/app/globals.css

/* 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";
 
/* Scan your app source AND design system components */
@source "../app";
@source "../components";
@source "../../node_modules/@strongtie/design-system/dist";

What each import provides:

/styles/tokens — SST font-face declarations and CSS custom properties (--space-*, --font-size-*, etc.)
/styles/theme — Light/dark mode variables, @theme inline mappings for utilities like bg-primary and text-foreground, and @custom-variant dark

The @source directive pointing to the design system dist is required. Without it, Tailwind won't generate the utility classes used by design system components, and they will render unstyled.

Do not use @strongtie/design-system/styles/source — that export is the design system's own unprocessed CSS and contains relative @source paths that only work inside the package's build pipeline.

Component Imports

Components are imported via path exports for optimal tree-shaking:

// Individual imports (recommended)
import { Button } from "@strongtie/design-system/button"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"
import {
  Dialog,
  DialogContent,
  DialogTrigger,
} from "@strongtie/design-system/dialog"
import { Input } from "@strongtie/design-system/input"

Customization

Via className

Add custom classes to any component:

<Button className="my-custom-class">Custom Button</Button>

Limitations

Unlike the ShadCN + Tailwind approach, you cannot:

Modify component internals (variants, default props)
Add new component variants
Change the underlying primitive library

If you need this level of control, consider migrating to the shadcn approach.

CI/CD Configuration

For CI/CD pipelines, you'll need to configure Azure Artifacts authentication. See the Azure Artifacts npm authentication guide for details on:

Setting up Personal Access Tokens (PATs)
Configuring authentication in GitHub Actions, Azure DevOps, GitLab CI, etc.
Using the npmAuthenticate task in Azure Pipelines

The Simpson feed requires a PAT with Packaging > Read permissions for consuming packages.

Troubleshooting

Styles not loading

Ensure @strongtie/design-system/styles is imported in your entry file
Check import order - styles should come before component usage
Clear build cache and restart dev server

Authentication errors

Verify your Azure DevOps PAT has Packaging > Read permissions

Check .npmrc configuration should have scoped registry:

cat .npmrc
# Should show:
# @strongtie:registry=https://pkgs.dev.azure.com/StrongTie/_packaging/Simpson/npm/registry/
# @strongtie:always-auth=true
# registry=https://registry.npmjs.org/

If you see registry= without @strongtie: prefix, you have the wrong config (this will cause auth errors for public packages)
Re-run authentication setup following the Azure Artifacts guide

E401 Authentication errors for public packages

If you get authentication errors when installing public packages like tsdown, sonner, etc.:

Check your .npmrc - if it has registry=https://pkgs.dev.azure.com/... (without @strongtie: prefix), this is the problem
Update to use scoped registry as shown in Step 1 above
Run npm install again

Module not found

Clear node_modules and reinstall:

rm -rf node_modules package-lock.json
npm install

Restart your dev server

TypeScript errors

Ensure TypeScript 5.0+ is installed
Set moduleResolution to "bundler" or "node16" in tsconfig.json
Restart TypeScript server: Cmd/Ctrl + Shift + P > "TypeScript: Restart TS Server"

Migrating from @studs/react

If you're migrating from the deprecated @studs/react package, see our Migration Guide.

Next Steps

Browse components
View design tokens
Consider ShadCN + Tailwind for more control

Code Quality Setup ShadCN with Tailwind