npm package: @studs/react
Description: React components for Simpson Strong-Tie's design system
Author: Simpson Strong-Tie UX
Latest version: 3.1.5

<p align="center">
  <img src="https://mintcdn.com/simpsonstrong-tie/aHg8wuFeKUSmo6ZI/favicon.svg?maxW=160&auto=format&n=aHg8wuFeKUSmo6ZI&q=85&s=5c5e0aeff0062f9359b63f2bee5cc466" alt="Strongtie Design System Logo" width="160" />
</p>

# 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.

[![npm version](https://badge.fury.io/js/%40studs%2Freact.svg)](https://badge.fury.io/js/%40studs%2Freact)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Quality Gate Status](https://sonarqube.strongtie.com/api/project_badges/measure?project=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81&metric=alert_status&token=sqb_6484920febaf7bf62304dec4101b90dce6ed8258)](https://sonarqube.strongtie.com/dashboard?id=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81)
[![AI Code Assurance](https://sonarqube.strongtie.com/api/project_badges/ai_code_assurance?project=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81&token=sqb_6484920febaf7bf62304dec4101b90dce6ed8258)](https://sonarqube.strongtie.com/dashboard?id=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81)
[![Coverage](https://sonarqube.strongtie.com/api/project_badges/measure?project=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81&metric=coverage&token=sqb_6484920febaf7bf62304dec4101b90dce6ed8258)](https://sonarqube.strongtie.com/dashboard?id=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81)
[![Duplicated Lines (%)](https://sonarqube.strongtie.com/api/project_badges/measure?project=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81&metric=duplicated_lines_density&token=sqb_6484920febaf7bf62304dec4101b90dce6ed8258)](https://sonarqube.strongtie.com/dashboard?id=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81)
[![Security Hotspots](https://sonarqube.strongtie.com/api/project_badges/measure?project=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81&metric=security_hotspots&token=sqb_6484920febaf7bf62304dec4101b90dce6ed8258)](https://sonarqube.strongtie.com/dashboard?id=strongtie_studs-react_6a86ee98-f538-4589-8875-bec88a198f81)

## 🎯 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](https://studs.strongtie.io)** - Complete design system documentation
- **[Component Library](http://sst-studs.surge.sh)** - Interactive Storybook documentation

## 🚀 Quick Start

### Installation

```bash
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:

```javascript
import '@strongtie/design-system/styles'
```

### Usage

```jsx
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

```bash
# 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](https://github.com/changesets/changesets) for version management:

```bash
# Create a changeset
pnpm changeset

# Version packages
pnpm changeset version

# Publish to npm
pnpm changeset publish
```

## Developers Documentation

**[Writing Pull Requests](https://strongtie.atlassian.net/wiki/x/KgDfqAE)**
**[Creating Branches](https://strongtie.atlassian.net/wiki/x/bQDeqAE)**
**[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary)**

## 📄 License

MIT © Simpson Strong-Tie

## 🔗 Related Projects

- **[Strongtie Design System](https://studs.strongtie.io)** - Complete design documentation
- **[Strongtie Blazor](https://www.nuget.org/packages/STUDS.Blazor)** - Blazor component library
- **[Strongtie Styles](https://www.npmjs.com/package/@studs/styles)** - CSS-only version

---

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

For questions, support, or feedback, please [contact our team](https://strongtie.atlassian.net/jira/software/c/projects/STUDS/form/10044) or [open an issue](https://github.com/strongtie/design-system/issues).