Welcome to Stride Design System
Stride is a production-ready, multi-brand design system built with modern web technologies. It provides a comprehensive set of accessible, customizable components that work seamlessly across different brand identities.What Makes Stride Unique
Stride stands out as a design system that solves real-world challenges for teams managing multiple brand identities:Multi-Brand Architecture
Built-in support for multiple brand themes with instant switching. Define once, deploy everywhere with consistent design tokens.
Accessibility First
Powered by React Aria Components, ensuring WCAG 2.1 compliance and keyboard navigation out of the box.
Modern CSS Architecture
Built on Tailwind CSS v4 with semantic design tokens for maintainable, scalable styling.
Type-Safe Components
Fully typed with TypeScript for excellent developer experience and fewer runtime errors.
Key Features
🎨 Dynamic Brand System
Switch between predefined brands (Stride, Coral, Forest, Runswap, Acme) or create custom brands dynamically at runtime with full token control.
♿ Built-in Accessibility
Every component leverages React Aria for keyboard navigation, screen reader support, and ARIA attributes. Tested with accessibility tools.
🎯 Semantic Design Tokens
CSS variables organized by purpose (text, background, interactive, status) rather than raw colors. Change brands without touching component code.
🌓 Dark Mode Ready
Automatic dark mode support per brand with smooth transitions. Each brand defines its own light/dark theme tokens.
📦 Tree-Shakeable
Import only what you need. Built with Vite for optimal bundle sizes with ESM and CommonJS support.
⚡ Developer Experience
TypeScript definitions, IntelliSense support, and comprehensive Storybook documentation. Start building in minutes.
🎭 Variants & Composition
Flexible component APIs with variants powered by class-variance-authority. Compose complex UIs from simple primitives.
🔧 Customizable
Override styles with className props, extend with custom tokens, or fork components for deeper customization.
Technology Stack
Stride leverages cutting-edge tools to deliver a best-in-class developer experience:- React 18/19 - Modern React with hooks and concurrent features
- TypeScript 5 - Full type safety and IntelliSense
- Tailwind CSS v4 - Latest CSS architecture with
@themeinline configuration - React Aria Components - Adobe’s accessibility primitives
- class-variance-authority - Type-safe component variants
- Vite - Lightning-fast builds and HMR
The Multi-Brand Advantage
Unlike traditional design systems that lock you into a single visual identity, Stride is built from the ground up for multi-tenancy and white-labeling:Example Use Cases:
- SaaS platforms offering branded experiences to customers
- Agencies managing multiple client brands
- Companies with multiple product lines
- White-label solutions requiring instant rebrand capability
- Color palettes (primary, neutral, status colors)
- Typography (font families, weights)
- Spacing scales (compact to generous)
- Border radius (sharp to rounded)
- Shadows and transitions
- Semantic tokens (what colors mean in context)
Quick Navigation
Installation
Get started with npm, yarn, or pnpm installation
Quickstart
Build your first component in 5 minutes
Components
Explore the full component library
Brand System
Learn about multi-brand theming
Design Tokens
Understand the token architecture
Customization
Customize and extend components
Philosophy
Stride follows three core principles:- Accessibility is Non-Negotiable - Every component meets WCAG 2.1 AA standards
- Flexibility Without Complexity - Powerful customization without overwhelming APIs
- Performance by Default - Optimized bundle sizes and runtime performance
Browser Support
Stride supports all modern browsers:- Chrome/Edge (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- React Native (via react-native-web)
License
Stride Design System is open source and available under the MIT license.Ready to start building?
Install Stride and create your first component