Installation

Follow these steps to add Forge to your React project.

Prerequisites

React 18 or higher

TypeScript (recommended)

Node.js 16+

Step 1

Install Forge

Install the wss3-forge package via npm, yarn, or pnpm. Fluent UI icons are included as a dependency.

bash

1npm install wss3-forge
2# or
3yarn add wss3-forge
4# or
5pnpm add wss3-forge

Step 2

Set Up ForgeProvider

Wrap your app with ForgeProvider to inject the theme and make components work correctly.

tsx

1// src/main.tsx
2import React from 'react'
3import ReactDOM from 'react-dom/client'
4import App from './App'
5import { ForgeProvider, ToastProvider } from 'wss3-forge'
6import 'wss3-forge/styles'
7 
8ReactDOM.createRoot(document.getElementById('root')!).render(
9  <React.StrictMode>
10    <ForgeProvider mode="dark">
11      <ToastProvider position="bottom-right">
12        <App />
13      </ToastProvider>
14    </ForgeProvider>
15  </React.StrictMode>
16)

Step 3

Start Using Components

Import and use any component from wss3-forge:

tsx

1import { Button, Card, Modal, Input } from 'wss3-forge'
2 
3function MyComponent() {
4  return (
5    <Card padding="lg">
6      <Button variant="primary">Click me</Button>
7    </Card>
8  )
9}

CSS Variables

Forge uses CSS variables for theming. These are automatically injected by the ForgeProvider, but you can also use them in your custom styles:

css

1:root {
2  --brand-primary: #A35BFF;
3  --brand-secondary: #FD9173;
4  --bg-primary: #070707;
5  --bg-secondary: #0c0c0c;
6  --bg-tertiary: #1a1a1a;
7  --text-primary: #fafafa;
8  --text-secondary: #a3a3a3;
9  --border-color: #404040;
10}

Ready to explore components?

Browse the full component library.

Introduction

Design Language

Last updated: December 2025