Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Frequently Asked Questions

Common questions and answers about Slate UI Kit.

Installation

Why do I need Tailwind CSS v4?

Slate UI Kit is built specifically for Tailwind CSS v4, which uses CSS variables and the @theme directive. Tailwind v3 uses a different configuration system that's incompatible with Slate's approach.

Can I use Slate with Tailwind CSS v3?

No, Slate only supports Tailwind CSS v4. Tailwind v3 is not supported and will not work with Slate. If you're using Tailwind v3, you'll need to upgrade to v4. See the Tailwind CSS v4 migration guide for details.

Do I need to modify tailwind.config.js?

No! With Tailwind CSS v4, Slate uses CSS variables and the @theme directive. The slate:install command automatically configures everything you need in your app.css file.

What does php artisan slate:install do?

The installation command:

  1. Publishes Blade Icons configuration (for icon components)
  2. Installs @tailwindcss/typography plugin via npm (for markdown/prose styling)
  3. Copies slate.css to resources/css/slate.css
  4. Adds @plugin '@tailwindcss/typography'; to your app.css
  5. Adds @import './slate.css'; to your app.css (after Tailwind import)
  6. Adds @source directive to scan Slate components
  7. Verifies Tailwind CSS v4 setup

No manual configuration needed! Everything is automated.

Can I skip npm installation?

Yes! Use the --skip-npm flag:

terminal 
php artisan slate:install --skip-npm

You'll need to manually install the Typography plugin:

terminal 
npm install -D @tailwindcss/typography
npm run build

The @plugin directive will still be added to your app.css automatically.

Usage

How do I use Slate components?

All components are namespaced under slate:::

example.blade.php 
<x-slate::button>Click me</x-slate::button>
<x-slate::input placeholder="Enter text" />
<x-slate::card>
    <x-slate::card-header>Title</x-slate::card-header>
    <x-slate::card-content>Content</x-slate::card-content>
</x-slate::card>

Can I customize components?

Yes! Slate components are anonymous Blade components, meaning they're pure templates. After installation, you can copy and modify any component to fit your needs.

How do I change colors?

Override CSS variables in your CSS file:

styles.css 
:root {
    --color-primary: 220 90% 56%; /* Your brand color */
}

.dark {
    --color-primary: 220 90% 66%; /* Dark mode variant */
}

See the Theming guide for more details.

What variants are available?

Most components support these variants:

  • default - Default styling
  • outline - Outlined variant
  • ghost - Ghost/transparent variant
  • success - Success state (green)
  • warning - Warning state (yellow/orange)
  • error - Error state (red)
  • danger - Danger/destructive state (darker red)
  • info - Info state (blue)

What sizes are available?

Many components support size variants:

  • sm - Small
  • md - Medium (default)
  • lg - Large

Dark Mode

How do I enable dark mode?

Add the dark class to your HTML element:

index.html 
<html class="dark">
    <!-- Your application -->
</html>

How do I toggle dark mode?

Use Alpine.js to toggle the class:

index.html 
<div x-data="{ dark: false }" 
     @click="dark = !dark; document.documentElement.classList.toggle('dark', dark)">
    <button>Toggle Dark Mode</button>
</div>

Why aren't my custom colors working in dark mode?

Make sure you define both light and dark mode colors:

styles.css 
:root {
    --color-primary: 220 90% 56%; /* Light mode */
}

.dark {
    --color-primary: 220 90% 66%; /* Dark mode */
}

Components

How many components does Slate include?

Slate includes 58 components covering forms, layout, navigation, feedback, and data display.

Are components accessible?

Yes! All components are built with accessibility in mind and meet WCAG 2.1 AA standards. Components include proper ARIA attributes, keyboard navigation, and screen reader support.

Do components work with Livewire?

Yes! Slate components automatically detect Livewire forms and wire models. Use them like any Blade component:

example.blade.php 
<x-slate::input wire:model="email" />

Do components work with Laravel validation?

Yes! Slate components automatically display Laravel validation errors:

example.blade.php 
<x-slate::input name="email" />
@error('email')
    <x-slate::alert variant="error">{{ $message }}</x-slate::alert>
@enderror

Styling

Can I use custom CSS with Slate?

Yes! Slate uses CSS variables, so you can override any token. See the Design Tokens reference for all available variables.

How do I change the border radius?

Override the --radius variable:

styles.css 
:root {
    --radius: 0.75rem; /* 12px instead of default 8px */
}

Why are my styles not applying?

Make sure you:

  1. Have run npm run build after making changes
  2. Are using the correct CSS variable names
  3. Have imported slate.css in your app.css

Performance

Does Slate add JavaScript?

No! Slate components are pure Blade templates. Interactive components use Alpine.js, which is already included in most Laravel applications.

How large is Slate?

Slate is lightweight - it only includes CSS variables and Blade templates. The CSS file is minimal, and there's no JavaScript bundle.

Will Slate slow down my application?

No. Slate components are compiled at build time, so there's no runtime performance impact.

Troubleshooting

Components aren't rendering
  1. Make sure you've run php artisan slate:install
  2. Check that slate.css is imported in your app.css
  3. Run npm run build to compile assets
  4. Clear Laravel's view cache: php artisan view:clear

Colors aren't changing
  1. Make sure you're overriding CSS variables, not Tailwind classes
  2. Check that your custom CSS is loaded after slate.css
  3. Verify you're using the correct variable names (see Design Tokens)

Dark mode isn't working
  1. Ensure the dark class is on a parent element (usually <html>)
  2. Check that dark mode variables are defined in .dark selector
  3. Verify Tailwind's dark mode is configured (class-based)

Build errors with Tailwind
  1. Make sure you're using Tailwind CSS v4
  2. Check that @source directives are in your app.css
  3. Verify slate.css is imported before your custom CSS

Integration

Does Slate work with Inertia.js?

Yes! Slate components work perfectly with Inertia.js. Use them in your Inertia pages like any Blade component.

Does Slate work with Filament?

Slate is designed for standard Laravel Blade templates. While Filament uses its own component system, you can use Slate components in custom Filament pages.

Can I use Slate with Laravel Breeze/Jetstream?

Yes! Slate components work great with Laravel Breeze and Jetstream. You can replace default components with Slate components.

Contributing

Can I contribute to Slate?

Yes! Slate is open source. Contributions are welcome. See the GitHub repository for contribution guidelines.

How do I report a bug?

Open an issue on GitHub with:

  • Description of the bug
  • Steps to reproduce
  • Expected vs actual behavior
  • Laravel/Tailwind versions

Can I request a new component?

Yes! Open a feature request on GitHub describing the component and its use case.

License

What license does Slate use?

Slate is licensed under the MIT license, so you're free to use it in any project.

Can I use Slate in commercial projects?

Yes! The MIT license allows commercial use.

Still have questions?
  • Check the Documentation for detailed guides
  • Browse Examples for usage patterns
  • Open an issue on GitHub
  • Join the community discussions
Last updated .