Strongtie Design System React Component Library

A comprehensive React component library built on the Strongtie Design System by the Simpson Strong-Tie UX Team, providing consistent, accessible, and scalable UI components for building exceptional user experiences.

🎯 Design Principles

Strongtie Design System is built on three core design principles that ensure consistency and quality across all Simpson Strong-Tie digital experiences:

• Clear - Ensures users immediately understand information, actions, and flows through purposeful visual hierarchy and accessible design
• Precise - Builds confidence through accurate, consistent, and deliberate design decisions that eliminate guesswork
• Efficient - Respects users' time and mental workload by streamlining tasks and delivering information in the fewest necessary steps

📚 Documentation

• Strongtie Design System - Complete design system documentation
• Component Library - Interactive Storybook documentation

🚀 Quick Start

Installation

npm install @strongtie/design-system
# or
pnpm add @strongtie/design-system
# or
yarn add @strongtie/design-system

Import Styles

Import the CSS file in your application's entry point:

import '@strongtie/design-system/styles'

Usage

import { Button } from '@strongtie/design-system/react/button'
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@strongtie/design-system/react/card'

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Strongtie Design System</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  )
}

🏗️ Development

This project uses a monorepo structure powered by Turborepo for efficient development and build processes.

Project Structure

design-system/
├── apps/
│   └── docs/              # Storybook documentation
├── packages/
│   ├── react/             # Core React components
│   ├── eslint-config/     # Shared ESLint configuration
│   └── typescript-config/ # Shared TypeScript configuration
└── ...

Development Commands

# Install dependencies
pnpm install

# Start development environment with Storybook
pnpm dev

# Build all packages
pnpm build

# Run tests
pnpm test

# Run linting
pnpm lint

# Clean all artifacts
pnpm clean

Component Development

Each component is built with:

• TypeScript for type safety
• Radix UI primitives for accessibility
• Class Variance Authority for styling variants
• SASS for CSS preprocessing
• Jest for testing
• Storybook for documentation

Adding New Components

1. Create component file in packages/react/src/
2. Add export to packages/react/package.json
3. Create Storybook story in apps/docs/stories/
4. Add tests in packages/react/src/

🎨 Styling

React components use CSS custom properties for theming and are designed to be consistent with the Design System design tokens.

Design Tokens

The design system includes tokens for:

• Colors (primary, secondary, semantic)
• Typography (fonts, sizes, weights)
• Spacing (margins, paddings)
• Shadows and borders
• Motion and animation

Customization

Components can be customized through:

• CSS custom properties
• Variant props
• Custom CSS classes
• Theme overrides

♿ Accessibility

All components are built with accessibility in mind:

• ARIA compliant markup
• Keyboard navigation support
• Screen reader compatibility
• High contrast support
• Focus management
• WCAG 2.1 AA compliance

📦 Bundle Information

• ES Modules and CommonJS support
• Tree-shakeable exports
• TypeScript declarations included
• Side-effects free for optimal bundling

🤝 Contributing

We welcome contributions! Please see our contributing guidelines and follow our development workflow:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests and documentation
5. Submit a pull request

Publishing

This project uses Changesets for version management:

# Create a changeset
pnpm changeset

# Version packages
pnpm changeset version

# Publish to npm
pnpm changeset publish

Developers Documentation

Writing Pull Requests Creating Branches Conventional Commits

📄 License

MIT © Simpson Strong-Tie

🔗 Related Projects

• Strongtie Design System - Complete design documentation
• Strongtie Blazor - Blazor component library
• Strongtie Styles - CSS-only version

Built with ❤️ by the Simpson Strong-Tie UX Team

For questions, support, or feedback, please contact our team or open an issue.