Getting Started

Forge is an AI-ready React component library designed for building modern web applications. Built for developers and AI assistants alike, with consistent styling and predictable patterns.

What is Forge?

Forge (WSS3 - Webba Style System 3) is an AI-ready design system that provides pre-built, production-ready React components. It's built with TypeScript, uses Fluent UI 2 icons, and includes a comprehensive AI integration guide that enables AI assistants to generate correct component code instantly.

Key Features

React 18+ with TypeScript

Fluent UI 2 icons integration

Dark & Light theme support

100+ production-ready components

CSS variables for easy customization

Responsive hooks and utilities

Accessible by default

Zero configuration needed

AI-Ready with dedicated guide

Quick Example

Here's a minimal example to get you started with Forge:

tsx

1import { ForgeProvider, Button, Card } from 'wss3-forge'
2import 'wss3-forge/styles'
3 
4function App() {
5  return (
6    <ForgeProvider mode="dark">
7      <Card padding="lg">
8        <Button variant="primary">
9          Hello Forge!
10        </Button>
11      </Card>
12    </ForgeProvider>
13  )
14}

Ready to install?

Follow our installation guide to get started.

Design Principles

Component-First

Every UI element is a component. No custom CSS needed - just import and use.

Consistent Theming

CSS variables power the design system. Dark, light, or custom themes.

Accessibility

Keyboard navigation, focus management, and ARIA attributes by default.

Type-Safe

Full TypeScript support with autocomplete and type checking.

AI-Ready

Designed for AI assistants. Consistent patterns and dedicated AI guide.

Installation

Last updated: December 2025