Forge Logo

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

Version React TypeScript Vite License

Documentation • Blocks • Playground

• 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

# 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

# Copy the example environment file
cp .env.example .env
# Edit .env with your values (optional)

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

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

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

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

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

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

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

Container, Stack, Grid, Flex, Divider.

useToast, useNotification, useForge, useDraggableScroll, useStepper, useResponsive

SHADOWS, Z_INDEX, COLORS, AVATAR_COLORS, STATUS_COLORS, CHART_COLORS

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>
 )
}

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.

Control shadows globally via ForgeProvider:

// Enable shadows (default)
<ForgeProvider shadows={true}>
// Disable shadows for flat design
<ForgeProvider shadows={false}>

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

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

MIT License - see LICENSE for details.

• GitHub Issues
• Discord Community
• Reddit Community
• GitHub Sponsors

Webba Creative Technologies - 2025