Getting Started
Components
Search for a command to run...
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.
The package is hosted on Azure Artifacts (Simpson feed). You'll need to configure npm authentication:
.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.
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.
sonner is a peer dependency for toast notifications. Skip if you don't need
toasts.
Add the styles import to your application entry point:
import "@strongtie/design-system/styles"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>
)
}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>
)
}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:
@import "@strongtie/design-system/styles/source";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"Add custom classes to any component:
<Button className="my-custom-class">Custom Button</Button>Unlike the ShadCN + Tailwind approach, you cannot:
If you need this level of control, consider migrating to the shadcn approach.
For CI/CD pipelines, you'll need to configure Azure Artifacts authentication. See the Azure Artifacts npm authentication guide for details on:
npmAuthenticate task in Azure PipelinesThe Simpson feed requires a PAT with Packaging > Read permissions for consuming packages.
@strongtie/design-system/styles is imported in your entry file.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/registry= without @strongtie: prefix, you have the wrong config (this will cause auth errors for public packages)If you get authentication errors when installing public packages like tsdown, sonner, etc.:
.npmrc - if it has registry=https://pkgs.dev.azure.com/... (without @strongtie: prefix), this is the problemnpm install againrm -rf node_modules package-lock.json
npm installmoduleResolution to "bundler" or "node16" in tsconfig.jsonCmd/Ctrl + Shift + P > "TypeScript: Restart TS Server"If you're migrating from the deprecated @studs/react package, see our Migration Guide.