Portal UI

Card

Displays a card with header, content, and footer.

Log in to your account
Welcome back!
Push Notifications
Send notifications to device.
<x-portal::card class="w-[350px] space-y-6">
    <div class="space-y-1">
        <x-portal::heading size="lg">Log in to your account</x-portal::heading>
        <x-portal::heading.sub>Welcome back!</x-portal::heading.sub>
    </div>
    <x-portal::alert>
        <x-tabler-bell class="h-4 w-4" />
        <x-portal::alert.title>Push Notifications</x-portal::alert.title>
        <x-portal::alert.description>
            Send notifications to device.
        </x-portal::alert.description>
    </x-portal::alert>
    <div class="space-y-2">
        <x-portal::button class="w-full">Login</x-portal::button>
        <x-portal::button variant="ghost" class="w-full">Sign up for a new account</x-portal::button>
    </div>
</x-portal::card>

Publishing Component

If you want to customize the components, you can publish them by running the following command :

php artisan vendor:publish --tag=portal-ui:card --force