Getting Started
Components
Search for a command to run...
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.
The fastest way to get started is using shadcn's preset feature, which automatically configures your project with Strongtie design standards.
This creates a new Vite + React project with:
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.
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 addComponents 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.
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.
The Strongtie Design System offers multiple integration paths depending on your project needs:
Recommended The design system approach. Install shadcn/ui components directly with Strongtie design standards.
Convenience Package Pre-built React shadcn components delivered as a easy to use package.
CSS Only Design tokens and CSS variables for non-React projects.
Here's a quick example of using Strongtie components:
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>
)
}Before you begin, ensure you have:
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.
Browse the component library to see what's available and how to use each component.
Check out our design standards for building accessible, performant applications.
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.