<aside> <img src="/icons/book-closed_gray.svg" alt="/icons/book-closed_gray.svg" width="40px" /> Docs
</aside>
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.
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.
Follow the installation steps in this link:
https://github.com/combindma/dash-ui
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>
| 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 |
| Attributes | Default | Options | Notes |
|---|---|---|---|
| variant | basic | basic, segmented |
| 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 |
| Attributes | Default | Options | Notes |
|---|---|---|---|
| size | md | xs, sm, md, lg | |
| src | null | image link | use an icon as a replacement of the image |
| Attributes | Default | Options | Notes |
|---|---|---|---|
| tone | null | info, success, attention, warning, critical | |
| progress | null | incomplete, partiallyComplete, complete |
| Attributes | Default | Options | Notes |
|---|---|---|---|
| border | false | true, false | |
| shadow | false | true, false | |
| rounded | false | true, false |
| 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) |
| Slots | Notes |
|---|---|
| heading | Contains the text content for the heading of the card. |
| illustration | Contains the image illustration of the card. |
| Slots | Notes |
|---|---|
| heading | Contains the text content for the heading of the card. |
| illustration | Contains the image illustration of the card. |
| 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 |
| Attributes | Default | Options | Notes |
|---|