Fluxtor

#Introduction

The Card component is a responsive, unstyled container component designed for content encapsulation. It provides a clean foundation for building UI sections with consistent spacing, subtle borders, and seamless dark mode support.

#Installation

Use the fluxtor artisan command to install the card component easily:

php artisan fluxtor:install card

Once installed, you can use the <x-ui.card /> component in any Blade view.

#Real-world Example

#Usage

    <x-ui.card size="xl" class="mx-auto">
        <x-ui.heading class="flex items-center justify-between mb-4" level="h3" size="sm">
            <span>Welcome to Fluxtor.</span>
            <a href="https://fluxtor.dev">
                <x-ui.icon name="arrow-up-right" class="text-gray-800 dark:text-white size-4" />
            </a>
        </x-ui.heading>
        <p>
            Powered by the TALL stack, our components offer speed, elegance,
             and accessibility for modern web development. 
        </p>
    </x-components::ui.card>

#Card with Header and Footer

Structure your content with distinct header and footer sections for better organization and visual hierarchy.

<x-ui.card size="lg">
    <!-- Header -->
    <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center gap-3">
            <x-ui.icon name="inbox" class="size-6 text-blue-500" />
            <div>
                <x-ui.heading level="h3" class="font-semibold text-gray-900 dark:text-white">Messages</x-ui.heading>
                <p class="text-sm text-gray-500 dark:text-gray-400">3 unread messages</p>
            </div>
        </div>
    </div>
    <!-- Content -->
    <div class="py-4">
        <div class="space-y-3">
            <div class="flex items-center gap-3">
                <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-900 dark:text-white">Welcome to Fluxtor</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-900 dark:text-white">Component installed successfully</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <div class="w-2 h-2 bg-orange-500 rounded-full"></div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-900 dark:text-white">Update available</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
        <button class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
            Mark all as read
        </button>
        <button class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium">
            View all
        </button>
    </div>
</x-ui.card>

#Customization

#Size

The size prop controls the max width of the card and helps enforce layout constraints in a flexible way. Default is md.

<x-ui.card size="xs">Extra Small Card</x-ui.card>
<x-ui.card size="sm">Small Card</x-ui.card>
<x-ui.card size="md">Medium Card</x-ui.card>
<x-ui.card size="lg">Large Card</x-ui.card>
<x-ui.card size="xl">Extra Large Card</x-ui.card>

#Component Props