UI components library for Laravel Blade, crafted with TailwindCSS and Javascript for simplicity and elegance.

If you ever dreamed of having a Shopify admin, DashUI offers a suite of UI components, all inspired by Shopify Polaris, exclusively crafted with TailwindCSS, Laravel Blade and Javascript. These components are designed for effortless integration and offer various customization options.

About Combind Agency

Combine Agency is a leading web development agency specializing in building innovative and high-performance web applications using modern technologies. Our experienced team of developers, designers, and project managers is dedicated to providing top-notch services tailored to the unique needs of our clients.

If you need assistance with your next project or would like to discuss a custom solution, please feel free to contact us or visit our website for more information about our services. Let's build something amazing together!

Demo

Experience DashUI in action by visiting the Demo Project. The demo provides a practical showcase of the DashUI components, allowing you to see how they can be integrated and customized in a real Laravel application.

Installation

You can install the package via composer:

composer require combindma/dash-ui

Optionally, if you intend to use Blade Google Material Design Icons as it is the case in the demo, run this command:

composer require codeat3/blade-google-material-design-icons

We recommend you to enable icon caching using:

php artisan icons:cache

Optionally, you can publish the views using:

php artisan vendor:publish --tag="dash-ui-views"

Setup

1. Installing Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss postcss-import autoprefixer @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography system-font-css
npx tailwindcss init -p

2. Configuring styles

Add the paths to all of your template files in your tailwind.config.js file.

TIP: You can specify your primary color by editing primary: colors.stone.

const colors = require('tailwindcss/colors')

export default {
    content: [
        //...
        './vendor/combindma/dash-ui/resources/views/**/*.blade.php',
    ],
    darkMode: 'class',
    theme: {
        fontFamily: {
            sans: ['Inter', 'system-ui'],
        },
        fontSize: {
            xs: '0.75rem',
            sm: '0.8125rem',
            base: '0.875rem',
            lg: '1.25rem',
            xl: '1.5rem',
            '2xl': '1.875rem',
            '3xl': '2.25rem',
            '4xl': '3.052rem',
        },
        extend: {
            colors: {
                primary: colors.stone,
            }
        }
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/aspect-ratio'),
        require("@tailwindcss/typography")
    ],
}

Create a postcss.config.js file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins:

export default {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
    }
}

3. Add the Tailwind directives and import the library to your CSS file

Import the css files and add the @tailwind directives for each of Tailwind’s layers to your ./resources/css/tailwind.css file.

@import '../../node_modules/system-font-css/system-font.css';
@import "tailwindcss/base";
@import "tailwindcss/components";
@import '../../vendor/combindma/dash-ui/resources/css/dashui.css';
@import "tailwindcss/utilities";

4. Import javascript components to your js file

Import the js file to your ./resources/js/app.js file.

import '../../vendor/combindma/dash-ui/resources/js/dashui.js';

5. Update vite config file

Add this to your file vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/tailwind.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

6. Start your build process

Run your build process with

npm run build

7.Start using Dash UI in your project

Make sure your compiled CSS and Javascript are included in your main layout.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <link rel="preconnect" href="https://rsms.me/">
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    @vite(['resources/css/tailwind.css'])
</head>
<body class="antialiased">


<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>
@vite(['resources/js/app.js'])
</body>
</html>

Usage

See the full documentation for all components and how to use them.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Combind
• All Contributors

License

The MIT License (MIT). Please see License File for more information.