Installation

How to install ForaUI in your Next.js project.

Compatibility Note

ForaUI is designed to work with Next.js 15 (App Router) and Tailwind CSS 4. The library includes both UI components and Tailwind-based animations.

Installation

1

Install ForaUI

Install the ForaUI package in your Next.js project:

npm install foraui-components

This package includes both UI components and animations, so you don't need to install any additional animation libraries.

2

Configure Tailwind CSS

Update your tailwind.config.js to include ForaUI components:

// tailwind.config.js
const foraUiPlugin = require("foraui-components/tailwind.config.js");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx}",
    "./components/**/*.{js,jsx}",
    "./node_modules/foraui-components/**/*.{js,jsx}"
  ],
  darkMode: "class",
  theme: {
    extend: {
      // Merge FORAUI theme extensions
      ...foraUiPlugin.theme.extend,
    },
  },
  plugins: [],
}
3

Import and use components

Now you can import and use ForaUI components from their specific categories:

import { Button } from 'foraui-components/buttons';
import { FloatingBadge } from 'foraui-components/badges';
import { Card3D } from 'foraui-components/3d';

Components are organized by category: buttons, badges, 3d, and more.

Tip

ForaUI components are designed to work seamlessly with Tailwind CSS 4's new features. All animations are built using Tailwind's utility classes, so you don't need any external animation libraries.

Working on more frameworksSoon

We're working on bringing ForaUI to more frameworks. Stay tuned for updates!