Phara UI

Phara UI v2.x

Footer Layout

Ready-to-use footer layouts from minimal single-row to full branded multi-column.

Simple

A single-row footer with copyright text on the left and a handful of links on the right.

Privacy Terms Contact

Blade

<footer class="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 py-6">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4">

            <!-- Copyright -->
            <p class="text-sm text-gray-500 dark:text-gray-400">
                © {{ date('Y') }} App Name. All rights reserved.
            </p>

            <!-- Links -->
            <nav class="flex items-center gap-5">
                <a href="/privacy"
                   class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                    Privacy
                </a>
                <a href="/terms"
                   class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                    Terms
                </a>
                <a href="/contact"
                   class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
                    Contact
                </a>
            </nav>

        </div>
    </div>
</footer>

Multi-Column

Organize links into labelled columns — ideal for larger sites with distinct sections.

Product

Features

Pricing

Changelog

Company

About

Blog

Careers

Support

Docs

Community

Status

Legal

Privacy

Terms

Blade

<footer class="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 py-12">

        <!-- Link Columns -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">

            <!-- Product -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Product</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Features</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Pricing</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Changelog</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Roadmap</a></li>
                </ul>
            </div>

            <!-- Company -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Company</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">About</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Blog</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Careers</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Press</a></li>
                </ul>
            </div>

            <!-- Support -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Support</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Docs</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Community</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Status</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Contact</a></li>
                </ul>
            </div>

            <!-- Legal -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Legal</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Privacy</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Terms</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Cookies</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Licenses</a></li>
                </ul>
            </div>

        </div>

        <!-- Bottom Bar -->
        <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-800">
            <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
                © {{ date('Y') }} App Name. All rights reserved.
            </p>
        </div>

    </div>
</footer>

With Brand

Logo and tagline on the left, link columns on the right, social icons and copyright in the bottom bar.

App Name

Product

Features

Pricing

Changelog

Company

About

Blog

Careers

Legal

Privacy

Terms

Blade

<footer class="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 py-12">

        <div class="grid grid-cols-1 md:grid-cols-5 gap-10">

            <!-- Brand -->
            <div class="md:col-span-2 space-y-4">
                <div class="flex items-center gap-2">
                    <x-ui::icon name="bolt" variant="solid" class="text-primary-500 size-6" />
                    <span class="text-lg font-semibold text-gray-900 dark:text-white">App Name</span>
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400 max-w-xs leading-relaxed">
                    Build beautiful interfaces faster with a fully composable Laravel UI kit.
                </p>
            </div>

            <!-- Product -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Product</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Features</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Pricing</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Changelog</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Roadmap</a></li>
                </ul>
            </div>

            <!-- Company -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Company</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">About</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Blog</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Careers</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Press</a></li>
                </ul>
            </div>

            <!-- Legal -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Legal</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Privacy</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Terms</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Cookies</a></li>
                </ul>
            </div>

        </div>

        <!-- Bottom Bar -->
        <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-800
                    flex flex-col sm:flex-row items-center justify-between gap-4">

            <p class="text-sm text-gray-500 dark:text-gray-400">
                © {{ date('Y') }} App Name. All rights reserved.
            </p>

            <!-- Social Icons -->
            <div class="flex items-center gap-3">
                <a href="#" class="size-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                    <x-ui::icon name="code-bracket" size="sm" />
                </a>
                <a href="#" class="size-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                    <x-ui::icon name="chat-bubble-left-right" size="sm" />
                </a>
                <a href="#" class="size-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                    <x-ui::icon name="users" size="sm" />
                </a>
            </div>

        </div>
    </div>
</footer>

Full Footer

Complete footer with brand, newsletter signup, link columns, social icons, and a bottom copyright bar.

App Name

Product

Features

Pricing

Changelog

Company

About

Blog

Careers

Support

Docs

Community

Status

Legal

Privacy

Terms

Blade

<footer class="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4">

        <!-- Top Section -->
        <div class="py-12 grid grid-cols-1 md:grid-cols-6 gap-10">

            <!-- Brand + Newsletter -->
            <div class="md:col-span-2 space-y-5">
                <div class="flex items-center gap-2">
                    <x-ui::icon name="bolt" variant="solid" class="text-primary-500 size-6" />
                    <span class="text-lg font-semibold text-gray-900 dark:text-white">App Name</span>
                </div>

                <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
                    Build beautiful interfaces faster with a fully composable Laravel UI kit.
                </p>

                <div class="space-y-2">
                    <p class="text-xs font-medium text-gray-700 dark:text-gray-300">Subscribe to our newsletter</p>
                    <div class="flex gap-2">
                        <x-ui::input name="email" type="email" placeholder="you@example.com" class="flex-1 text-sm" />
                        <x-ui::button variant="primary">Subscribe</x-ui::button>
                    </div>
                </div>
            </div>

            <!-- Product -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Product</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Features</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Pricing</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Changelog</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Roadmap</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">API</a></li>
                </ul>
            </div>

            <!-- Company -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Company</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">About</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Blog</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Careers</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Press</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Partners</a></li>
                </ul>
            </div>

            <!-- Support -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Support</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Docs</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Community</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Status</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Contact</a></li>
                </ul>
            </div>

            <!-- Legal -->
            <div>
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">Legal</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Privacy</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Terms</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Cookies</a></li>
                    <li><a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Licenses</a></li>
                </ul>
            </div>

        </div>

        <!-- Bottom Bar -->
        <div class="py-6 border-t border-gray-200 dark:border-gray-800
                    flex flex-col sm:flex-row items-center justify-between gap-4">

            <div class="flex flex-col sm:flex-row items-center gap-2 sm:gap-4">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    © {{ date('Y') }} App Name. All rights reserved.
                </p>
                <span class="hidden sm:block text-gray-300 dark:text-gray-700">·</span>
                <p class="text-sm text-gray-400 dark:text-gray-500 flex items-center gap-1">
                    Built with <x-ui::icon name="heart" variant="solid" size="xs" class="text-red-400" /> by the team
                </p>
            </div>

            <!-- Social Icons -->
            <div class="flex items-center gap-2">
                <a href="#" aria-label="GitHub" class="size-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                    <x-ui::icon name="code-bracket" size="sm" />
                </a>
                <a href="#" aria-label="Twitter" class="size-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                    <x-ui::icon name="chat-bubble-left-right" size="sm" />
                </a>
                <a href="#" aria-label="Discord" class="size-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                    <x-ui::icon name="users" size="sm" />
                </a>
                <a href="#" aria-label="RSS" class="size-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                    <x-ui::icon name="rss" size="sm" />
                </a>
            </div>

        </div>
    </div>
</footer>

grid-cols-6 gives the brand/newsletter column twice the width of each link column (md:col-span-2). Drop it to md:col-span-1 with md:grid-cols-5 if you remove the newsletter.

Link columns are driven by a PHP array — add, remove, or reorder columns by editing the @foreach data without touching markup.

Social icons use the x-ui::icon component. Swap the icon key for any Heroicon name and update href to your social profile URLs.