Strong-Tie UXR Documentation
Research Repository

Command Palette

Search for a command to run...

Q4 2025
  • Platform Model (BIM) Viewer
  • (Preliminary Report) Project Hub Research
  • Personas
Q3 2025
  • Estimating Tools Unification
  • Outdoor Living Solutions Pro Tier
  • Director Engineering Tab
  • Roles and Permissions
  • Cornerstone Point Offsetting Discovery
  • Truss Design Seal Submittal Workflow
Q2 2025
  • CS Engineer
  • Digital Solutions CSAT/NPS Survey
  • Past Communication Research
  • Director Admin Settings
  • Director Pricing
Q1 2025
  • License and Account Management
  • Estimating JTBD Survey
  • Product Materials Catalogs
  • Truss Studio Settings / Envdata
  • Residential Construction Ecosystem
  • Cloud Director Project Creation
Q4 2024
  • Platform Discovery Research Findings
  • Director Settings
  • Truss Studio Ribbon Bar
  • Cloud Director Roles and Permissions
  • Deck Planner Pro Features
Q3 2024
  • ICS Assessment and Platform Features
  • Document Management Services
  • LotSpec for Revit
  • LotSpec for Revit User Personas
Q2 2024
  • Platform Sprint
  • LBM Estimating Digital Portal Discovery
  • LBM Q2 Customer Interviews
  • Fastener Designer Prototype Testing
  • Production Scheduler
  • LotSpec for Revit Competitive Analysis
  • Field Verification
  • Kentley Insights Truss Market Research
Q1 2024
  • LBM Takeoff Tool MVP Testing
  • Anchor Finder
  • LBM Q1 Customer Interviews
  • Customer Connectivity
  • Reporting Manager Modal
Q4 2023
  • PDP Heatmapping
  • Pipeline Modernization
  • Truss Studio Envdata
  • Enterprise User Roles Prototype Test
Q3 2023
  • Reporting Manager Parameters
  • Customer Portal Jump
Q2 2023
  • Internal UX Team Satisfaction Survey
  • PDP Navigation
2026 Simpson Strong-Tie
  1. Docs
  3. Getting Started
  5. @strongtie/styles

@strongtie/styles

PreviousNext

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

FrameworkProjectLinks
Solid.jsshadcn-solidGitHub
BlazorSysinfocus simple/uiGitHub
AvaloniaShadUIGitHub
Vanilla HTMLBasecoatbasecoatui.com
React Nativereact-native-reusablesGitHub
Fluttershadcn-uiGitHub

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

echo "registry=https://pkgs.dev.azure.com/StrongTie/_packaging/Simpson/npm/registry/" >> .npmrc
echo "always-auth=true" >> .npmrc

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

ModuleImportSizeDescription
All@strongtie/styles~50-80 KBComplete design system
Tokens@strongtie/styles/tokens~3-5 KBDesign standards as CSS custom properties
Fonts@strongtie/styles/fonts~2-4 KB@font-face declarations
Reset@strongtie/styles/reset~5-8 KBCSS 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

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

Fonts not loading

  1. Check network tab for font file requests
  2. Ensure CORS headers allow font loading from CDN
  3. 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

  • View complete design variables reference
  • Browse React components
  • Try shadcn with Tailwind (recommended for React)
  • Framework recommendations
Strongtie RegistryInsights Library

On This Page

Why Strongtie Design Standards?shadcn Community PortsMore Community PortsUsing Strongtie Design Standards with Community PortsInstalling @strongtie/stylesOption 1: CDN (Quickest)Option 2: NPM PackageAvailable ModulesUsing Design StandardsFramework ExamplesBlazor SetupVanilla HTML SetupVue Setup (CSS-only)Angular Setup (CSS-only)Building Custom ComponentsTroubleshootingCSS variables not workingFonts not loadingStyles conflict with existing CSSNext Steps

Contribute

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