NPM Installation

This guide provides instructions for installing Mijn-UI components directly from npm.

Beta Notice

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

Requirements

Starter Template

You can either use the nextjs-template template to get started quickly or follow the steps below to integrate Mijn-UI components.

Installation

Install Next.js and Required Dependencies

bash
npx create-next-app@latest

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

bash
  ...
  ✔ Would you like to use TypeScript? No / 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) No / 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 Tailwind Theme Plugin

MijnUI provides a Tailwind plugin with a default theme. You can use this default theme or override it as needed. Currently, we have only one theme available.

npm install @mijn-ui/react-theme

In the Tailwind config file:

tailwind.config.js
  import { mijnUiPreset } from "@mijn-ui/react-theme"
  /** @type {import('tailwindcss').Config} */
 
  export default {
    content: [
      ...
      "./node_modules/@mijn-ui/**/dist/*.js", // Ensure Tailwind scans all mijn-ui packages  //
    ],
    presets: [mijnUiPreset], 
  }

That's it

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

Edit on GitHub

Previous

Introduction

Next

Manual Installation

On this page