包简介

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

README 文档

README

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 @tailwindcss/forms @tailwindcss/typography @tailwindplus/elements

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

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

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

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://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
    @vite(['resources/css/app.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

License

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

combindma/dash-ui 适用场景与选型建议

combindma/dash-ui 是一款基于 Blade 开发的 Composer 扩展包，目前已累计 1.45k 次下载、GitHub Stars 达 63，最近一次更新时间为 2024 年 01 月 30 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「laravel」「combind」「dash-ui」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 combindma/dash-ui 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 combindma/dash-ui 我们能提供哪些服务？

定制开发 / 二次开发

基于 combindma/dash-ui 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 combindma/dash-ui 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

combindma/flash 0

Easy Flash Messages for a Laravel App

combindma/mailcoach-skeleton 0

A useful package to have user management in your mailcoach project

foxtes/alfabank-rest 1

Alfabank REST API integration

chrislorando/laravel-accurate 0

Laravel package for Accurate Online API integration.

rcx/datatables-laravel 0

Shared RCX Laravel DataTables UI and configuration helpers.

igne-agency/laravel-boot-up 0

Boot a Laravel project on any machine with one command: app:serve installs missing tools (PHP, Node, Composer, Herd, Docker), creates .env, sets up the database, runs migrations, builds assets, starts a queue worker and serves via Herd, Sail or artisan serve; app:down cleanly stops everything it sta

combindma/dash-ui

包简介

关键字：