Forge - AI-Ready React Component Library

100+ production-ready React components with dark/light themes, TypeScript support, and AI integration.

Features

100+ Components - Buttons, Cards, Forms, Tables, Charts, Navigation, and more
Dark & Light Themes - Built-in theme support with CSS variables
Global Shadows - Consistent elevation system with toggle support
TypeScript - Full TypeScript support with strict types
AI-Ready - Designed for AI-assisted development with clear component APIs
Zero Dependencies - Pure React components, no external UI libraries required
Accessible - WCAG compliant with ARIA attributes and keyboard navigation

Quick Start

Installation

# Clone the repository
git clone https://github.com/Webba-Creative-Technologies/forge.git
cd forge

# Install dependencies
npm install

# Start development server
npm run dev

Environment Setup

# Copy the example environment file
cp .env.example .env

# Edit .env with your values (optional)

Build

# Development build
npm run build

# Production build with SEO pre-rendering
npm run build:seo

Project Structure

forge/
├── .forge/              # Component library source
│   ├── components/      # All UI components
│   ├── hooks/           # React hooks
│   └── styles/          # CSS and animations
├── src/                 # Documentation site
│   ├── components/      # Site-specific components
│   └── pages/           # Documentation pages
├── public/              # Static assets
├── scripts/             # Build scripts
└── legacy/              # WSS1 legacy documentation

Components Overview

Inputs

Button, Input, Textarea, Select, Checkbox, Switch, Radio, Slider, DatePicker, ColorPicker, FileUpload, and more.

Data Display

Card, Table, Badge, Avatar, Timeline, Accordion, TreeView, Calendar, Charts (Bar, Line, Donut).

Feedback

Toast, Notification, Banner, Alert, Spinner, Skeleton, ProgressBar.

Navbar, Tabs, Breadcrumbs, Pagination, Stepper, Footer.

Overlays

Modal, Dropdown, Popover, Tooltip, Sheet, BottomSheet.

Layout

Container, Stack, Grid, Flex, Divider.

Hooks

useToast, useNotification, useForge, useDraggableScroll, useStepper, useResponsive

Constants

SHADOWS, Z_INDEX, COLORS, AVATAR_COLORS, STATUS_COLORS, CHART_COLORS

Usage Example

import { Button, Card, Input, VStack } from './.forge'

function LoginForm() {
  return (
    <Card padding="lg">
      <VStack gap="md">
        <Input label="Email" type="email" placeholder="Enter your email" />
        <Input label="Password" type="password" placeholder="Enter your password" />
        <Button variant="primary" fullWidth>
          Sign In
        </Button>
      </VStack>
    </Card>
  )
}

Theming

Forge uses CSS variables for theming. Override them in your CSS:

:root {
  --brand-primary: #A35BFF;
  --brand-secondary: #7B3FE4;
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
}

Use the Theme Creator to generate custom themes.

Shadows

Control shadows globally via ForgeProvider:

// Enable shadows (default)
<ForgeProvider shadows={true}>

// Disable shadows for flat design
<ForgeProvider shadows={false}>

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

MIT License - see LICENSE for details.

Support

Webba Creative Technologies - 2025

Webba-Creative-Technologies/forge