Strongtie Design System
Getting StartedComponents

Command Palette

Search for a command to run...

Getting Started
  • Introduction
  • Setup Guide
  • Package Installation
  • Code Quality Setup
  • Migration Guide
  • Resources
Registry
  • Getting Started
  • Combobox
  • Datepicker
  • MultiSelect
  • Tab Nav
  • Tree
Guides
  • Framework Recommendations
Foundations
  • States
  • Variables
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Command
  • Combobox
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Item
  • Kbd
  • Label
  • Menubar
  • Multi Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Switch
  • Table
  • Tabs
  • Tab Nav
  • Textarea
  • Toaster
  • Toggle
  • Toggle Group
  • Tooltip
  • Tree
2026 Simpson Strong-Tie
  1. Docs
  3. Simpson Strong-Tie Design System

Simpson Strong-Tie Design System

Next

Build accessible, consistent interfaces with components you own and control. Built on shadcn/ui and Tailwind CSS.

The Simpson Strong-Tie Design System provides accessible, customizable React components built on shadcn/ui and Tailwind CSS. Choose your integration path and start building in minutes.

Get Started

ShadCN + Tailwind

Recommended Copy-paste components with Strongtie design standards. Full ownership and customization.

@strongtie/design-system

Convenience Package Pre-built React components delivered as an npm package.

@strongtie/styles

CSS Only Design tokens and CSS variables for Blazor, Vue, Angular, and other non-React projects.

View all getting started guides →

Quick Start

The fastest way to get started is using shadcn's preset feature:

npx shadcn@latest create --preset "https://ui.shadcn.com/init?base=radix&style=vega&baseColor=neutral&theme=neutral&iconLibrary=lucide&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=vite" --template vite

Then add components as needed:

npx shadcn@latest add button card dialog

Learn More

Design Standards

Core patterns, accessibility requirements, and best practices for building with the design system.

Resources & Downloads

CDN links, downloadable fonts, version history, and quick integration examples.

Prerequisites

  • Node.js >= 20.0.0
  • npm >= 10.0.0 (or yarn/pnpm/bun)

Using the convenience package (@strongtie/design-system) or CSS-only approach requires Azure Artifacts authentication (Simpson feed). The Quick Start with shadcn/ui does not require this.

This library is built on the excellent work of the open-source community, including shadcn/ui, Radix UI, and Tailwind CSS.

AGENTS.md Template

On This Page

Get StartedQuick StartLearn MorePrerequisites

Contribute

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