PHPackages                             combindma/dash-ui - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. combindma/dash-ui

ActiveLibrary[Templating & Views](/categories/templating)

combindma/dash-ui
=================

A streamlined and stylish UI component library for Laravel Blade, crafted with TailwindCSS and AlpineJs for simplicity and elegance.

2.1.0(1mo ago)631.4k3MITJavaScriptPHP ^8.3CI failing

Since Jan 30Pushed 1y ago1 watchersCompare

[ Source](https://github.com/combindma/dash-ui)[ Packagist](https://packagist.org/packages/combindma/dash-ui)[ Docs](https://github.com/combindma/dash-ui)[ GitHub Sponsors](https://github.com/Combind)[ RSS](/packages/combindma-dash-ui/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (5)Dependencies (16)Versions (7)Used By (0)

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

[](#ui-components-library-for-laravel-blade-crafted-with-tailwindcss-and-javascript-for-simplicity-and-elegance)

[![Latest Version on Packagist](https://camo.githubusercontent.com/8add786b92b5ebf68fc1910b08a50b0993eb4dd07b4eee62934887260d18c2f6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f636f6d62696e646d612f646173682d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/combindma/dash-ui)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/9dbaee1e5dce5903881eb23c2c49a4f7174e1b5f1eef1aaeb34b9a9b8d326f04/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f636f6d62696e646d612f646173682d75692f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/combindma/dash-ui/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/1838ecd6938bf05d7ba9264115533a960cb4836e7b42098069b6d693a5e36653/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f636f6d62696e646d612f646173682d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/combindma/dash-ui)

If you ever dreamed of having a Shopify admin, DashUI offers a suite of UI components, all inspired by [Shopify Polaris](https://polaris.shopify.com/components), exclusively crafted with TailwindCSS, Laravel Blade and Javascript. These components are designed for effortless integration and offer various customization options.

About Combind Agency
--------------------

[](#about-combind-agency)

[Combine Agency](https://combind.ma?utm_source=github&utm_medium=banner&utm_campaign=package_name) 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](mailto:hello@combind.ma) or visit our [website](https://combind.ma?utm_source=github&utm_medium=banner&utm_campaign=package_name) for more information about our services. Let's build something amazing together!

Demo
----

[](#demo)

Experience DashUI in action by visiting the [Demo Project](https://github.com/combindma/demo-dashui). 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
------------

[](#installation)

You can install the package via composer:

```
composer require combindma/dash-ui
```

Optionally, if you intend to use [Blade Google Material Design Icons](https://github.com/codeat3/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
-----

[](#setup)

#### 1. Installing Tailwind CSS

[](#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

[](#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

[](#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

[](#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

[](#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

[](#6-start-your-build-process)

Run your build process with

```
npm run build
```

#### 7.Start using Dash UI in your project

[](#7start-using-dash-ui-in-your-project)

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

```
>

    Laravel

    @vite(['resources/css/tailwind.css'])

@vite(['resources/js/app.js'])

```

Usage
-----

[](#usage)

See the full [documentation](https://combind.notion.site/Dash-UI-288a0eaa11854c69acae5da7842ee788?pvs=4) for all components and how to use them.

Security Vulnerabilities
------------------------

[](#security-vulnerabilities)

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

Credits
-------

[](#credits)

- [Combind](https://github.com/Combind)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

45

—

FairBetter than 93% of packages

Maintenance65

Regular maintenance activity

Popularity29

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~158 days

Recently: every ~187 days

Total

6

Last Release

46d ago

Major Versions

1.2.0 → 2.0.02025-03-19

PHP version history (2 changes)1.0.0PHP ^8.2

1.1.0PHP ^8.3

### Community

Maintainers

![](https://www.gravatar.com/avatar/31b418bcbabafab33631fd151a64d3e18035f728ad195814aa4656d862610fcd?d=identicon)[combindma](/maintainers/combindma)

---

Top Contributors

[![omarherri](https://avatars.githubusercontent.com/u/12627384?v=4)](https://github.com/omarherri "omarherri (1 commits)")

---

Tags

laravelcombinddash-ui

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/combindma-dash-ui/health.svg)

```
[![Health](https://phpackages.com/badges/combindma-dash-ui/health.svg)](https://phpackages.com/packages/combindma-dash-ui)
```

###  Alternatives

[ryangjchandler/blade-capture-directive

Create inline partials in your Blade templates with ease.

8222.2M12](/packages/ryangjchandler-blade-capture-directive)[spatie/laravel-blade-comments

Add debug comments to your rendered output

177325.5k](/packages/spatie-laravel-blade-comments)[vormkracht10/laravel-mails

Laravel Mails can collect everything you might want to track about the mails that has been sent by your Laravel app.

24149.7k](/packages/vormkracht10-laravel-mails)[daikazu/laravel-glider

Start using Glide on-the-fly instantly in your Laravel blade templates.

882.3k](/packages/daikazu-laravel-glider)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)