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. 3.0.1(1mo ago)631.4k3MITBladePHP ^8.4CI passing Since Jan 30Pushed 1mo 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 yesterday READMEChangelog (8)Dependencies (24)Versions (9)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 @tailwindcss/forms @tailwindcss/typography @tailwindplus/elements ``` #### 2. Import Dashui CSS [](#2-import-dashui-css) Import the css files and add the @tailwind and source directives to your ./resources/css/app.css file. ``` @import 'tailwindcss'; @import '../../vendor/combindma/dash-ui/resources/css/dashui.css'; @plugin '@tailwindcss/forms'; @plugin '@tailwindcss/typography'; @source '../../vendor/combindma/dash-ui/resources/views/**/*.blade.php'; @source '../../vendor/combindma/dash-ui/resources/js/dashui.js'; @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; --top-bar-height: 3.75rem; } ``` #### 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 '@tailwindplus/elements'; 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/app.css', 'resources/js/app.js'], refresh: true, }), tailwindcss(), ], }); ``` #### 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/app.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 53 — FairBetter than 96% of packages Maintenance93 Actively maintained with recent releases Popularity28 Limited adoption so far Community9 Small or concentrated contributor base Maturity65 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 ~121 days Recently: every ~112 days Total 8 Last Release 35d ago Major Versions 1.2.0 → 2.0.02025-03-19 2.1.0 → 3.0.02026-05-28 PHP version history (3 changes)1.0.0PHP ^8.2 1.1.0PHP ^8.3 3.0.0PHP ^8.4 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/81177530?v=4)[Combind](/maintainers/combindma)[@combindma](https://github.com/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 [spatie/laravel-permission Permission handling for Laravel 12 and up 12.9k102.4M1.4k](/packages/spatie-laravel-permission)[spatie/laravel-pdf Create PDFs in Laravel apps 1.0k4.8M47](/packages/spatie-laravel-pdf)[dedoc/scramble Automatic generation of API documentation for Laravel applications. 2.1k11.2M100](/packages/dedoc-scramble)[defstudio/telegraph A laravel facade to interact with Telegram Bots 816333.3k3](/packages/defstudio-telegraph)[spatie/laravel-passkeys Use passkeys in your Laravel app 471890.7k39](/packages/spatie-laravel-passkeys)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3914.6k](/packages/rawilk-profile-filament-plugin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)