Day 3 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 3

Press ESC to exit

Source

Day 3

Alert & Modal Components

Beautiful alerts with variants and modals with Alpine.js state management

Alert Component

Contextual messages with beautiful variants and icons

Alert Variants

Your changes have been saved successfully!

An error occurred while processing your request. Please try again.

This action cannot be undone. Please proceed with caution.

You have 3 new notifications waiting for you.

Dismissible Alerts with Titles

Payment Successful

Your payment of $99.00 has been processed successfully. Receipt sent to your email.

Upload Failed

The file size exceeds the maximum limit of 10MB. Please choose a smaller file.

Security Alert

Suspicious login activity detected from a new device in Yaoundé, Cameroon.

New Features

We've added support for Mobile Money payments (MTN, Orange Money) for Cameroon users!

Modal Component

Dialogs with Alpine.js state management and smooth transitions

Modal Sizes

Real-world Examples

Combined Example

Alert and Modal working together for a complete UX

Component API Reference

Alert Component

Prop	Type	Default	Description
variant	string	'info'	success, error, warning, info
dismissible	boolean	false	Show close button
title	string	null	Optional title
icon	string	auto	Custom Lucide icon

Modal Component

Prop	Type	Default	Description
id	string	'modal'	Unique identifier for events
size	string	'md'	sm, md, lg, xl, 2xl, 3xl, 4xl, full
closeable	boolean	true	Allow closing (X, ESC, click outside)
title	string	null	Optional modal title
footer	slot	null	Named slot for footer actions

Usage Examples

Alert Usage

<x-ui.alert variant="success" :dismissible="true" title="Success">
    Your changes have been saved!
</x-ui.alert>
 
<x-ui.alert variant="error" :dismissible="true" title="Error">
    Something went wrong. Please try again.
</x-ui.alert>
 
<x-ui.alert variant="warning" title="Warning">
    Your session will expire in 5 minutes.
</x-ui.alert>
 
<x-ui.alert variant="info" icon="info">
    New features are now available!
</x-ui.alert>

Modal Usage

<!-- Trigger -->
<x-ui.button x-on:click="$dispatch('open-modal-example')">
    Open Modal
</x-ui.button>
 
<!-- Modal -->
<x-ui.modal id="example" size="md" title="Example Modal">
    <p class="text-muted-foreground">
        This is a modal dialog with Alpine.js state management.
    </p>
 
    <x-slot:footer>
        <div class="flex items-center justify-end gap-2">
            <x-ui.button
                variant="ghost"
                x-on:click="$dispatch('close-modal-example')"
            >
                Cancel
            </x-ui.button>
            <x-ui.button
                variant="primary"
                x-on:click="$dispatch('close-modal-example')"
            >
                Confirm
            </x-ui.button>
        </div>
    </x-slot:footer>
</x-ui.modal>