Strong-Tie UXR Documentation

Getting Started

Get up and running with the Strongtie Design System in minutes. Built on shadcn/ui and Tailwind CSS for accessible, customizable components you own and control.

The Strongtie Design System is built on shadcn/ui and Tailwind CSS, providing accessible, customizable components that you own and control. Choose your framework and start building in minutes.

Quick Start

The fastest way to get started is using shadcn's preset feature, which automatically configures your project with Strongtie design standards.


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

This creates a new Vite + React project with:

Strongtie design standards pre-configured
Tailwind CSS setup
shadcn/ui components ready to add
TypeScript support

What does the preset do? It configures your project with Strongtie's design standards including brand colors, typography, spacing, and component styling. You still own all the code—no package dependencies.

Adding Components

Once your project is set up, add components as needed:

# Add individual components
npx shadcn@latest add button card dialog
 
# Or browse and select components interactively
npx shadcn@latest add

Components are copied to your components/ui/ directory where you can customize them freely.

Best Practice: When adding custom functionality, create abstracted components instead of editing shadcn components directly. For example, if you need a button with custom props, create components/custom-button.tsx that wraps components/ui/button.tsx. This keeps shadcn components pristine and makes updates easier.

Why Strongtie Design System?

Built on shadcn/ui

Ownership matters. Unlike traditional component libraries installed as dependencies, shadcn copies components directly into your project. You own the code, customize freely, and never worry about breaking changes from package updates.

AI-Native Development. All major AI coding assistants (Claude, ChatGPT, Cursor, etc.) have native knowledge of shadcn/ui. Just ask "use shadcn to create me a button" and they know exactly what to do. Plus, with the shadcn MCP server available, AI agents can directly add and modify components in your project—making UI development faster and more intuitive than ever.

What's Included

shadcn/ui Components - Copy-paste accessible React components you own and control
Strongtie Design Standards - Brand colors, typography, spacing integrated with Tailwind
Battle-Tested Accessibility - Built on Radix UI (or Base-UI) primitives
Full TypeScript Support - Type-safe components out of the box

Integration Options

The Strongtie Design System offers multiple integration paths depending on your project needs:

ShadCN + Tailwind

Recommended The design system approach. Install shadcn/ui components directly with Strongtie design standards.

@strongtie/design-system

Convenience Package Pre-built React shadcn components delivered as a easy to use package.

@strongtie/styles

CSS Only Design tokens and CSS variables for non-React projects.

Which Should I Choose?

Example Usage

Here's a quick example of using Strongtie components:

app/page.tsx

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
 
export default function Home() {
  return (
    <div className="container mx-auto p-8">
      <Card>
        <CardHeader>
          <CardTitle>Welcome to Strongtie Design System</CardTitle>
          <CardDescription>
            Build accessible, consistent interfaces with components you own.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Button>Get Started</Button>
        </CardContent>
      </Card>
    </div>
  )
}

Prerequisites

Before you begin, ensure you have:

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.

Next Steps

Explore Components

Browse the component library to see what's available and how to use each component.

Learn the Foundations

Understand the design variables, color system, and typography that power the design system.

Review Guidelines

Check out our best practices for building accessible, performant applications.

Customize Your Setup

Learn how to customize components and extend the design system for your specific needs.

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

UXR Research Repository Contributing to UXR Documentation

On This Page

Quick Start Adding Components Why Strongtie Design System?Built on shadcn/ui What's Included Integration Options Which Should I Choose?Example Usage Prerequisites Next Steps

Contribute