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.
Migrate from the deprecated @studs/react package to the maintained @strongtie/design-system package.
This guide moves an application from the deprecated @studs/react package to @strongtie/design-system. The maintained package keeps the familiar subpath-import workflow while adding current Strongtie tokens, accessible primitives, and versioned updates.
Already have locally copied shadcn components instead? The shadcn → Strongtie package codemod automates that separate migration.
The maintained package is a drop-in for most call sites — same subpath imports, current tokens, accessible primitives.
| Item | @studs/react | @strongtie/design-system |
|---|---|---|
| Status | Deprecated | Maintained |
| Distribution | npm package | Simpson Azure Artifacts package |
| Imports | @studs/react/button | @strongtie/design-system/button |
| Styles | Included legacy reset | Explicit Strongtie styles; reset is application-owned |
| Updates | No further releases | Versioned fixes and component releases |
Migrating the Telerik UI Kit rather than @studs/react? Use the Telerik
migration guide.
Three things differ from @studs/react. Read these before you start — they shape the steps below.
@studs/react/* imports move to @strongtie/design-system/*@studs/react pulled in normalize.css automatically. Install a reset of your own and import it before the Strongtie styles.
import "modern-normalize"
import "@strongtie/design-system/styles"Follow Set up your .npmrc to scope the @strongtie namespace to the Simpson feed and supply a credential.
Keep registry routing in the project .npmrc and credentials in ~/.npmrc. Grant consuming PATs only Packaging > Read access — nothing writes to the feed from a product app.
npm uninstall @studs/react
npm install @strongtie/design-systemUse the equivalent remove and add commands if your project uses pnpm, Yarn, or Bun.
Only the package name changes — the subpath after it stays the same.
Before:
import { Button } from "@studs/react/button"
import { Card, CardContent } from "@studs/react/card"
import { Input } from "@studs/react/input"After:
import { Button } from "@strongtie/design-system/button"
import { Card, CardContent } from "@strongtie/design-system/card"
import { Input } from "@strongtie/design-system/input"Run a project-wide replacement — find @studs/react, replace @strongtie/design-system — then confirm no old imports remain:
rg "@studs/react" srcBefore:
import "@studs/react/styles"After:
import "modern-normalize"
import "@strongtie/design-system/styles"Projects that already own a reset should omit modern-normalize. Tailwind projects should use the modular style imports instead of the monolithic styles export.
Then start the application and manually verify focus behavior, forms, dialogs, responsive navigation, light mode, and dark mode.
All three commands exit 0 and the app renders correctly? The migration is done — remove @studs/react from any remaining dependency lists and lockfiles. If something failed, see Troubleshooting below.
CI must authenticate to the Simpson feed before running npm install or npm ci. Use a secret with Packaging > Read permission, or the npmAuthenticate task in Azure Pipelines. See the Azure Artifacts npm authentication guide for pipeline-specific setup.
Never commit a PAT or a generated credential block. Credentials belong in a pipeline secret or the user-level ~/.npmrc, never in the repo.
Confirm it has Packaging → Read permission and hasn't expired.
The project .npmrc must use the scoped @strongtie:registry key.
Credentials should exist only in the user-level ~/.npmrc.
Run npm view @strongtie/design-system version to separate feed auth from the app build.
Verify the scoped registry:
npm config get @strongtie:registryIt should return:
https://pkgs.dev.azure.com/StrongTie/_packaging/Simpson/npm/registry/Check for missed imports and verify the requested component has a package subpath:
rg "@studs/react" src
npm list @strongtie/design-systemThen clear the framework build cache and restart the development server.
Confirm the style import runs once in the application entry point. Tailwind consumers must also register the design-system package for scanning as shown in the Tailwind setup.
The old package supplied a global reset. Add your application's chosen reset before the Strongtie styles import, then define product-specific document defaults in global CSS.
Compose a product component around the package primitive and pass className through that boundary:
import { Button } from "@strongtie/design-system/button"
export function SaveButton() {
return <Button className="min-w-32">Save changes</Button>
}