Customizing

Any configuration or CSS provided by daisyUI or Tailwind are valid for maryUI components. Here are some useful links:

Customize Config Colors Utilities and variables new Themes Theme generator new

Pro tip: stick to the defaults, avoid to tweak things. DaisyUI themes are carefully hand crafted with all UX/UI things in mind.

Theme variables

This is the advised approach for applying a global style across the components, through the daisyUI theming system.

<x-input />
<x-select />

@plugin "daisyui/theme" {
    name: "light";              /* the theme name you want to override */
    default: true;              /* set as default */
    prefersdark: false;         /* set as default dark mode (prefers-color-scheme:dark) */
    color-scheme: light;        /* color of browser-provided UI */
 
    /* Custom styles ...*/
    --radius-field: 2.25rem;
}

Through `app.css`

Use this as secondary approach, when theme variables is not enough.

Name

The full name

Country

Select one

@php                            
    $users = $this->users();      
@endphp                         
<x-form wire:submit="save"> 
<x-input label="Name" placeholder="Hello" hint="The full name" wire:model="name" />
<x-select label="Country" placeholder="Select one" wire:model="country_id" />
<x-toggle label="Terms" label="Select one" />
<x-group label="User" label="Select one" wire:model="user_id" :options="$users" />
<x-slot:actions>
    <x-button type="submit" class="btn-primary" label="Save" />
</x-slot:actions>
</x-form>

.input:not([class*="!input-error"]),
.select:not([class*="!select-error"]),
.toggle:not([class*="!checkbox-error"]) {
    @apply border-primary outline-primary
}
 
.checkbox:checked, .toggle:checked, .radio:checked {
    @apply text-primary;
}
 
.btn:checked {
    @apply bg-primary border-none shadow-none;
}
 
.fieldset-legend {
    @apply text-[0.9rem];
}
 
.fieldset-label, .fieldset .text-error {
    @apply text-sm
}

Component classes

You can apply any CSS class to individual components for edge cases.

<x-input placeholder="Default" />
<x-input placeholder="No outline" class="!outline-none" />
<x-input placeholder="Primary" class="input-primary text-primary" />
<x-select placeholder="Size" class="select-xl" />

Made with by Robson Tenório and contributors.