Getting Started
Components
Search for a command to run...
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 right integration approach for your project (shadcn/ui recommended for React, CSS for other frameworks).
Recommended for new React projects. Copy-paste components with Strongtie design standards.
CSS files for non-React projects. Blazor, Vue, Angular, vanilla HTML.
Package installation for React components or CSS-only usage.
For new React projects, use our preset with the shadcn CLI:
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://cdn.strongtie.io/styles/latest/all.css" />Individual Modules:
<!-- Design standards as CSS variables (~3-5 KB) -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/styles/latest/tokens.css"
/>
<!-- CSS reset (~5-8 KB) -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/styles/latest/reset.css"
/>
<!-- Font definitions (~2-4 KB) -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/styles/latest/fonts.css"
/>
<!-- Component styles (~25-35 KB) -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/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 shadcn/ui or Strongtie design standards. Learn why →
<!-- Telerik UI Kit (latest) -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/ui-kit/latest/ui-kit.css"
/>
<!-- Telerik UI Kit 2.2.2 (legacy) -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/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://cdn.strongtie.io/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://cdn.strongtie.io/styles/latest/all.css"
/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>// Import styles
import "@strongtie/design-system/styles"
// Import components
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"