Skip to main content

​
Installation

Get started with Stride Design System in your React application. Stride is distributed as an npm package and works with any React 18+ or React 19+ project.

​
Prerequisites

Before installing Stride, ensure your project meets these requirements:
Required Dependencies:
  • React 18 or React 19
  • React DOM 18 or React 19
  • Node.js 18 or higher
Stride is compatible with:
  • Next.js 13+ (App Router and Pages Router)
  • Vite
  • Create React App
  • Remix
  • Any React-based framework

​
Package Installation

Install Stride using your preferred package manager: 
npm install stride-ds
Stride has a peer dependency on React 18 or 19. If you don’t have React installed, add it with:
npm install react@19 react-dom@19

​
Import Styles

Stride requires importing the CSS file containing all design tokens and component styles. Add this import once at the root of your application.
Import styles in your root app/layout.tsx:
app/layout.tsx
import 'stride-ds/styles';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My App',
  description: 'Built with Stride Design System',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

​
Setup Steps

Follow these steps to complete your Stride installation:
1

Install the package

Run the installation command for your package manager:
npm install stride-ds
2

Import the styles

Add the CSS import to your application root:
import 'stride-ds/styles';
3

Import your first component

Start using Stride components in any file:
import { Button } from 'stride-ds';

export function MyComponent() {
  return <Button>Click me</Button>;
}
4

(Optional) Setup brand theming

Configure your preferred brand at application startup:
import { BrandInitializer } from 'stride-ds';

export default function App() {
  return (
    <>
      <BrandInitializer brand="coral" />
      {/* Your app content */}
    </>
  );
}

​
TypeScript Configuration

Stride includes full TypeScript definitions out of the box. No additional setup is required, but ensure your tsconfig.json has these settings:
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}
TypeScript will provide full IntelliSense for component props, variants, and types.

​
Verify Installation

Create a simple test component to verify everything works:
src/App.tsx
import { Button, Card, CardHeader, CardTitle, CardContent } from 'stride-ds';

export default function App() {
  return (
    <div style={{ padding: '2rem' }}>
      <Card>
        <CardHeader>
          <CardTitle>Installation Successful!</CardTitle>
        </CardHeader>
        <CardContent>
          <p>Stride Design System is now installed.</p>
          <Button variant="primary" onPress={() => alert('It works!')}
            Click me to test
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}
If you see a styled card with a working button, your installation is complete!

​
What’s Included

When you install stride-ds, you get:
  • 22+ React Components - Button, Card, Input, Select, Dialog, and more
  • Design Tokens - Semantic CSS variables for colors, spacing, typography
  • 5 Predefined Brands - Stride, Coral, Forest, Runswap, Acme
  • TypeScript Definitions - Full type safety and autocomplete
  • Dark Mode Support - Automatic theming for light and dark modes
  • Accessibility - WCAG 2.1 AA compliant components

​
Bundle Size

Stride is optimized for tree-shaking. Import only what you need:
  • Full package: ~45KB gzipped (all components)
  • Single component: ~3-5KB gzipped (e.g., Button only)
  • Styles: ~12KB gzipped (includes all design tokens)
Actual bundle size will vary based on which components you import. Vite and Next.js automatically tree-shake unused code.

​
Troubleshooting

Ensure you’ve imported 'stride-ds/styles' at the root of your application. This import must come before any component imports.
// ✅ Correct order
import 'stride-ds/styles';
import { Button } from 'stride-ds';

// ❌ Wrong order
import { Button } from 'stride-ds';
import 'stride-ds/styles';
If you’re using React 19, ensure your @types/react version matches:
npm install --save-dev @types/react@19 @types/react-dom@19
Some bundlers require explicit file extensions. Try:
import 'stride-ds/styles/index.css';
Or configure your bundler to resolve .css extensions automatically.
All Stride components use React hooks and require "use client" directive in Next.js App Router:
'use client';

import { Button } from 'stride-ds';

export default function ClientComponent() {
  return <Button>Click me</Button>;
}

​
Next Steps

Quickstart Guide

Build your first component with Stride

Component Library

Explore all available components

Brand System

Learn about multi-brand theming

Design Tokens

Customize colors and spacing

Build docs developers (and LLMs) love

Get started for freeTalk to us