Larastrator is a lightweight admin panel components. it's inspired by refactoringui best practices. This package is built using Laravel, Vue and other popular tools.

laravel admin

Demo

laravel admin control panel

Live demo

https://the94air.github.io/larastrator

Installation

$ npm install larastrator vue vue-slidout vue-slide-up-down vue-notification \
              vue-good-table --save

$ npm install tailwindcss --save-dev

# Then, you will need to to complete the tailwindcss installation 
# https://tailwindcss.com/docs/installation

after you create the tailwind config file inside your project, add the next configurations as well

// Add these colors to the colors object
let colors = {
    'brand-grey-darker': '#606060',
    'brand-grey-light': '#b6bec6',
    'brand-grey-lighter': '#e9eef2',
    'brand-grey-lightest': '#f7f7f7',
}

// Add the default font
module.exports = {
    fonts: {
        'sans': [
            'Source\\ Sans\\ Pro',
            // ...
        ],

        'serif': [
            'Source\\ Sans\\ Pro',
            // ...
        ]
    }

    // ...

    shadows: {
        'outline': '0 0 0 3px rgba(201, 210, 218, 0.5)',
        'button': '0 0 0 2px rgba(33, 150, 243, 0.3)',
        'alert': '0 1px 1px 0px rgba(0, 0, 0, 0.1)',
    }

    // ...

    modules: {
        fonts: false,
        width: ['responsive', 'hover'],
    }

    // ...

    plugins: [
        require('tailwindcss/plugins/container')({
            center: true,
            padding: '1rem',
        }),
    ],
}

Add the default font into your or use your own font.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Larastrator</title>

    <!--- Make sure you are using the latest version of webfont loader -->
    <script  src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script> 
    <script>
        WebFont.load({
            google:  {
                families:  ['Source Sans Pro:400,600']
            }
        });
    </script> 
</head>
<body>

</body>
</html>

Source Code

https://www.npmjs.com/package/larastrator