Getting Started
Components
Search for a command to run...
This guide will help you migrate from the deprecated @studs/react package. We recommend two migration paths:
New projects should use shadcn/ui. The @strongtie/design-system package is best for quick migrations and existing projects. For new work, follow our Getting Started guide to use shadcn/ui with Strongtie design standards.
| Item | Old (@studs/react) | shadcn/ui (Recommended) | @strongtie/design-system (Alternative) |
|---|---|---|---|
| Approach | NPM package | Copy-paste components | NPM package |
| Ownership | Package dependency | You own the code | Package dependency |
| Customization | Limited | Full control | Limited |
| AI Support | None | Native AI assistant support | None |
| Registry | npm (public) | No registry needed | Azure Artifacts (Simpson feed) |
| Version | 3.1.2 | Use shadcn CLI | 1.0.0 |
Are you looking for migration assistance for the Telerik UI Kit? Visit our CDN migration guide.
We're recommending shadcn/ui because:
The @strongtie/design-system package exists for teams that prefer traditional npm packages or need a quick migration path.
This path migrates you to the modern shadcn/ui approach with Strongtie design standards.
The fastest way is using our preset:
"https://ui.shadcn.com/init?base=radix&style=vega&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=vite"
--template vite ```
</TabsContent>
<TabsContent value="next">
```bash
npx shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=vega&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=next" --template nextWhen prompted, choose:
Replace your CSS variables with Strongtie's design standards. See the shadcn with Tailwind guide for the complete CSS.
Before:
import { Button } from "@studs/react/button"After:
import { Button } from "@/components/ui/button"npm uninstall @studs/reactBest Practice: Create abstracted components for custom functionality. For
example, create components/custom-button.tsx that wraps
components/ui/button.tsx. This keeps shadcn components pristine and makes
updates easier.
Learn more about shadcn + Tailwind →
This path provides a quicker migration with minimal code changes, similar to the old @studs/react approach.
All imports must be updated from @studs/react to @strongtie/design-system.
The new package starts at v1.0.0. The API remains largely the same.
@studs/react included normalize.css automatically. @strongtie/design-system does not.
What you need to do:
Add your own CSS reset:
Then import it before the design system styles:
import "modern-normalize"
import "@strongtie/design-system/styles"Recommended options:
Before installing, configure authentication for the Simpson feed. See the Installation guide for detailed instructions.
Quick setup — 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 install from npmjs.org without errors.
Then follow the Azure Artifacts npm authentication guide to complete authentication setup.
npm uninstall @studs/react
# or
yarn remove @studs/react
# or
pnpm remove @studs/reactYour package.json should now look like this:
{
"dependencies": {
"@strongtie/design-system": "^1.0.0"
}
}You'll need to update all component imports throughout your codebase.
import { Button } from "@studs/react/button"
import { Card, CardContent } from "@studs/react/card"
import { Input } from "@studs/react/input"
import "@studs/react/styles"import { Button } from "@strongtie/design-system/button"
import { Card, CardContent } from "@strongtie/design-system/card"
import { Input } from "@strongtie/design-system/input"
import "@strongtie/design-system/styles"Use your IDE's find-and-replace feature (with regex if needed):
Find: @studs/react
Replace: @strongtie/design-system
Or use command-line tools:
# Using sed (macOS/Linux)
find src -type f -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" | \
xargs sed -i '' 's/@studs\/react/@strongtie\/design-system/g'
# Using PowerShell (Windows)
Get-ChildItem -Path src -Recurse -Include *.tsx,*.ts,*.jsx,*.js |
ForEach-Object {
(Get-Content $_.FullName) -replace '@studs/react', '@strongtie/design-system' |
Set-Content $_.FullName
}If you're importing styles directly, update those imports as well:
import "@studs/react/styles"@import "@studs/react/styles";import "@strongtie/design-system/styles"@import "@strongtie/design-system/styles";After making the changes:
Clear your build cache:
rm -rf node_modules/.cache
rm -rf distReinstall dependencies:
Run your tests:
npm testStart your development server:
Build your application:
Once you've updated the package name and imports, your existing code will work without modifications:
// This works exactly the same in both packages
import { Button } from "@strongtie/design-system/button"
function MyComponent() {
return (
<Button variant="primary" size="lg" onClick={handleClick}>
Click Me
</Button>
)
}For CI/CD pipelines, configure Azure Artifacts authentication for the Simpson feed.
See the Azure Artifacts npm authentication guide for platform-specific instructions on:
npmAuthenticate task in Azure PipelinesFeed: Simpson
Registry: https://pkgs.dev.azure.com/StrongTie/_packaging/Simpson/npm/registry/
Problem: Getting 401 Unauthorized errors when installing.
Solution:
.npmrc is configured correctly:
npm config get registry
# Should return: https://pkgs.dev.azure.com/StrongTie/_packaging/Simpson/npm/registry/Problem: npm can't find @strongtie/design-system.
Solution:
Verify the registry is set correctly:
npm config get registryShould return: https://pkgs.dev.azure.com/StrongTie/_packaging/Simpson/npm/registry/
Check that you've completed the authentication setup from the Azure Artifacts guide
Ensure you have access to the Simpson feed in Azure DevOps
Problem: Getting import errors after updating package name.
Solution:
Clear your build cache:
rm -rf node_modules/.cache distRemove and reinstall dependencies:
rm -rf node_modules package-lock.json
npm installRestart your development server
Check for any missed imports:
grep -r "@studs/react" src/Problem: TypeScript can't find type definitions.
Solution:
Clear TypeScript cache:
rm -rf node_modules/.cacheRestart your TypeScript server (VS Code: Cmd/Ctrl + Shift + P → "Restart TS Server")
Verify the package is installed correctly:
npm list @strongtie/design-systemProblem: Components render but without styles.
Solution:
Verify you've updated the styles import:
import "@strongtie/design-system/styles"Check that the import is in your main entry file (e.g., main.tsx, App.tsx)
Clear your build cache and restart
Problem: Components render but styling appears broken or missing.
Solution:
You probably need to add a CSS reset. The old package included normalize.css automatically.
Install a CSS reset like:
Then import it in your entry file:
import "@strongtie/styles/reset"
import "@strongtie/design-system/styles"Problem: Margins and spacing around components don't match the old package.
Solution:
The old package had global margin resets. Add your own base styles or use our optional base stylesheet.
/* Add to your global CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Or create a base stylesheet with your preferred defaults:
/* base.css */
body {
margin: 0;
padding: 0;
font-family: var(--font-family);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}Problem: Custom styles aren't being applied to components.
Solution:
Use className with your own CSS classes, or customize via CSS custom properties. Don't fight specificity.
// ✅ Good: Use className
import { Button } from "@strongtie/design-system/button"
import "./my-button.css"
;<Button className="my-custom-button">Click me</Button>/* my-button.css */
.my-custom-button {
background-color: purple;
border-radius: 8px;
}If you encounter any issues during migration:
The @studs/react package is deprecated and will not receive updates. We strongly recommend completing this migration as soon as possible.
Ready to learn more? Check out our Getting Started guide to explore all the features of the Strongtie Design System.