Skip to content
Forgepro Design System from ZORC with statistics and description of ease of use and design components
Forgepro – screenshot 2
Forgepro – screenshot 3
// COLOUR PALETTE
Forge Black Background #0F0F12
Steel Gray Surface #1E1E24
Electric Cobalt Primary #4F46E5
Plasma Cyan Accent #06B6D4
Industrial White Text #F9FAFB
// Dark UI kit

Forgepro

Forgepro-style design system for AI-driven development

25 kr

One-time payment • VAT included • Source code included

Components
10
Tech stack
React, Tailwind CSS, TypeScript, Lucide Icons, Framer Motion, Inter Font
Licence
Commercial
Delivery
Instant access (zip + Git)
Updated

About this kit

A modern UI Kit with Forgepro aesthetics. Contains ready-made components for rapid prototyping and production.

Components included

Datatabeller med filtrering Interaktiva grafer Sidebar navigation Complex forms Modaler och dialoger Status-badges Short for CPI data Button system with different states Search field with autocomplete Toast-notiser

Features

  • Optimized for AI generated code
  • Consistent dark theme
  • WCAG AA contrast levels
  • Fullt responsiva layouter
  • Modular component architecture
  • Quickstart templates included
  • Pixel-perfekt designsystem

When does this kit fit?

saas dashboard admin internal-tool

Tech stack

React Tailwind CSS TypeScript Lucide Icons Framer Motion Inter Font

How to use this kit

  1. Step 01

    Download

    Sign in to ZORC and fetch the zip from your purchases. All source code and documentation is included.

  2. Step 02

    Copy into your project

    Drop the components/ folder into your project — or install via package.json if the kit is packaged for npm.

  3. Step 03

    Wire up design tokens

    The tokens/ folder holds colours, typography and spacing for your Tailwind config or CSS variables.

  4. Step 04

    Start building

    Import the components and use them straight away. Each one ships with examples, props and variants in the docs.

Example AI prompt

Build an AI-based server monitoring control panel with Forgepro components. Create a grid with four KPI cards at the top, followed by a large section for graphs showing system load in Electric Cobalt. Implement a sidebar on the left with navigation and a log list for real-time notifications at the bottom.

Common questions

What does Forgepro include?
Forgepro includes 10 components, including Datatabeller med filtrering, Interaktiva grafer, Sidebar navigation, Complex forms and more.
What tech stack is Forgepro built on?
Forgepro is built with React, Tailwind CSS, TypeScript, Lucide Icons, Framer Motion, Inter Font.
Are the components accessible?
Yes. They follow WCAG 2.1 AA where the content allows — focus rings, keyboard support, ARIA and contrast.
What licence do I get?
Commercial. You may use the components across your organisation's paid projects. What you cannot do is resell the kit itself.
How do I get started?
Copy in the components/ folder, add the design tokens and start building. A full guide ships with the kit.
Do I get updates?
Yes. All future versions are included at no extra cost for as long as the kit remains in the catalogue.
// More UI kits

More kits from ZORC