Customization

Slate is designed to be customized. Here's how.

Overriding Styles

Using Classes

Add your own classes to any component:

example.blade.php

<x-slate::button class="bg-purple-500 hover:bg-purple-600">
    Custom Button
</x-slate::button>

<x-slate::button class="bg-purple-500 hover:bg-purple-600">
    Custom Button
</x-slate::button>

Using CSS Variables

Override design tokens via CSS:

styles.css

:root {
    --color-primary: 250 84% 47%;
    --color-primary-foreground: 0 0% 100%;
}

:root {
    --color-primary: 250 84% 47%;
    --color-primary-foreground: 0 0% 100%;
}

Publishing Components

You can publish any component to customize it:

terminal

php artisan vendor:publish --tag=slate-components

php artisan vendor:publish --tag=slate-components

This copies all components to resources/views/vendor/slate/components/.

Extending Components

Create your own components that extend Slate:

example.blade.php

{{-- resources/views/components/my-button.blade.php --}}
@@props(['variant' => 'default'])

<x-slate::button 
    :variant="$variant"
    class="my-custom-class"
>
    {{ $slot }}
</x-slate::button>

@
@@props(['variant' => 'default'])

<x-slate::button 
    :variant="$variant"
    class="my-custom-class"
>
    {{ $slot }}
</x-slate::button>

Custom Variants

Add your own variants by extending the component:

example.blade.php

@@props(['variant' => 'default'])

@@php
$variants = [
    'default' => 'bg-primary text-primary-foreground',
    'custom' => 'bg-purple-500 text-white',
];
$classes = $variants[$variant] ?? $variants['default'];
@@endphp

<button {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</button>

@@props(['variant' => 'default'])

@@php
$variants = [
    'default' => 'bg-primary text-primary-foreground',
    'custom' => 'bg-purple-500 text-white',
];
$classes = $variants[$variant] ?? $variants['default'];
@endphp

<button {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</button>

Theming

See the Theming Guide for detailed theming options.

Best Practices

Use CSS variables for color customization
Extend, don't replace when possible
Keep it simple - Slate is already flexible
Test in dark mode - Ensure your customizations work