Installation

Mijnui is a UI component library for Livewire applications. Built with Tailwind CSS, it provides a set of easy-to-use and customizable components.

Prerequisites

Before installing Mijnui, make sure you have the following:

Getting Started

1

Install Mijnui

Install Mijnui via Composer from your project root:
composer require mijnui/mijnui

composer require mijnui/mijnui:dev-main

Note: Currently, you can use the dev-main version as Mijnui is in development state.

2

Include Mijnui Assets

Add the Blade directives to your layout file:
<body>
...
@minuiScripts
</body>
3

Set Up Tailwind CSS

Mijnui uses Tailwind CSS for styling. If Tailwind is already installed, add the following to your resources/css/app.css:
@import '../../vendor/mijnui/mijnui/dist/mijnui.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
If Tailwind isn't installed, follow the Tailwind installation guide.
4

Add Tailwind Config

Mijnui uses Tailwind CSS for styling.

/** @type {import('tailwindcss').Config} */

export default {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {
            colors: {
                main: {
                    DEFAULT: "hsl(var(--main) / )",
                    text: "hsl(var(--main-text) / )",
                    border: "hsl(var(--main-border) / )",
                },
                default: {
                    DEFAULT: "hsl(var(--default) / )",
                    text: "hsl(var(--default-text) / )",
                },
                surface: {
                    DEFAULT: "hsl(var(--surface) / )",
                    text: "hsl(var(--surface-text) / )",
                },
                muted: {
                    DEFAULT: "hsl(var(--muted) / )",
                    text: "hsl(var(--muted-text) / )",
                },
                accent: {
                    DEFAULT: "hsl(var(--accent) / )",
                    text: "hsl(var(--accent-text) / )",
                },
                primary: {
                    DEFAULT: "hsl(var(--primary) / )",
                    text: "hsl(var(--primary-text) / )",
                },
                secondary: {
                    DEFAULT: "hsl(var(--secondary) / )",
                    text: "hsl(var(--secondary-text) / )",
                },
                info: {
                    DEFAULT: "hsl(var(--info) / )",
                    text: "hsl(var(--info-text) / )",
                    "filled-text": "hsl(var(--info-filled-text) / )",
                },
                warning: {
                    DEFAULT: "hsl(var(--warning) / )",
                    text: "hsl(var(--warning-text) / )",
                    "filled-text": "hsl(var(--warning-filled-text) / )",
                },
                danger: {
                    DEFAULT: "hsl(var(--danger) / )",
                    text: "hsl(var(--danger-text) / )",
                    "filled-text": "hsl(var(--danger-filled-text) / )",
                },
                success: {
                    DEFAULT: "hsl(var(--success) / )",
                    text: "hsl(var(--success-text) / )",
                    "filled-text": "hsl(var(--success-filled-text) / )",
                },
                "input-border": "hsl(var(--input-border) / )",
                ring: "hsl(var(--ring) / )",
            },
        },
    },
}

Disable Dark Mode

Mijnui handles dark mode by default. If you prefer to manage it manually, remove the directive from your layout file.
<head> ... -- </head>

Mijnui Updated

Regularly update Mijnui via Composer:
composer update mijnui/mijnui

composer update mijnui/mijnui:dev-main

On this page