electrik/slate

There is no license information available for the latest version (1.1.0) of this package.

Tailwind CSS based UI kit for Laravel Blade

1.1.0 2024-09-05 10:41 UTC

Requires

• php: ^7.4|^8.0|^8.1|^8.2|^8.3
• codeat3/blade-carbon-icons: ^2.1
• illuminate/support: ^7.0|^8.0|^9.0|^10.0|^11.0

Unknown License

• neerajsohal

README

Slate UI Kit is a set of beautiful anonymous blade components built using tailwindcss for your next Laravel project.

Demo | Documentation

Requirements

• PHP 7.4+
• Laravel 7+
• Tailwindcss

Slate UI kit is entirely dependent on Tailwind CSS. If you are using another CSS framework, conflicts may occur. It is not advised to use this kit with any other CSS framework

Installation

Start by installing the package using composer.

composer require electrik/slate

Many of our components have (and will have) placeholders for icons. For these icons, we use blade blade-carbon-icons. You may use other icon sets available here - blade-icons.

Install Tailwind CSS

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

Setup

In your Laravel's root tailwind.config.js file, require the plugins we installed as shown below:

{
...
plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
...
}

Next, your should define the a color scheme for your project:

{
...
theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],
            },
        },
    },
...
}

Your final tailwind.config.js should look like this:

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

module.exports = {
    purge: [
        './resources/**/*.blade.php',
        './vendor/electrik/slate/resources/views/components/**/*.blade.php',
        './vendor/electrik/slate/src/Helpers/SlateUiHelper.php',
    ],
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            fontFamily: {
                sans: ['Inter', ...fontFamily.sans],
            },
        },
    },
    plugins: [
        require('@tailwindcss/aspect-ratio'),
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
    ],
}

Start Using

Once installed you can start using the UI kit in your Laravel views.

For example, for badge using the following will generate badges

<x-slate::badge color="success" size="xs">xs badge</x-slate::badge> 
<x-slate::badge color="success" size="sm">small badge</x-slate::badge> 
<x-slate::badge color="success" size="lg">large badge</x-slate::badge>