Installation

Get started with FivUI in minutes. Follow our step-by-step guide to set up FivUI in your React project and start building beautiful interfaces.

Prerequisites

Before installing FivUI, ensure your project meets these requirements:

React Framework

Next.js, Vite, Remix, Gatsby, or any React-compatible framework

Tailwind CSS

Version 3.x or 4.x already installed (4.x recommended)

Install FivUI CLI

Start by installing the FivUI CLI package in your project. This will give you access to all FivUI commands and utilities.

bash

npm i @fivexlabs/fivui@latest

Note: You can also use yarn or pnpm as your package manager.

Initialize Your Project

Run the initialization command to set up FivUI in your project. This interactive prompt will guide you through the configuration process.

bash

npx fivui init

What happens during initialization?

🔍 Project Detection

Automatically detects your framework and project structure

📁 Directory Setup

Configures component and utility directories

🎨 Tailwind Integration

Validates Tailwind CSS configuration

⚙️ Monorepo Support

Handles monorepo structures (Next.js, etc.)

Monorepo Users: The CLI will ask specific questions about your monorepo structure to ensure proper component installation paths.

Start Adding Components

Once initialized, you can start adding FivUI components to your project. Each component is installed with its dependencies automatically.

Add your first component

bash

npx fivui add button

What gets installed?

📦 Component Files

Source code copied to src/components/ui/

🛠️ Utilities

Helper functions added to src/lib/

📚 Dependencies

Required packages installed automatically

Smart Dependencies: FivUI only installs the exact dependencies each component needs, keeping your bundle size optimized.

Alternative: Manual Usage

Prefer more control? You don't need our CLI at all! FivUI components can be used manually by copying code directly from our component documentation pages.

Manual Setup Requirements

Tailwind CSS Setup

Have Tailwind CSS installed and configured in your project

Proper globals.css

Configure your global styles following our Theming section

How Manual Usage Works

Browse Component Documentation

Visit any component page to see its full implementation

Copy Component Code

Use the "Manual" installation section to copy the component source

Install Dependencies

Manually install any required packages listed in the component docs

CLI vs Manual: While manual usage gives you complete control, our CLI streamlines the process with automatic dependency management, proper file organization, and seamless integration. Choose the approach that fits your workflow best.

CSS Configuration Options

Unlike other libraries that forcefully overwrite your styles, FivUI respects your existing setup. During npx fivui init, you'll be asked how to handle your globals.css file.

Choose Your Approach

Option 1: Complete Overwrite (Recommended)

Replace your existing globals.css with FivUI's optimized styles. This provides the best experience with all components working perfectly out of the box.

Best Experience

Option 2: Append to Existing

Add FivUI styles to your existing globals.css. You'll need to manually ensure compatibility with your existing styles and match our theming structure.

Manual Integration Required

Option 3: No CSS Changes

Skip CSS modifications entirely and manage everything manually. You'll need to set up all theming variables and styles yourself following our Theming documentation.

Not Recommended

Need Theming Details?If you choose Option 2 or 3, refer to our Theming section for complete details on setting up CSS variables, color schemes, and proper global styles configuration.

Framework Compatibility

FivUI works seamlessly with popular React frameworks

Next.js

Full support including App Router and Pages Router

Fully Supported

Vite

Perfect integration with Vite's fast development experience

Fully Supported

Remix

Works great with Remix's server-side rendering

Fully Supported

Gatsby

Compatible with Gatsby's static site generation

Fully Supported

Create React App

Classic CRA setup works out of the box

Fully Supported

Other React Frameworks

Any React-compatible framework should work

Compatible

Tailwind CSS Compatibility

Tailwind CSS 4.x

Recommended for optimal compatibility

Tailwind CSS 3.x

Fully supported with all features

Why Tailwind 4.x?
Tailwind CSS 4.x offers improved performance, better developer experience, and enhanced compatibility with modern build tools. While 3.x works perfectly, we recommend upgrading for the best experience.