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

Next.js 15 or later
React 19 or later
Tailwind CSS 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

Installation

All MijnUI components are exported from the single @mijn-ui/react package and themed with Tailwind CSS v4. Follow the steps below to set up MijnUI in your project:

Install Packages

Install MijnUI and its peer dependencies:

npm install @mijn-ui/react tailwind-merge tailwind-variants

Then install the Tailwind v4 toolchain (dev dependencies). tw-animate-css provides the animation utilities (e.g. animate-in) used by overlay components such as Dialog and Popover:

npm install -D tailwindcss @tailwindcss/postcss tw-animate-css

Configure PostCSS

Tailwind CSS v4 uses a dedicated PostCSS plugin. Create or update postcss.config.mjs:

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {}, 
  },
}

export default config

Note:

Tailwind v4 no longer uses a tailwind.config.js file or the mijnui plugin. Configuration is CSS-first — you can safely delete any existing tailwind.config.*.

Set Up Your Global CSS

MijnUI ships its theme as CSS (Tailwind v4 @theme). Replace the contents of your global stylesheet (e.g. app/globals.css) with:

app/globals.css

@import "tailwindcss"; 
@import "@mijn-ui/react-core/theme.css"; 
@import "tw-animate-css"; 

/* Enable class-based dark mode (toggle `.dark` on <html>) */
@custom-variant dark (&:where(.dark, .dark *)); /* [!code highlight] */

/* Tailwind v4 skips node_modules during content detection, so point it at the
   MijnUI packages whose styles emit the utility classes used at runtime. */
@source "../node_modules/@mijn-ui"; /* [!code highlight] */

Make sure this file is imported in your root layout:

app/layout.tsx

import "./globals.css"

Note (pnpm):

Adjust the @source path so it resolves to where @mijn-ui actually lives. From app/globals.css the project root node_modules is ../node_modules. If you use a monorepo, point it at the root node_modules/@mijn-ui.

Enable Dark Mode (optional)

The theme flips its color tokens under the .dark class. Use a theme provider such as next-themes to toggle it:

app/providers.tsx

"use client"

import { ThemeProvider } from "next-themes"

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  )
}

Use MijnUI Components

Import components from the @mijn-ui/react package and start building:

import { Button } from "@mijn-ui/react"

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

The same package also exports the utilities you'll commonly need, such as cn:

import { cn } from "@mijn-ui/react"

Npm Installation

Beta Notice

Note:

Note (pnpm):

On this page