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

NextJS 15 or later
React 19 or later
Tailwind Css 3.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 required packages:

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

Tailwind CSS Configuration

Configure Tailwind CSS by updating your tailwind.config.ts file:

tailwind.config.ts

import { mijnui } from "@mijn-ui/react-theme"
import animationPlugin from "tailwindcss-animate"
 
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    "./node_modules/@mijn-ui/react-theme/dist/**/*.js", 
  ],
  darkMode: "class", 
  plugins: [animationPlugin, mijnui({})], 
}

Add Tailwind CSS to Your Global Styles

Make sure your global CSS file includes the following Tailwind CSS directives:

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

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-utilities"; 
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:

components/button.tsx

import * as React from "react"
import { createTVUnstyledSlots } from "@mijn-ui/react"
import {
  UnstyledComponentWithSlots,
  VariantProps,
  buttonStyles,
  cn,
  tv,
} from "@mijn-ui/react"
import { LoaderCircleIcon } from "@mijn-ui/shared-icons"
import { Slot, Slottable } from "@radix-ui/react-slot"
 
// Create custom button styles by extending the default styles
// using the tailwind-variants (tv) function from @mijn-ui/react-theme.

const customButtonStyles = tv({

  extend: buttonStyles,

  variants: {

    color: {
      olive: "", 
    }, 
  }, 

  compoundVariants: [

    {

      color: "olive", 
      variant: "filled", 

      class: {
        base: "bg-[#BEF264] text-[#000000]", 
        icon: "text-[#000000]", 
      }, 
    }, 
    // ... add more compound variants here
  ], 
}) 
 
// define the customButtonStyles slots and variants type
type CustomButtonSlots = keyof ReturnType<typeof customButtonStyles> 
type CustomButtonVariants = VariantProps<typeof customButtonStyles> 
 

// export type ButtonBaseProps = UnstyledComponentWithSlots<ButtonSlots> &
export type ButtonBaseProps = UnstyledComponentWithSlots<CustomButtonSlots> &
  React.ComponentPropsWithRef<"button"> & {
    asChild?: boolean
    loading?: boolean
  }
 

// export type ButtonProps = ButtonBaseProps & ButtonVariantProps
export type ButtonProps = ButtonBaseProps & CustomButtonVariants
 
const Button = ({
  unstyled,
  className,
  classNames,
  color,
  variant,
  size,
  radius,
  loading,
  disabled,
  asChild = false,
  children,
  ...props
}: ButtonProps) => {
  const Component = asChild ? Slot : "button"
  const styles = customButtonStyles({ color, variant, size, radius }) 

  // const styles = buttonStyles({ color, variant, size, radius })
  const { base, icon } = createTVUnstyledSlots(styles, unstyled)
 
  return (
    <Component
      className={base({ className: cn(classNames?.base, className) })}
      disabled={loading || disabled}
      {...props}
    >
      {loading && (
        <LoaderCircleIcon className={icon({ className: classNames?.icon })} />
      )}
      <Slottable>{loading ? "Loading..." : children}</Slottable>
    </Component>
  )
}
 
export { Button }

Usage

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

Manual Installation

Beta Notice

On this page