Getting Started
Foundations
Components
Search for a command to run...
This guide will help you migrate from the deprecated @studs/react package to the new @strongtie/design-system package.
| Item | Old (@studs/react) | New (@strongtie/design-system) |
|---|---|---|
| Package Name | @studs/react | @strongtie/design-system |
| Registry | npm (public) | GitHub Package Manager (enterprise) |
| Version | 3.1.2 | 1.0.0 |
| Scope | @studs | @strongtie |
Are you looking for migration assistance for the Telerik UI Kit? Visit our CDN migration guide.
The @studs/react package has been rebranded as @strongtie/design-system to:
All imports must be updated from @studs/react to @strongtie/design-system.
The new package starts at v1.0.0. While the API remains largely the same, the version number reflects the new package identity.
@studs/react included normalize.css automatically. @strongtie/design-system does not include any CSS reset.
If you are using tailwind, you can use the tailwindcss package to reset
styles.
What you need to do:
Add your own CSS reset or normalize library:
Then import it before the design system styles:
import "modern-normalize"
import "@strongtie/design-system/styles"Recommended options:
The Alert component now requires an AlertContent wrapper for better layout control.
import { Alert, AlertDescription, AlertTitle } from "@studs/react/alert"
<Alert>
<Icon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>Your description here.</AlertDescription>
</Alert>import {
Alert,
AlertContent,
AlertDescription,
AlertTitle,
} from "@strongtie/design-system/alert"
<Alert>
<Icon />
<AlertContent>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>Your description here.</AlertDescription>
</AlertContent>
</Alert>Note: You must now import and use AlertContent to wrap the title and description.
The Badge component now supports additional variants.
Old variants: default, secondary, outline, destructive
New variants: default, secondary, outline, destructive, info, success
// New variants available
<Badge variant="info">Info Badge</Badge>
<Badge variant="success">Success Badge</Badge>This is backwards compatible - existing code will continue to work.
The Select component's internal CSS classes have changed from select-item-* to menu-item-* for better consistency across menu components.
Impact: If you have custom CSS targeting .select-item, update to .menu-item:
.select-item {
/* custom styles */
}
.select-item-label {
/* custom styles */
}.menu-item {
/* custom styles */
}
.menu-item-label {
/* custom styles */
}Note: This only affects you if you have custom CSS targeting these classes directly.
Before installing the new package, you need to authenticate with GitHub Package Manager.
read:packages - Required for installing packages⚠️
Store this token securely - you won't be able to see it again!
Create or update your .npmrc file in your project root or home directory:
# Project-level .npmrc (recommended)
echo "@strongtie:registry=https://npm.pkg.github.com" >> .npmrc
# Or home directory .npmrc for global access
echo "@strongtie:registry=https://npm.pkg.github.com" >> ~/.npmrcnpm login --scope=@strongtie --registry=https://npm.pkg.github.comWhen prompted:
Alternative: Using .npmrc file directly
# Add to your .npmrc
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKENSecurity Note:
.npmrc file to version control, ensure your GitHub token has only read:packages privilegesnpm 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>
)
}Add the following to your workflow file:
name: Build and Deploy
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: "18"
registry-url: "https://npm.pkg.github.com"
scope: "@strongtie"
- name: Configure npm
run: |
echo "@strongtie:registry=https://npm.pkg.github.com" >> .npmrc
echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> .npmrc
- name: Install dependencies
run: npm ci
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Build
run: npm run buildbefore_script:
- echo "@strongtie:registry=https://npm.pkg.github.com" >> .npmrc
- echo "//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}" >> .npmrc
build:
script:
- npm ci
- npm run build
variables:
GITHUB_TOKEN: ${GITHUB_PAT}steps:
- task: npmAuthenticate@0
inputs:
workingFile: .npmrc
customEndpoint: "GitHub"
- script: |
echo "@strongtie:registry=https://npm.pkg.github.com" >> .npmrc
displayName: "Configure npm"
- script: npm ci
displayName: "Install dependencies"Problem: Getting 401 Unauthorized errors when installing.
Solution:
read:packages scope.npmrc is configured correctlynpm login --scope=@strongtie --registry=https://npm.pkg.github.comProblem: npm can't find @strongtie/design-system.
Solution:
Verify the registry is set correctly:
npm config get @strongtie:registryShould return: https://npm.pkg.github.com
Check that the package has been published to GitHub Package Manager
Ensure you have access to the repository
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;
}Or use CSS custom properties for theming:
/* Override design tokens */
:root {
--color-primary-500: #your-color;
--font-family: "Your Font", sans-serif;
}If you encounter any issues during migration:
Use this checklist to track your migration progress:
read:packages scope.npmrc with GitHub Package Manager registry@studs/react@strongtie/design-system@studs/react to @strongtie/design-systemOnce you've completed all the steps above, you're successfully migrated to @strongtie/design-system!
The @studs/react package will continue to work for now but is deprecated and will not receive updates. We strongly recommend completing this migration as soon as possible.