Blade Application UI

Installation

After you've purchased a license, add the satis.razorui.com repository in your composer.json:

"repositories": [
    {
        "type": "composer",
        "url": "https://satis.razorui.com"
    }
],

Next, you need to create a file called auth.json and place it either next to the composer.json file in your project, or in the Composer home directory. You can determine the Composer home directory on *nix machines by using this command:

composer config --list --global | grep home

You can find your license key in your Razor UI account. This is the content you should put in auth.json:

{
    "http-basic": {
        "satis.razorui.com": {
            "username": "<YOUR-RAZORUI.COM-ACCOUNT-EMAIL-ADDRESS-HERE>",
            "password": "<YOUR-RAZORUI.COM-LICENSE-KEY-HERE>"
        }
    }
}

With the configuration above in place, you'll be able to install the package into your project using this command:

composer require razorui/blade-application-ui

Many components contain space for icons. In our examples, we use icons from blade-iconic, but you may install any Blade icon set you wish:

composer require itsmalikjones/blade-iconic

Install the required Tailwind plugins:

npm install @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography --save-dev

Setup

In your tailwind.config.js file, enable JIT mode, require the plugins we installed, purge the package's /resources/views/components path, and define custom colours used by the components. You may customise these colours to your liking.

Here is an example tailwind.config.js file that implements these requirements:

const colors = require('tailwindcss/colors')
const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/razorui/blade-application-ui/resources/views/components/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

To use the interactive components, make sure to install Alpine.js.