Architecture

Understanding how Slate is built helps you use it effectively.

Slate uses Laravel's anonymous components feature. This means:

• No PHP classes to maintain
• Pure Blade templates
• Simple attribute passing
• Easy to customize

Slate components intelligently merge attributes:

<x-slate::button class="my-custom-class">
    Click me
</x-slate::button>

Your classes are merged with component defaults, not replaced.

Slate is built with Tailwind CSS v4, which means:

• CSS variables for theming
• Modern @theme directive
• No legacy baggage
• Native dark mode support

Each component follows a consistent pattern:

1. Props - Configurable via attributes
2. Slots - Content areas
3. Defaults - Sensible defaults for all props
4. Accessibility - Built-in ARIA attributes

Slate uses semantic design tokens:

• Colors: primary, secondary, success, warning, error
• Spacing: Consistent scale
• Typography: Semantic font sizes
• Borders: Consistent radius and width

Dark mode is built into the architecture:

• CSS variables switch automatically
• No JavaScript required
• Respects system preferences
• Can be overridden per component

Slate is designed for performance:

• Zero JavaScript by default
• CSS-only components where possible
• Alpine.js only for interactive components
• Minimal bundle size