Connection lost, check your internet connection!
Sponsor the project Github. Sponsor. Paypal.
  1. Example One

Form Card Title

Form card description.

4 maxWidth variant: full, 7xl (default), 3xl, xl

4 formWidth variant: full, 7xl, 3xl, lg (default)

  1. title : props / slot - nullable
  2. description : props / slot - nullable
  3. maxWidth : props (default = 7xl) - nullable
  4. formWidth : props (default = lg) - nullable
  5. submit : props - required
  6. form : slot - required
  7. content : slot - required

* Attachment isn't working yet. Still WIP.

App Card Title

App card description.

Actions

4 maxWidth variant: full, 7xl (default), 3xl, xl

  1. title : props / slot - nullable
  2. description : props / slot - nullable
  3. maxWidth : props (default = 7xl) - nullable
  4. actions : slot - nullable
  5. content : slot - nullable

Stat Card

The default for stat card is just plain text, if you put href it will be a link and add wire:navigate, if you put openNewTab='true' it will remove wire:navigate and add target='_blank' to open new tab

  1. title : props / slot - nullable
  2. stat : props / slot - nullable
  3. href : props - nullable
  4. openNewTab : props (default = false) - nullable

No Link

Just Stat

Link with Open New Tab

Github

Link with Wire Navigate

Example Page

Icon

All the available icon.

Heroicon
Lucide

The default icon component doesn't have width and height, so you should add it by add class="w-5 h-5".

To add another icon I recomend to use outline icon with stroke-width = 1.5 from Heroicon or Lucide to keep the same style.

Outline Icons

Other Icons

Button

All the available button.

When loading is active it will remove icon slot and replace it with loading spinner. Also button will be disable when have loading props and loading is active.

  1. title : props / slot - nullable if have slot
  2. icon : slot - nullable
  3. loading : props - nullable
  4. iconPlacement : props (default = left) - nullable
  5. slot - nullable if have title
Button
Button with Loading Left
Button with Loading Right
Button with Icon Left
Button with Icon Left & Loading
Button with Icon Right
Button with Icon Right & Loading
Button Icon
Button Icon with Loading
  1. title : props / slot - nullable if have slot
  2. href : props (default = null) - nullable
  3. icon : slot - nullable
  4. slot - nullable if have title
Button Link
Primary Secondary Muted
Button Link with Icon
Primary
Secondary
Muted
  1. title : props / slot - nullable if have slot
  2. href : props (default = null) - nullable
  3. icon : slot - nullable
  4. active : props - nullable
  5. slot - nullable if have title
Button Link Navigation
Active Nav Nav
Active Responsive Nav Responsive Nav
Button Link Navigation with Icon
Active Nav
Nav
Active Responsive Nav
Responsive Nav

Button link or button link navigation is not wire:navigate by default. You should add wire:navigate to make SPA-like experience.

Dropdown

Press 'esc' also close dropdown and 'tab' or ' shift + tab' to navigate.

4 align variant: left, right (default), top-left, top-right.

2 width variant: max (default), 48.

It also have smaller component like dropdown link, dropdown button and dropdown category.

  1. title : props / slot - nullable
  2. align : props (default = right) - nullable
  3. width : props (default = max) - nullable
  4. autoClose : props (default = true) - nullable
  5. trigger : slot - required
  6. content : slot - required
Top Left
Dropdown Category with Divider
Dropdown Category without Divider
Dropdown Link
Dropdown Link with Icon
Top Right
Dropdown Category with Divider
Dropdown Category without Divider
Dropdown Link
Dropdown Link with Icon
Bottom Left
Dropdown Category with Divider
Dropdown Category without Divider
Dropdown Link
Dropdown Link with Icon
Bottom Right
Dropdown Category with Divider
Dropdown Category without Divider
Dropdown Link
Dropdown Link with Icon

Toaster

4 toaster type available : success, warning, error and info.

The default position alignment is bottom left, but you can change it on 'toaster.php'.

Modal

Press 'esc' also close dropdown and 'tab' or ' shift + tab' to navigate.

There are two modal options available: one serves as a trigger (wire:click), while the other functions as a form (wire:submit) for creating or confirming actions. Also when the modal is opened, it will disable scrolling and focus on the first input.
  1. title : props / slot - nullable
  2. content : slot - nullable if form available
  3. form : slot - nullable if content available
  4. submit : props - nullable if content available
  5. actions : slot - required
Modal Form
Fill the form please.
Modal Action
Are you sure?

By the way, when it comes to data creation, I prefer utilizing another full-page Livewire component and not using a modal.