🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Installation

How to install and configure the Strongtie Design System in your project.

Get started with the Strongtie Design System by installing the React component library in your application.

Prerequisites

Starting a new app? Review our Framework Recommendations before getting started

Before you begin, ensure you have:

Node.js >= 20.0.0
npm >= 10.0.0 (or yarn/pnpm equivalent)
A React application (18.0 or higher recommended)

Choose Your Setup

The Strongtie Design System is flexible and works with or without CSS frameworks. Choose the approach that fits your project:

🎨With CSS Framework

If you're using Tailwind or another CSS framework:

Use our React components (they include their own styles)
Skip our Styles package or cherry-pick utilities
You already have your own reset and base styles

⚡Without CSS Framework

If you're NOT using a CSS framework:

Use our React components (they include their own styles)
Bring your own reset (normalize.css, modern-normalize, etc.)
Optionally use our styles package @strongtie/styles

Need design tokens in CSS?

Import from Styles package: @strongtie/styles/tokens.css

Access via CSS custom properties: var(--color-primary-500)

GitHub Package Manager Authentication

Before installing the design system, you need to authenticate with GitHub Package Manager since @strongtie/design-system is hosted as a private enterprise package.

Generate a GitHub Personal Access Token (PAT)

Create a new token

Go to GitHub Settings > Developer Settings > Personal Access Tokens
Click "Generate new token (classic)"
Give it a descriptive name (e.g., "NPM Package Access")
Select the following scopes:
- read:packages - Required for installing packages
Click "Generate token" and copy the token
Click Configure SSO
Select your organization and click "Authorize"

⚠️

Important

Store this token securely - you won't be able to see it again!

Configure NPM to use GitHub Package Manager

Create or update your .npmrc file in your project root or home directory:

# Project-level .npmrc (recommended)
echo "@strongtie:registry=https://npm.pkg.github.com" >> .npmrc
 
# Or home directory .npmrc for global access
echo "@strongtie:registry=https://npm.pkg.github.com" >> ~/.npmrc

Authenticate with your token

npm login --scope=@strongtie --registry=https://npm.pkg.github.com

When prompted:

Username: Your GitHub username
Password: Your Personal Access Token (PAT)
Email: Your GitHub email address

Alternative: Using .npmrc file directly

# Add to your .npmrc
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

Security Note: If you must commit your .npmrc file to version control, ensure your GitHub token has only read:packages privileges. For CI/CD pipelines, prefer using environment variables with read-only tokens.

Installation

Install the package

Install the @strongtie/design-system package from GitHub Package Manager:


npm install @strongtie/design-system sonner

Note: sonner is a peer dependency required for toast notifications. If you don't plan to use toasts, you can skip installing it.

Import the styles

In your application's entry point (typically App.tsx, main.tsx, index.tsx, or main .css file), import the CSS:

import "@strongtie/design-system/styles"
 
function App() {
  return <div>Your app content</div>
}
 
export default App

Add Variables to your CSS

html,
* {
  font-family: var(--font-family);
}

Use components

Import and use components from the library:

import "@strongtie/design-system/styles"
 
import { Button } from "@strongtie/design-system/button"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"
 
function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Strongtie Design System</CardTitle>
      </CardHeader>
      <CardContent>
        <Button onClick={() => console.log("Clicked!")}>Get Started</Button>
      </CardContent>
    </Card>
  )
}
 
export default App

Framework-Specific Setup

For Next.js projects using the App Router, import styles in your root layout:

app/layout.tsx

import "@strongtie/design-system/styles"
 
import type { Metadata } from "next"
 
