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

"repositories": [
        "type": "composer",
        "url": ""

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": {
        "": {
            "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


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 = {
    mode: 'jit',
    purge: [
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                warning: colors.yellow,
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],
    plugins: [

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