Manual Installation

This guide provides installation instructions for using MijnUI components manually.

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

Installation Guide

Setting Up Your Next.js Project

bash

npx create-next-app@latest

Make sure to use Tailwind CSS and Typescript when setting up your Next.js project.

bash

  ...
  ✔ 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

Install Dependencies

Install the core package, its peer dependencies, and the Tailwind v4 toolchain. @mijn-ui/react-core provides the shared utilities (cn, tv helpers, slots) and ships the theme CSS:

npm install @mijn-ui/react-core @mijn-ui/shared-icons tailwind-merge tailwind-variants

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 is CSS-first — there is no tailwind.config.js and no mijnui plugin. Delete any existing tailwind.config.*.

Set Up Your Global CSS

MijnUI ships its theme as CSS (Tailwind v4 @theme). Update your global stylesheet (e.g. app/globals.css):

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] */

/* Scan your copied component files so their utility classes are generated. */
@source "./**/*.{ts,tsx}";

That's it

You can now start adding components to your project. Check out the components section to learn more about the available components.

Note:

When using Mijn-UI components manually, you will need to resolve the import paths in your project. This is because all of the code is directly from the package source files.

For example, update your imports like this:

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

Why Choose Manual Integration?

Manual integration might be the right choice if you need more control or are concerned about the stability of the npm packages.

1. Access to Source Code

Full control over the components for deeper customization or understanding.

2. Avoid NPM Package Instability

If you’re concerned about potential breaking changes in the npm packages, manual integration can be a more stable approach.

3. Customizable Foundations

Modify and extend components directly to suit your needs.

For example, here’s how you can extend the Button variants by manually integrating MijnUI components:

Usage

<Button color="olive">Extended Button</Button>

Manual Installation

Beta Notice

Note:

On this page