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.
Access CDN links, downloadable fonts, and version history for the Strongtie Design System.
Quick access to CDN links, downloadable assets, and version history for integrating the Strongtie Design System.
Getting Started? Visit our Getting Started guide to choose the supported package, public registry, or CSS-only path for your environment.
Recommended for new React projects. Pre-built, versioned components installed as a package.
CSS files for non-React projects. Blazor, Vue, Angular, vanilla HTML.
Install Strongtie React components without Azure Artifacts authentication.
Use our CDN for quick integration without npm. Best for Blazor, Vue, Angular, and vanilla HTML projects.
<!-- Complete styles (~50-80 KB) -->
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/all.css"
/>Individual Modules:
<!-- Design standards as CSS variables (~3-5 KB) -->
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/tokens.css"
/>
<!-- CSS reset (~5-8 KB) -->
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/reset.css"
/>
<!-- Font definitions (~2-4 KB) -->
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/fonts.css"
/>
<!-- Component styles (~25-35 KB) -->
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/components.css"
/>Version pinning: For production, replace latest with a specific version
(e.g., v1.2.3) to prevent unexpected changes.
For legacy applications only. New projects should use the @strongtie/design-system package or Strongtie design standards. Learn why →
<!-- Telerik UI Kit (latest) -->
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/ui-kit/latest/ui-kit.css"
/>
<!-- Telerik UI Kit 2.2.2 (legacy) -->
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/ui-kit/2.2.2/ui-kit.css"
/>Pre-built React components package. Good for quick migrations or internal tools.
import "@strongtie/design-system/styles"
import { Button } from "@strongtie/design-system/button"Requires Azure Artifacts authentication (Simpson feed). Installation guide →
CSS-only package with Strongtie design standards.
import "@strongtie/styles/all.css"/* Or in CSS */
@import "@strongtie/styles/tokens";Requires Azure Artifacts authentication (Simpson feed). CSS-only guide →
Current stable release for CSS-only usage and design standards.
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/all.css"
/>Latest stable version, automatically updated with each release.
Legacy versions for existing applications only. Not recommended for new projects.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
<!-- Strongtie Design Standards -->
<link
rel="stylesheet"
href="https://design.strongtie.io/cdn/styles/latest/all.css"
/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>// @strongtie/design-system package (recommended)
import "@strongtie/design-system/styles"
import { Button } from "@strongtie/design-system/button"
function App() {
return <Button>Click me</Button>
}// Import all styles
import "@strongtie/styles/all.css"
// Or import specific modules
import "@strongtie/styles/tokens.css"
import "@strongtie/styles/fonts.css"Built on open-source work from shadcn/ui, Radix UI, and Tailwind CSS.