Strong-Tie UXR Documentation

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 >= 20.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

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 design system source provides tailwindcss

If your project already uses Tailwind CSS, replace the tailwind import with the design system source to prevent conflicts:

globals.css

@import "@strongtie/design-system/styles/source";

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 4.5+ 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

Contributing to UXR Documentation ShadCN with Tailwind