Skip to main content
Strongtie Design System provides a streamlined UI design system for React applications. The package is hosted on GitHub Package Manager and requires authentication before installation.

​
Prerequisites: GitHub Package Manager Authentication

Before installing the package, you need to authenticate with GitHub Package Manager.

​
Generate a GitHub Personal Access Token (PAT)

  1. Go to GitHub Settings > Developer Settings > Personal Access Tokens
  2. Click “Generate new token (classic)”
  3. Give it a descriptive name (e.g., “NPM Package Access”)
  4. Select the read:packages scope (required for installing packages)
  5. Click “Generate token” and copy the token
  6. Click Configure SSO
  7. Select your organization and click “Authorize”
⚠️ Important: Store this token securely - you won’t be able to see it again!

​
Configure NPM Authentication

Create or update your .npmrc file in your project root: 
# Add to .npmrc in your project root
@strongtie:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
Replace YOUR_GITHUB_TOKEN with your actual token. Alternative: Login via command line 
npm login --scope=@strongtie --registry=https://npm.pkg.github.com
When prompted, enter your GitHub username, token (as password), and email. ⚠️ Security Note:
  • Never commit .npmrc files containing tokens to version control
  • Add .npmrc to your .gitignore if it contains sensitive data
  • Use environment variables in CI/CD pipelines
For detailed authentication setup and troubleshooting, see the Migration Guide.

​
Step 1: Install the design system package

Once authenticated, install the @strongtie/design-system package from GitHub Package Manager. This package contains the necessary components and styles to get you started. 
npm install @strongtie/design-system sonner

​
Step 2: Add the CSS

In your App.js or main entry file add the following line: 
import "@strongtie/design-system/styles";

​
Step 3: Use a Component

import { Button } from "@strongtie/design-system/button";

function App() {
  return <Button onClick={() => console.log("Button clicked")}>Button</Button>;
}

​
Troubleshooting

​
Authentication Issues

If you encounter 401 Unauthorized errors:
  1. Verify your GitHub token has read:packages scope
  2. Check that your .npmrc is configured correctly
  3. Ensure your token hasn’t expired
  4. Try logging in again with the command line method

​
Package Not Found

If npm can’t find the package:
  1. Verify the registry is set correctly: 
    npm config get @strongtie:registry
    Should return: https://npm.pkg.github.com
  2. Ensure you have access to the repository
  3. Check that you’re authenticated properly
For more troubleshooting help, see the Migration Guide.