Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. CDN Migration Guide

CDN Migration Guide

PreviousNext

A guide to migrating from strongtie.com/studs to cdn.strongtie.io

Overview

This guide will help you migrate from the legacy CDN URL to the new cdn.strongtie.io CDN infrastructure.

What's Changing?

ItemOld (Legacy)New (CDN)
Base URLhttps://www.strongtie.com/studs/https://cdn.strongtie.io/
File Namestuds-ui-kit.cssui-kit.css
Font Pathhttps://www.strongtie.com/studs/font/https://cdn.strongtie.io/fonts/
UI Kit Path/studs/v2.5.4/studs-ui-kit.css/ui-kit/v2.5.4/ui-kit.css
Styles PathN/A/styles/latest/all.css
Current Path/studs/current-2.5/studs-ui-kit.css/ui-kit/latest/ui-kit.css

Why the Change?

The new cdn.strongtie.io infrastructure provides:

  • Simpler URLs - Cleaner, more intuitive URL structure
  • Future-Ready - Scalable architecture to support future growth
  • Improved Security - Modern security practices and HTTPS enforcement
  • Modular Loading - Separate paths for styles and UI kit resources

Migration Steps

Step 1: Update CSS Link References

Update all <link> tags that reference the old CDN to use the new CDN URLs.

Before (Old - strongtie.com):

<!-- Version-specific -->
<link
  rel="stylesheet"
  href="https://www.strongtie.com/studs/v2.5.4/studs-ui-kit.css"
/>
 
<!-- Current/Latest -->
<link
  rel="stylesheet"
  href="https://www.strongtie.com/studs/current-2.5/studs-ui-kit.css"
/>

After (New - cdn.strongtie.io):

<!-- Version-specific Telerik UI Kit -->
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css"
/>
 
<!-- Latest Telerik UI Kit version -->
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/ui-kit/latest/ui-kit.css"
/>
 
<!-- Or use modular Design System styles -->
<link rel="stylesheet" href="https://cdn.strongtie.io/styles/latest/all.css" />

Step 2: Update Font References

If you're loading fonts directly from the CDN, update those URLs as well.

Before (Old):

<link
  rel="stylesheet"
  href="https://www.strongtie.com/studs/font/helvetica-now.css"
/>
@font-face {
  font-family: "Helvetica Now";
  src: url("https://www.strongtie.com/studs/font/HelveticaNow-Regular.woff2")
    format("woff2");
}

After (New):

<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/fonts/helvetica-now.css"
/>
@font-face {
  font-family: "Helvetica Now";
  src: url("https://cdn.strongtie.io/fonts/HelveticaNow-Regular.woff2")
    format("woff2");
}

Step 3: Update Download Links

If you have documentation or download pages that link to CDN resources, update those as well.

Before (Old):

<a href="https://www.strongtie.com/studs/v2.5.4/studs-ui-kit.css" download>
  Download CSS
</a>

After (New):

<a href="https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css" download>
  Download CSS
</a>

Step 4: Update JavaScript/CSS Imports

If you're importing CDN URLs in JavaScript or CSS files, update those references.

Before (Old):

// JavaScript
const stylesheetUrl = "https://www.strongtie.com/studs/v2.5.4/studs-ui-kit.css"
/* CSS */
@import url("https://www.strongtie.com/studs/v2.5.4/studs-ui-kit.css");

After (New):

// JavaScript
const stylesheetUrl = "https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css"
/* CSS */
@import url("https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css");

Step 5: Verify Your Changes

After updating all references:

  1. Clear your browser cache:

    • Chrome/Edge: Ctrl/Cmd + Shift + Delete
    • Firefox: Ctrl/Cmd + Shift + Delete
    • Safari: Cmd + Option + E

  2. Test your application:

    • Check that styles load correctly
    • Verify fonts are rendering properly
    • Test on multiple browsers
    • Check browser console for any 404 errors

  3. Use browser DevTools to verify:

    Open DevTools → Network tab → Filter by CSS
