Manual Installation

Install Next.js and Required Dependencies

Start by creating a new Next.js application:

npx create-next-app@latest

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

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

Next, add the Mijn-UI packages:

npm install @mijn-ui/react-utilities @mijn-ui/react-hooks @mijn-ui/react-theme @mijn-ui/shared-icons

Configure TypeScript Path Aliases

{
  "compilerOptions": {
    "baseUrl": ".", // Sets the root directory
    "paths": {
      // Path aliases for cleaner imports
      "@/*": ["./src/*"], 
      "@mijn-ui/*": ["./mijn-ui/*"] 
    }
  }
}

Recommended Folder Structure

I recommend using this folder structure for manual integration, similar to the packages folder structure. This way, you won't need to update any component paths, as the source codes are from the mijn-ui packages folder.

Configure Tailwind Theme Plugin:

@mijn-ui/react-theme is a Tailwind CSS plugin that provides the default theme for Mijn-UI components. Currently, only one theme is available, but you can customize it by following the override guide.

import { mijnUiPreset } from "@mijn-ui/react-theme"
/** @type {import('tailwindcss').Config} */
 
export default {
  content: [
    ...
    "./mijn-ui/**/*.{js,ts,jsx,tsx}", // Ensure Tailwind scans all mijn-ui components  //
  ],
  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.