export const metadata: Metadata = {
  title: "My App",
  description: "Built with Strongtie Design System",
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Advanced Configuration

If you only need the CSS styles without React components, you have two options: use our CDN or install the @strongtie/styles package. This is useful for non-React projects or when you want to build custom components.

Option 1: CDN (Recommended for Quick Setup)

Add the stylesheet link to your HTML <head>:

<!-- 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" />

Version Pinning: Replace latest with a specific version number (e.g., v2.5.4) for production environments to prevent unexpected changes.

Option 2: NPM Package

Install the styles package:


npm install @strongtie/styles

Import All Styles

@import "@strongtie/styles";

Import Specific Modules

For smaller bundle sizes, import only what you need:

/* Design tokens only (~3-5 KB) */
@import "@strongtie/styles/tokens";
 
/* Specific components */
@import "@strongtie/styles/reset";
@import "@strongtie/styles/fonts";
@import "@strongtie/styles/components";

Available Style Modules

Module	Import	Size	Description
All	`@strongtie/styles/all`	~50-80 KB	Complete design system
Reset	`@strongtie/styles/reset`	~5-8 KB	CSS normalize
Fonts	`@strongtie/styles/fonts`	~2-4 KB	Font faces
Tokens	`@strongtie/styles/tokens`	~3-5 KB	Design tokens only
Components	`@strongtie/styles/components`	~25-35 KB	All component styles

CDN vs NPM

Use CDN when:

You need quick setup without a build process
You're working on static HTML sites or Blazor applications
You want automatic updates (with latest)

Use NPM when:

You have a build process (Webpack, Vite, etc.)
You want better tree-shaking and optimization
You need version control and reproducible builds

Verify Installation

Create a simple test component to verify everything is working:

components/TestButton.tsx

import { Button } from "@strongtie/design-system/button"
 
export function TestButton() {
  return (
    <Button variant="primary" size="medium">
      Design System is Working! ✓
    </Button>
  )
}

Troubleshooting

Styles Not Loading

If styles aren't applying correctly:

Ensure you've imported @strongtie/design-system/styles in your entry file
Check that the import is before any component imports
Verify your bundler is configured to process CSS imports

TypeScript Errors

If you encounter TypeScript errors:

Ensure you're using TypeScript 4.5 or higher
Check that your moduleResolution is set to "bundler" or "node16"
Try restarting your TypeScript server

Module Not Found

If you see "Module not found" errors:

Delete node_modules and your lock file
Run npm install (or equivalent) again
Restart your development server

Unable to Authenticate

If you get 401 Unauthorized errors when installing:

Verify your GitHub token has read:packages scope
Check that your .npmrc is configured correctly
Ensure you're using the correct token (not expired)

Try logging in again:

npm login --scope=@strongtie --registry=https://npm.pkg.github.com

Package Not Found

If npm can't find @strongtie/design-system:

Verify the registry is set correctly:
```
npm config get @strongtie:registry
```
Should return: https://npm.pkg.github.com
Ensure you have access to the repository
Check that you've authenticated with your token

Next Steps

Now that you have the Strongtie Design System installed, you can:

Browse the component library to see what's available
Learn about design tokens and customization
Check out examples and templates
Read about our design principles

Resources

CSS Variables Reference

Installation

How to install and configure the Strongtie Design System in your project.

Get started with the Strongtie Design System by installing the React component library in your application.

Prerequisites

Starting a new app? Review our Framework Recommendations before getting started

Before you begin, ensure you have:

Node.js >= 20.0.0
npm >= 10.0.0 (or yarn/pnpm equivalent)
A React application (18.0 or higher recommended)

Choose Your Setup

The Strongtie Design System is flexible and works with or without CSS frameworks. Choose the approach that fits your project:

🎨With CSS Framework

If you're using Tailwind or another CSS framework:

Use our React components (they include their own styles)
Skip our Styles package or cherry-pick utilities
You already have your own reset and base styles

⚡Without CSS Framework

If you're NOT using a CSS framework:

Use our React components (they include their own styles)
Bring your own reset (normalize.css, modern-normalize, etc.)
Optionally use our styles package @strongtie/styles

Need design tokens in CSS?

Import from Styles package: @strongtie/styles/tokens.css

Access via CSS custom properties: var(--color-primary-500)

GitHub Package Manager Authentication

Before installing the design system, you need to authenticate with GitHub Package Manager since @strongtie/design-system is hosted as a private enterprise package.

Generate a GitHub Personal Access Token (PAT)

Create a new token

Go to GitHub Settings > Developer Settings > Personal Access Tokens
Click "Generate new token (classic)"
Give it a descriptive name (e.g., "NPM Package Access")
Select the following scopes:
- read:packages - Required for installing packages
Click "Generate token" and copy the token
Click Configure SSO
Select your organization and click "Authorize"

⚠️

Important

Store this token securely - you won't be able to see it again!

Configure NPM to use GitHub Package Manager

Create or update your .npmrc file in your project root or home directory:

# Project-level .npmrc (recommended)
echo "@strongtie:registry=https://npm.pkg.github.com" >> .npmrc
 
# Or home directory .npmrc for global access
echo "@strongtie:registry=https://npm.pkg.github.com" >> ~/.npmrc

Authenticate with your token

npm login --scope=@strongtie --registry=https://npm.pkg.github.com

When prompted:

Username: Your GitHub username
Password: Your Personal Access Token (PAT)
Email: Your GitHub email address

Alternative: Using .npmrc file directly

# Add to your .npmrc
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

Installation

Install the package

Install the @strongtie/design-system package from GitHub Package Manager:


npm install @strongtie/design-system sonner

Note: sonner is a peer dependency required for toast notifications. If you don't plan to use toasts, you can skip installing it.

Import the styles

In your application's entry point (typically App.tsx, main.tsx, index.tsx, or main .css file), import the CSS:

import "@strongtie/design-system/styles"
 
function App() {
  return <div>Your app content</div>
}
 
export default App

Add Variables to your CSS

html,
* {
  font-family: var(--font-family);
}

Use components

Import and use components from the library:

import "@strongtie/design-system/styles"
 
import { Button } from "@strongtie/design-system/button"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"
 
function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Strongtie Design System</CardTitle>
      </CardHeader>
      <CardContent>
        <Button onClick={() => console.log("Clicked!")}>Get Started</Button>
      </CardContent>
    </Card>
  )
}
 
