<aside> <img src="/icons/book-closed_gray.svg" alt="/icons/book-closed_gray.svg" width="40px" /> Docs

</aside>

Introduction

DashUI offers a suite of UI components, drawing inspiration from Shopify Polaris, exclusively crafted with TailwindCSS, Laravel Blade templates, and AlpineJS. These components are designed for effortless integration and offer various customization options.

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

Follow the installation steps in this link:

https://github.com/combindma/dash-ui

Personalization and Customization

One of the core strengths of DashUI is its flexibility in personalization and customization. All components in DashUI are meticulously crafted using Laravel's Blade syntax, offering a seamless integration with your Laravel applications.

To customize a component you can pass classes to it or even use inline styles.

Example:

<x-dashui-button class="my-custom-class">
    Click Me
</x-dashui-button>

Components

Elements

Buttons

Untitled

Code

Attributes	Default	Options	Notes
as	button	button, link
variant	default	default, primary, secondary, subtle, plain
tone	basic	basic, critical, success
size	null	large
fullWidth	false	true, false
disabled	false	true, false
pressed	false	true, false	Only use with default variant

Buttons group

Untitled

Code

Attributes	Default	Options	Notes
variant	basic	basic, segmented

Avatars

Untitled

Code

Attributes	Default	Options	Notes
size	md	xs, sm, md, lg, xl
initials	null	string	Only use it as a replacement to user’s picture and add a custom background color
src	null	image link

Thumbnail

Untitled

Code

Attributes	Default	Options	Notes
size	md	xs, sm, md, lg
src	null	image link	use an icon as a replacement of the image

Badge

Untitled

Code

Attributes	Default	Options	Notes
tone	null	info, success, attention, warning, critical
progress	null	incomplete, partiallyComplete, complete

Layout

Box

Untitled

Code

Attributes	Default	Options
border	false	true, false
shadow	false	true, false
rounded	false	true, false

Card

Untitled

Code

Attributes	Default	Options	Notes
variant	basic	basic, subdued
hasDivider	false	true, false
reset	false	true, false	Only use it if want to reset the card style (remove the shadow and border-radius)

Slots	Notes
heading	Contains the text content for the heading of the card.
subheading	Contains the text content for the subheading of the card.
actions	Add actions to the card header
footer	Contains content for the footer section of the card. (Add only button actions)

Callout card

Untitled

Code

Slots	Notes
heading	Contains the text content for the heading of the card.
illustration	Contains the image illustration of the card.

Divider

Untitled

Code

Empty state

Untitled

Code

Slots	Notes
heading	Contains the text content for the heading of the card.
illustration	Contains the image illustration of the card.

Media card

Untitled

Code

Attributes	Default	Options	Notes
id		a unique string id	this is required to toggle popover action

Slots	Notes
heading	Contains the text content for the heading of the card.
media	Contains the image of the card.
actions	Contains the action links when the popover is showed

Media card portrait

Untitled

Code

Attributes	Default	Options	Notes
id		a unique string id	this is required to toggle popover action