Tabs

Tabs allow showing and hiding content to organize information. Supports boxed, bordered, and lifted variants.

Basic Example

Interactive tabs with content panels



const { default: Tabs } = await import('/components/navigation/tabs.js');

const { signal, tags, $ } = Lightview;
const { div } = tags;

const activeTab = signal(0);
const tabLabels = ['Profile', 'Settings', 'Messages'];

const demo = div({ class: 'flex flex-col gap-4' },
    Tabs({ variant: 'bordered' },
        ...tabLabels.map((label, i) =>
            Tabs.Tab({ 
                active: () => activeTab.value === i,
                onclick: () => { activeTab.value = i; }
            }, label)
        )
    ),
    div({ class: 'p-6 border rounded bg-base-100' },
        () => `Content for: ${tabLabels[activeTab.value]}`
    )
);

$('#demo').insert(demo);

Lifted Tabs

Tabs with lifted style and connected content



const { default: Tabs } = await import('/components/navigation/tabs.js');

const { signal, tags, $ } = Lightview;
const { div, p, h3 } = tags;

const active = signal(1);

const contents = [
    { title: 'Home', text: 'Welcome to your dashboard!' },
    { title: 'Analytics', text: 'View your traffic stats here.' },
    { title: 'Reports', text: 'Download detailed reports.' }
];

const demo = Tabs({ variant: 'lifted' },
    ...contents.map((c, i) =>
        Tabs.Tab({ 
            active: () => active.value === i,
            onclick: () => { active.value = i; }
        }, c.title)
    ),
    Tabs.Content({ class: 'rounded-b-box' },
        () => div({},
            h3({ class: 'font-bold text-lg mb-2' }, contents[active.value].title),
            p({}, contents[active.value].text)
        )
    )
);

$('#demo').insert(demo);

Props (Tabs)

Prop Type Default Description
variant string - 'boxed' | 'bordered' | 'lifted'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'

Sub-components

Component Props Description
Tabs.Tab active, disabled Individual tab button
Tabs.Content - Content panel for lifted tabs

Variants

Bordered

Tab 1 Tab 2 Tab 3

Boxed

Tab 1 Tab 2 Tab 3

Lifted

Tab 1 Tab 2 Tab 3

Sizes

xs xs
lg lg
For more examples and options, see the DaisyUI Tab documentation.