Npm Installation

Note:

Only one installation method is available right now. More options will be added in the future. If you would like to contribute, I would truly appreciate it.

Requirements

NextJS 16 or later
React 19 or later
Tailwind Css 4 or later

Next.js Setup

Please refer to the official Next.js documentation when creating a new project. When setting it up, make sure to enable TypeScript and Tailwind CSS, as MijnUI depends on both.

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-core @mijn-ui/react tw-animate-css tailwind-variants tailwind-merge

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 globals.css file:

globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "@mijn-ui/react-core/theme.css";
/* ensure this path is correct */
@source "../../node_modules/@mijn-ui";

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"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

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 tw-animate-css tailwind-variants tailwind-merge

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:

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

Tailwind CSS Configuration

Configure Tailwind CSS by updating your globals.css file:

globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "@mijn-ui/react-core/theme.css";
/* ensure this path is correct */
@source "../../node_modules/@mijn-ui";

Note:

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

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

On this page