@strongtie/styles

Design standards and CSS variables for non-React projects, plus shadcn community ports for other frameworks.

Use @strongtie/styles when you need Strongtie design standards without React components. This is ideal for:

Blazor / .NET applications
Vue, Angular, or Svelte projects
Vanilla HTML/CSS/JS
Any non-React framework

Using Vue, Angular, or Svelte? Consider the shadcn community ports below for the full component experience with Strongtie design standards.

Why Strongtie Design Standards?

Consistency across frameworks. Whether you're building in React, Vue, Angular, Blazor, or vanilla HTML, Strongtie design standards ensure your UI stays consistent with Simpson Strong-Tie's brand guidelines.

AI-Native Development. All major AI coding assistants (Claude, ChatGPT, Cursor, etc.) have native knowledge of shadcn/ui. When combined with community ports, you can leverage AI to build UIs faster in your framework of choice.

shadcn Community Ports

Want the full shadcn experience in your framework? These community-maintained ports bring shadcn's component ownership model to other ecosystems. Combine them with @strongtie/styles for Strongtie design standards.

Vue / Nuxt

shadcn-vue Official community Vue port with Radix Vue primitives. - Copy-paste component model - Nuxt module available - Active maintenance Get Started →

Angular

Spartan Angular-native primitives inspired by Radix and shadcn. - 30+ UI primitives - Built on Angular CDK - TailwindCSS styling Get Started →

Svelte

shadcn-svelte Feature-complete Svelte port with 7,500+ GitHub stars. - SvelteKit integration - Full component library - Active community Get Started →

More Community Ports

Framework	Project	Links
Solid.js	shadcn-solid	GitHub
Blazor	Sysinfocus simple/ui	GitHub
Avalonia	ShadUI	GitHub
Vanilla HTML	Basecoat	basecoatui.com
React Native	react-native-reusables	GitHub
Flutter	shadcn-ui	GitHub

Using Strongtie Design Standards with Community Ports

After setting up a community port, integrate Strongtie design standards:

/* Import Strongtie design standards */
@import "@strongtie/styles/tokens";
 
/* Map to shadcn CSS variables */
:root {
  --background: var(--surface-primary-background);
  --foreground: var(--surface-primary-foreground);
  --card: var(--surface-secondary-background);
  --card-foreground: var(--surface-secondary-foreground);
  --primary: var(--action-default-background);
  --primary-foreground: var(--action-default-foreground);
  --secondary: var(--action-secondary-background);
  --secondary-foreground: var(--action-secondary-foreground);
  --muted: var(--surface-primary-muted-background);
  --muted-foreground: var(--surface-primary-muted-foreground);
  --destructive: var(--action-destructive-background);
  --border: var(--surface-primary-border);
  --input: var(--control-border);
  --ring: var(--focus-color);
  --radius: var(--corner-radius-200);
}

Installing @strongtie/styles

Option 1: CDN (Quickest)

No build process required. Add to your HTML <head>:

<!-- All styles (~50-80 KB) -->
<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/reset.css"
/>

Version pinning: For production, replace latest with a specific version (e.g., v1.0.0) to prevent unexpected changes.

Option 2: NPM Package

For projects with a build process:

Configure Azure Artifacts

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.

Install the package


npm install @strongtie/styles

Import in your CSS

/* Import everything */
@import "@strongtie/styles";
 
/* Or import specific modules */
@import "@strongtie/styles/tokens";
@import "@strongtie/styles/fonts";
@import "@strongtie/styles/reset";

Available Modules

Module	Import	Size	Description
All	`@strongtie/styles`	~50-80 KB	Complete design system
Tokens	`@strongtie/styles/tokens`	~3-5 KB	Design standards as CSS custom properties
Fonts	`@strongtie/styles/fonts`	~2-4 KB	@font-face declarations
Reset	`@strongtie/styles/reset`	~5-8 KB	CSS normalize/reset

Using Design Standards

Access design standards via CSS custom properties:

.my-button {
  background-color: var(--action-default-background);
  color: var(--action-default-foreground);
  border-radius: var(--corner-radius-75);
  padding: var(--space-200) var(--space-400);
  font-size: var(--font-size-100);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--tx-s);
}
 
.my-button:hover {
  background-color: var(--action-default-hover-background);
}
 
.my-card {
  background-color: var(--surface-primary-background);
  border: 1px solid var(--surface-primary-border);
  border-radius: var(--corner-radius-200);
  padding: var(--space-500);
  box-shadow: var(--shadow-default);
}

Framework Examples

Blazor Setup

Add the CDN link to your _Host.cshtml or App.razor:

Pages/_Host.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.strongtie.io/styles/latest/all.css" />
    <link rel="stylesheet" href="css/site.css" />
</head>
<body>
    @RenderBody()
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

Create styled components using CSS variables:

wwwroot/css/site.css

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--corner-radius-75);
    padding: var(--space-200) var(--space-400);
    font-size: var(--font-size-100);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--tx-s);
}
 
.btn-primary {
    background-color: var(--action-default-background);
    color: var(--action-default-foreground);
}
 
.btn-primary:hover {
    background-color: var(--action-default-hover-background);
}
 
.btn-secondary {
    background-color: var(--action-secondary-background);
    color: var(--action-secondary-foreground);
}
 
.card {
    background: var(--surface-secondary-background);
    border: 1px solid var(--surface-primary-border);
    border-radius: var(--corner-radius-200);
    padding: var(--space-400);
}

Components/Button.razor

<button class="btn @CssClass" @onclick="OnClick">
    @ChildContent
</button>
 
@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public EventCallback OnClick { get; set; }
    [Parameter] public string CssClass { get; set; } = "btn-primary";
}

Want shadcn-style Blazor components? Check out Sysinfocus simple/ui, a Razor component library for Blazor inspired by shadcn/ui. For other options, popular Blazor libraries like MudBlazor, Radzen Blazor Components, or Blazorise can be styled using Strongtie design standards via CSS custom properties.

Building Custom Components

Example of creating a custom alert component using design standards:

Best Practice: When building custom components, create abstracted wrappers instead of modifying base styles directly. This makes updates and maintenance easier across your application.

.alert {
  padding: var(--space-300) var(--space-400);
  border-radius: var(--corner-radius-100);
  font-size: var(--font-size-100);
  line-height: var(--line-height-300);
}
 
.alert-info {
  background-color: var(--feedback-info-secondary-background);
  color: var(--feedback-info-secondary-foreground);
  border: 1px solid var(--feedback-info-background);
}
 
.alert-success {
  background-color: var(--feedback-success-secondary-background);
  color: var(--feedback-success-secondary-foreground);
  border: 1px solid var(--feedback-success-background);
}
 
.alert-warning {
  background-color: var(--feedback-warning-background);
  color: var(--feedback-warning-foreground);
}
 
.alert-error {
  background-color: var(--feedback-critical-secondary-background);
  color: var(--feedback-critical-secondary-foreground);
  border: 1px solid var(--feedback-critical-background);
}

Troubleshooting

CSS variables not working

Ensure styles are loaded before your custom CSS
Check browser support (CSS custom properties require modern browsers)
Verify the import path is correct

Fonts not loading

Check network tab for font file requests
Ensure CORS headers allow font loading from CDN
Import fonts.css or all.css

Styles conflict with existing CSS

Use CSS layers to control specificity:

@layer reset, tokens, custom;
 
@layer tokens {
  @import "@strongtie/styles/tokens";
}
 
@layer custom {
  /* Your custom styles here */
}

Next Steps

Strongtie Registry Design Systems at Simpson Strong-Tie