Reload the page and confirm requests go to cdn.strongtie.io

Automated Migration

Using Find & Replace

Use your code editor's find-and-replace feature to update all references:

Find: https://www.strongtie.com/studs/ Replace: https://cdn.strongtie.io/ui-kit/

Find: studs-ui-kit.css Replace: ui-kit.css

Find: ui-kit/current-2.5/ui-kit.css Replace: ui-kit/latest/ui-kit.css

Using Command Line Tools

macOS/Linux (using sed):

# Update base URL for UI Kit
find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" -o -name "*.jsx" -o -name "*.tsx" \) \
  -exec sed -i '' 's|https://www.strongtie.com/studs/|https://cdn.strongtie.io/ui-kit/|g' {} +
 
# Update file name
find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" -o -name "*.jsx" -o -name "*.tsx" \) \
  -exec sed -i '' 's|studs-ui-kit\.css|ui-kit.css|g' {} +
 
# Update current path to latest
find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" -o -name "*.jsx" -o -name "*.tsx" \) \
  -exec sed -i '' 's|ui-kit/current-2\.5/ui-kit\.css|ui-kit/latest/ui-kit.css|g' {} +

Windows (PowerShell):

# Update base URL
Get-ChildItem -Recurse -Include *.html,*.css,*.js,*.jsx,*.tsx |
  ForEach-Object {
    (Get-Content $_.FullName) -replace 'https://www\.strongtie\.com/studs/', 'https://cdn.strongtie.io/ui-kit/' |
    Set-Content $_.FullName
  }
 
# Update file name
Get-ChildItem -Recurse -Include *.html,*.css,*.js,*.jsx,*.tsx |
  ForEach-Object {
    (Get-Content $_.FullName) -replace 'studs-ui-kit\.css', 'ui-kit.css' |
    Set-Content $_.FullName
  }
 
# Update current path to latest
Get-ChildItem -Recurse -Include *.html,*.css,*.js,*.jsx,*.tsx |
  ForEach-Object {
    (Get-Content $_.FullName) -replace 'ui-kit/current-2\.5/ui-kit\.css', 'ui-kit/latest/ui-kit.css' |
    Set-Content $_.FullName
  }

Version Pinning

Should I Use latest or a Specific Version?

Use latest when:

  • You want automatic updates with new releases
  • You're building internal tools or prototypes
  • You're comfortable with potential breaking changes
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/ui-kit/latest/ui-kit.css"
/>

Use a specific version when:

  • You need consistent, predictable styling
  • You're building production applications
  • You want to control when updates are applied
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css"
/>

Recommendation: Use specific versions in production to avoid unexpected styling changes. Test new versions in a staging environment before updating.

Available CDN Resources

The new CDN provides access to multiple resources organized into different paths:

UI Kit (Complete Telerik Stylesheet)

<!-- All UI Kit styles in one file (recommended for most projects) -->
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/ui-kit/latest/ui-kit.css"
/>
 
<!-- Or use a specific version -->
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css"
/>

Design System Styles (Modular)

<!-- All styles combined -->
<link rel="stylesheet" href="https://cdn.strongtie.io/styles/latest/all.css" />
 
<!-- Or load individual modules -->
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/styles/latest/tokens.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/styles/latest/fonts.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/styles/latest/components.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/styles/latest/reset.css"
/>

Font Files

You can also add fonts to your application by including the fonts.css file from the modular design system styles.

<!-- Font stylesheet with @font-face declarations -->
<link
  rel="stylesheet"
  href="https://cdn.strongtie.io/fonts/helvetica-now.css"
/>

Direct font file access:

  • https://cdn.strongtie.io/fonts/HelveticaNow-Regular.woff2
  • https://cdn.strongtie.io/fonts/HelveticaNow-Medium.woff2
  • https://cdn.strongtie.io/fonts/HelveticaNow-Bold.woff2

Troubleshooting

Issue: Styles Not Loading