export default App

Framework-Specific Setup

For Next.js projects using the App Router, import styles in your root layout:

app/layout.tsx

import "@strongtie/design-system/styles"
 
import type { Metadata } from "next"
 
export const metadata: Metadata = {
  title: "My App",
  description: "Built with Strongtie Design System",
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Advanced Configuration

Option 1: CDN (Recommended for Quick Setup)

Add the stylesheet link to your HTML <head>:

<!-- 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" />

Version Pinning: Replace latest with a specific version number (e.g., v2.5.4) for production environments to prevent unexpected changes.

Option 2: NPM Package

Install the styles package:


npm install @strongtie/styles

Import All Styles

@import "@strongtie/styles";

Import Specific Modules

For smaller bundle sizes, import only what you need:

/* Design tokens only (~3-5 KB) */
@import "@strongtie/styles/tokens";
 
/* Specific components */
@import "@strongtie/styles/reset";
@import "@strongtie/styles/fonts";
@import "@strongtie/styles/components";

Available Style Modules

Module	Import	Size	Description
All	`@strongtie/styles/all`	~50-80 KB	Complete design system
Reset	`@strongtie/styles/reset`	~5-8 KB	CSS normalize
Fonts	`@strongtie/styles/fonts`	~2-4 KB	Font faces
Tokens	`@strongtie/styles/tokens`	~3-5 KB	Design tokens only
Components	`@strongtie/styles/components`	~25-35 KB	All component styles

CDN vs NPM

Use CDN when:

You need quick setup without a build process
You're working on static HTML sites or Blazor applications
You want automatic updates (with latest)

Use NPM when:

You have a build process (Webpack, Vite, etc.)
You want better tree-shaking and optimization
You need version control and reproducible builds

Verify Installation

Create a simple test component to verify everything is working:

components/TestButton.tsx

import { Button } from "@strongtie/design-system/button"
 
export function TestButton() {
  return (
    <Button variant="primary" size="medium">
      Design System is Working! ✓
    </Button>
  )
}

Troubleshooting

Styles Not Loading

If styles aren't applying correctly:

Ensure you've imported @strongtie/design-system/styles in your entry file
Check that the import is before any component imports
Verify your bundler is configured to process CSS imports

TypeScript Errors

If you encounter TypeScript errors:

Ensure you're using TypeScript 4.5 or higher
Check that your moduleResolution is set to "bundler" or "node16"
Try restarting your TypeScript server

Module Not Found

If you see "Module not found" errors:

Delete node_modules and your lock file
Run npm install (or equivalent) again
Restart your development server

Unable to Authenticate

If you get 401 Unauthorized errors when installing:

Verify your GitHub token has read:packages scope
Check that your .npmrc is configured correctly
Ensure you're using the correct token (not expired)

Try logging in again:

npm login --scope=@strongtie --registry=https://npm.pkg.github.com

Package Not Found

If npm can't find @strongtie/design-system:

Verify the registry is set correctly:
```
npm config get @strongtie:registry
```
Should return: https://npm.pkg.github.com
Ensure you have access to the repository
Check that you've authenticated with your token

Next Steps

Now that you have the Strongtie Design System installed, you can:

Browse the component library to see what's available
Learn about design tokens and customization
Check out examples and templates
Read about our design principles

Resources

CSS Variables Reference