Installation

ForgeUI is designed to work with modern React and Next.js setups without adding new runtime dependencies or hidden configuration.

There is no ForgeUI package to install.
ForgeUI components are meant to be copied, adapted, and owned by your project.

This keeps your codebase explicit, portable, and easy to maintain.

Requirements

ForgeUI assumes a modern frontend environment.

You should have:

• React 18 or newer
• Next.js using the App Router
• Tailwind CSS

If your project already meets these requirements, you’re ready to use ForgeUI components.

Tailwind CSS setup

ForgeUI relies on Tailwind utility classes for all styling.

If Tailwind is not already installed, add it to your project:

npm install tailwindcss postcss autoprefixer

Initialize Tailwind:

npx tailwindcss init -p

Make sure Tailwind is configured to scan your project files so utilities are generated correctly.

This usually means including all relevant directories (such as app, components, and content) in Tailwind’s content configuration so no required styles are purged during build.

ForgeUI does not require any special Tailwind plugins, presets, or experimental features.
A standard Tailwind configuration is sufficient and preferred.

Global styles

Global styles should be defined once at the application level and kept intentionally minimal.

Their role is to establish a baseline, not to style individual components.

For example, in your global CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives provide resets, shared utilities, and consistent defaults across the application.

Global styles should remain minimal and predictable.
Component-specific styling should live with the component itself, not in global files.

Adding ForgeUI components

To use ForgeUI, copy the components you need directly into your project.

A common setup is:

• place components in a local components/ directory
• group related components together
• keep layout components separate from smaller primitives

Because ForgeUI components are plain React components, you can modify them freely without worrying about breaking external dependencies or upgrade paths.

Verifying the setup

After adding a component:

• import it into a page or layout
• confirm styles render as expected
• verify interaction and layout behavior

If something looks incorrect, inspect the JSX first.
Most issues are visible directly in the markup or utility classes rather than hidden configuration.

No lock-in

ForgeUI does not introduce:

• global runtime dependencies
• required providers
• mandatory configuration files

This makes it easy to:

• adopt ForgeUI incrementally
• remove components later if needed
• evolve your UI without large rewrites

ForgeUI is designed to be safe to adopt and safe to abandon.

Common pitfalls

When installing ForgeUI components, avoid:

• copying components without their related utilities
• removing class names without understanding their purpose
• moving component styles into global CSS prematurely

Understanding a component’s structure upfront usually saves time later.

Final note

Installation is intentionally boring.

If installing ForgeUI feels complex, something has gone wrong.
ForgeUI is designed to fit naturally into existing projects with minimal ceremony.