Npm Installation

This guide provides installation instructions for using Mijn-UI components via npm packages.

Beta Notice

Currently, we provide only one installation option: Next.js integration.

Requirements

NextJS 15 or later
React 19 or later
Tailwind Css 3.4 or later

Next.js Setup

Before starting the installation process, make sure to select the following options when setting up your Next.js project, as MijnUI depends on TypeScript and Tailwind CSS:

  ...
  ✔ Would you like to use TypeScript? Yes
  ✔ Would you like to use ESLint? No / Yes
  ✔ Would you like to use Tailwind CSS? Yes
  ✔ Would you like your code inside a `src/` directory? No / Yes
  ✔ Would you like to use App Router? (recommended) Yes 
  ✔ Would you like to use Turbopack for next dev? No / Yes
  ✔ Would you like to customize the import alias (@/* by default)? No / Yes

Global Installation

Getting started with MijnUI is simple using the global installation method, where all components are imported from a single package. Follow the steps below to set up MijnUI in your project:

Install Packages

Install MijnUI and its required dependencies by running one of the following commands:

npm install @mijn-ui/react tailwindcss-animate

Configure Hoisted Dependencies (For PNPM Users)

If you're using PNPM, ensure MijnUI's packages are properly hoisted to the root node_modules. Add the following to your .npmrc file:

.npmrc

public-hoist-pattern[]=*@mijn-ui/*

After updating the .npmrc file, rerun the installation command to correctly hoist the dependencies:

pnpm install

Note:

If you're using a package manager like npm or Yarn, this step can be skipped.

Tailwind CSS Setup

Configure Tailwind CSS by updating your tailwind.config.ts file:

tailwind.config.ts

import { mijnui } from "@mijn-ui/react-theme"
import animationPlugin from "tailwindcss-animate"
 
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@mijn-ui/react-theme/dist/**/*.js", 
  ],
  darkMode: "class", 
  plugins: [animationPlugin, mijnui({})], 
}

Note:

If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT node_modules

Use MijnUI Components

Now, you can start using MijnUI components in your project. Import individual components like this:

import { Button } from "@mijn-ui/react-button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Important:

Always import components from their respective packages (e.g., @mijn-ui/react-button) to avoid larger bundle sizes. Do not import them from the global package @mijn-ui/react.

Individual Installation

For greater flexibility, you can install MijnUI components individually. This allows you to include only the components you need in your project. Follow these steps to get started:

Install Core Packages

Begin by installing the core packages required for all MijnUI components to work correctly:

npm install @mijn-ui/react-core @mijn-ui/react-theme tailwindcss-animate

Install Specific Components

Next, install the component you want to use. For example, to use the Button component, run:

npm install @mijn-ui/react-button

Configure Hoisted Dependencies (For PNPM Users)

Similar to the global installation, if you're using PNPM, update your .npmrc file to hoist MijnUI packages:

.npmrc

public-hoist-pattern[]=*@mijn-ui/*

Then, rerun the installation command:

pnpm install

Note:

Skip this step if you're using npm or Yarn.

Tailwind CSS Configuration

Configure Tailwind CSS by updating your tailwind.config.ts file:

tailwind.config.ts

import { mijnui } from "@mijn-ui/react-theme"
import animationPlugin from "tailwindcss-animate"
 
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@mijn-ui/react-theme/dist/**/*.js", 
  ],
  darkMode: "class", 
  plugins: [animationPlugin, mijnui({})], 
}

Use the Component

Import and use individual components in your application like this:

import { Button } from "@mijn-ui/react-button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button> 
    </div>
  )
}

Npm Installation

Beta Notice

Note:

Note:

Important:

Note:

On this page