Problem: Page loads but styles are missing or broken.

Solution:

  1. Check the browser console for 404 errors
  2. Verify the URL is correct: https://cdn.strongtie.io/ui-kit/latest/ui-kit.css
  3. Clear your browser cache
  4. Check if you're behind a corporate firewall that might be blocking the CDN

Issue: Fonts Not Rendering

Problem: Text appears in fallback fonts instead of Helvetica Now.

Solution:

  1. Verify the font CSS is loading:

    <link
  rel="stylesheet"
  href="https://cdn.strongtie.io/fonts/helvetica-now.css"
/>

  2. Check browser DevTools Network tab for font file requests

  3. Ensure font files aren't being blocked by CORS or CSP policies

Issue: Mixed Content Warning

Problem: Browser shows "Mixed Content" warnings.

Solution:

  1. Ensure your page uses HTTPS (the CDN requires HTTPS)
  2. Update all CDN URLs to use https:// (not http://)
  3. Check for any hardcoded HTTP URLs in your stylesheets

Issue: Cached Old Version

Problem: Changes aren't appearing even after updating URLs.

Solution:

  1. Hard refresh your browser: Ctrl/Cmd + Shift + R
  2. Clear browser cache completely
  3. Open in an incognito/private window to test
  4. Clear any intermediate caching layers (CDN, proxy, etc.)

Issue: Version Not Found (404)

Problem: Specific version URL returns 404 error.

Solution:

  1. Verify the version number exists. Available versions:

    • v2.5.4
    • v2.5.3
    • v2.5.2
    • v2.5.1
    • v2.5.0
    • v2.2.2 and earlier (legacy)

  2. Use latest instead of a specific version:

    <link
  rel="stylesheet"
  href="https://cdn.strongtie.io/ui-kit/latest/ui-kit.css"
/>

  3. Check the Resources page for available versions

Content Security Policy (CSP)

If you use Content Security Policy headers, you'll need to allow the new CDN domain.

Add to CSP Headers

Content-Security-Policy:
  style-src 'self' https://cdn.strongtie.io;
  font-src 'self' https://cdn.strongtie.io;

HTML Meta Tag

<meta
  http-equiv="Content-Security-Policy"
  content="style-src 'self' https://cdn.strongtie.io; font-src 'self' https://cdn.strongtie.io;"
/>

Migration Timeline

Legacy CDN Support

The old CDN URLs (https://www.strongtie.com/studs/) will continue to work for the foreseeable future, but we strongly encourage migrating to the new CDN as soon as possible.

Additional Resources

  • Resources & Downloads - All available CDN resources and versions
  • Installation Guide - Complete setup instructions

Need Help?

If you encounter any issues during migration:

  1. Check the troubleshooting section above
  2. Search existing issues on GitHub
  3. Contact the UX team via Teams
AGENTS.md TemplateContribution Model

On This Page

OverviewWhat's Changing?Why the Change?Migration StepsStep 1: Update CSS Link ReferencesBefore (Old - strongtie.com):After (New - cdn.strongtie.io):Step 2: Update Font ReferencesBefore (Old):After (New):Step 3: Update Download LinksBefore (Old):After (New):Step 4: Update JavaScript/CSS ImportsBefore (Old):After (New):Step 5: Verify Your ChangesAutomated MigrationUsing Find & ReplaceUsing Command Line ToolsmacOS/Linux (using sed):Windows (PowerShell):Version PinningShould I Use latest or a Specific Version?Available CDN ResourcesUI Kit (Complete Telerik Stylesheet)Design System Styles (Modular)Font FilesTroubleshootingIssue: Styles Not LoadingIssue: Fonts Not RenderingIssue: Mixed Content WarningIssue: Cached Old VersionIssue: Version Not Found (404)Content Security Policy (CSP)Add to CSP HeadersHTML Meta TagMigration TimelineLegacy CDN SupportAdditional ResourcesNeed Help?

Contribute

  • Report an issue
  • Request a feature
  • Edit this page