Tabs

Name: Veldora
Author: Shahriyar Fahim

Interactive tabbed navigation with animated active indicators and content panels.

<x-tabs>

Default Style

Standard live preview and template usage for <x-tabs>.

General Application Settings

Configure your app name, environment variables, and timezone settings.

Security & API Keys

Manage two-factor authentication and rotate production API tokens.

Billing & Subscription

View current plan, download invoices, and manage payment methods.

<x-tabs id="app-settings" :tabs="['general' => 'General', 'security' => 'Security', 'billing' => 'Billing']" active="general">
    <div class="vui-tab-pane vui-tab-pane-active" id="tab-pane-app-settings-general">
        <h4>General Settings</h4>
        <p>Manage application settings and preferences.</p>
    </div>
    <div class="vui-tab-pane" id="tab-pane-app-settings-security">
        <h4>Security</h4>
        <p>Update credentials and API tokens.</p>
    </div>
    <div class="vui-tab-pane" id="tab-pane-app-settings-billing">
        <h4>Billing</h4>
        <p>Review invoices and payment methods.</p>
    </div>
</x-tabs>

← Previous Tooltip Next → Navbar