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.

npm install -D tailwindcss postcss @tailwindcss/postcss @tailwindcss/aspect-ratio @tailwindcss/forms @tailwindcss/typography

2. Add Tailwind to your PostCSS configuration

Add @tailwindcss/postcss to your postcss.config.mjs file, or wherever PostCSS is configured in your project.

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

3. Import Dashui CSS

Import the css files and add the @tailwind and source directives to your ./resources/css/tailwind.css file.

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

@import 'tailwindcss';
@import '../../vendor/combindma/dash-ui/resources/css/dashui.css';

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/aspect-ratio';
@plugin '@tailwindcss/typography';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/combindma/dash-ui/resources/views/**/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';


@custom-variant dark (&:is(.dark *));

@theme {
    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --text-*: initial;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3.052rem;

    --color-primary-50: #fafaf9;
    --color-primary-100: #f5f5f4;
    --color-primary-200: #e7e5e4;
    --color-primary-300: #d6d3d1;
    --color-primary-400: #a8a29e;
    --color-primary-500: #78716c;
    --color-primary-600: #57534e;
    --color-primary-700: #44403c;
    --color-primary-800: #292524;
    --color-primary-900: #1c1917;
    --color-primary-950: #0c0a09;
}

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

@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.