Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Tabs

<c-lb.tabs /> Markdown

Tabs component for Django: build tabbed interfaces and content switchers. Built with django-cotton, Tailwind CSS, and daisyUI 5. Zero JavaScript by default.

Tabs renders a daisyUI tab bar with radio-button-driven content switching — no JavaScript needed. Each c-lb.tabs.tab is a tab handle, and panels become visible when their associated radio input is checked.

Basic Tabs

Live Content

This is the live tab content with some example text.

Laugh Content

This is the laugh tab content with some example text.

Love Content

This is the love tab content with some example text.

<c-lb.tabs name="basic_tabs" style="lift">
    <c-lb.tabs.content name="basic_tabs" title="Live" checked class="border-base-300 bg-base-100 p-6 lg:min-w-60">
        <h3 class="text-lg font-semibold mb-2">Live Content</h3>
        <p>This is the live tab content with some example text.</p>
    </c-lb.tabs.content>
    <c-lb.tabs.content name="basic_tabs" title="Laugh" class="border-base-300 bg-base-100 p-6 lg:min-w-60">
        <h3 class="text-lg font-semibold mb-2">Laugh Content</h3>
        <p>This is the laugh tab content with some example text.</p>
    </c-lb.tabs.content>
    <c-lb.tabs.content name="basic_tabs" title="Love" class="border-base-300 bg-base-100 p-6 lg:min-w-60">
        <h3 class="text-lg font-semibold mb-2">Love Content</h3>
        <p>This is the love tab content with some example text.</p>
    </c-lb.tabs.content>
</c-lb.tabs>

Border Tabs

Border tab content

Another border tab content

<c-lb.tabs name="border_tabs" style="border">
    <c-lb.tabs.content name="border_tabs" title="Tab 1" checked class="border-base-300 bg-base-100 rounded-lg p-6 lg:min-w-60">
        <p>Border tab content</p>
    </c-lb.tabs.content>
    <c-lb.tabs.content name="border_tabs" title="Tab 2" class="border-base-300 bg-base-100 rounded-lg p-6 lg:min-w-60">
        <p>Another border tab content</p>
    </c-lb.tabs.content>
</c-lb.tabs>

Lift Tabs

Lift tab content

Another lift tab content

<c-lb.tabs name="lift_tabs" style="lift">
    <c-lb.tabs.content name="lift_tabs" title="Tab 1" checked class="border-base-300 bg-base-100 p-6 lg:min-w-60">
        <p>Lift tab content</p>
    </c-lb.tabs.content>
    <c-lb.tabs.content name="lift_tabs" title="Tab 2" class="border-base-300 bg-base-100 p-6 lg:min-w-60">
        <p>Another lift tab content</p>
    </c-lb.tabs.content>
</c-lb.tabs>

Boxed Tabs

Boxed tab content

Another boxed tab content

<c-lb.tabs name="boxed_tabs" style="box">
    <c-lb.tabs.content name="boxed_tabs" title="Tab 1" checked class="mt-2 bg-base-100 rounded-lg p-6 lg:min-w-60">
        <p>Boxed tab content</p>
    </c-lb.tabs.content>
    <c-lb.tabs.content name="boxed_tabs" title="Tab 2" class="mt-2 bg-base-100 rounded-lg p-6 lg:min-w-60">
        <p>Another boxed tab content</p>
    </c-lb.tabs.content>
</c-lb.tabs>

Tab Sizes

Small Tabs

Small tab content

Another small tab content

Large Tabs

Large tab content

Another large tab content

<div class="space-y-6">
  <div>
    <h4 class="text-sm font-medium mb-2">Small Tabs</h4>
    <c-lb.tabs name="small_tabs" style="lift" size="sm">
        <c-lb.tabs.content name="small_tabs" title="Tab 1" checked class="border-base-300 bg-base-100 p-4 lg:min-w-60">
            <p>Small tab content</p>
        </c-lb.tabs.content>
        <c-lb.tabs.content name="small_tabs" title="Tab 2" class="border-base-300 bg-base-100 p-4 lg:min-w-60">
            <p>Another small tab content</p>
        </c-lb.tabs.content>
    </c-lb.tabs>
  </div>

  <div>
    <h4 class="text-sm font-medium mb-2">Large Tabs</h4>
    <c-lb.tabs name="large_tabs" style="lift" size="lg">
        <c-lb.tabs.content name="large_tabs" title="Tab 1" checked class="border-base-300 bg-base-100 p-8 lg:min-w-60">
            <p>Large tab content</p>
        </c-lb.tabs.content>
        <c-lb.tabs.content name="large_tabs" title="Tab 2" class="border-base-300 bg-base-100 p-8 lg:min-w-60">
            <p>Another large tab content</p>
        </c-lb.tabs.content>
    </c-lb.tabs>
  </div>
</div>

Tabs with Icons

Home Content

This is the home tab content with a home icon.

Settings Content

This is the settings tab content with a settings icon.

Profile Content

This is the profile tab content with a user icon.

Messages Content

This is the messages tab content with a filled message icon.

<c-lb.tabs name="icon_tabs" style="lift" class="lg:max-w-[80%] mx-auto">
    <c-lb.tabs.content name="icon_tabs" title="Home" checked icon="rmx.home" class="border-base-300 bg-base-100 p-6 min-w-full">
        <h3 class="text-lg font-semibold mb-2">Home Content</h3>
        <p>This is the home tab content with a home icon.</p>
    </c-lb.tabs.content>
    <c-lb.tabs.content name="icon_tabs" title="Settings" icon="rmx.settings" class="border-base-300 bg-base-100 p-6 min-w-full">
        <h3 class="text-lg font-semibold mb-2">Settings Content</h3>
        <p>This is the settings tab content with a settings icon.</p>
    </c-lb.tabs.content>
    <c-lb.tabs.content name="icon_tabs" title="Profile" icon="rmx.user" class="border-base-300 bg-base-100 p-6 min-w-full">
        <h3 class="text-lg font-semibold mb-2">Profile Content</h3>
        <p>This is the profile tab content with a user icon.</p>
    </c-lb.tabs.content>
    <c-lb.tabs.content name="icon_tabs" title="Messages" icon.fill="rmx.message" class="border-base-300 bg-base-100 p-6 min-w-full">
        <h3 class="text-lg font-semibold mb-2">Messages Content</h3>
        <p>This is the messages tab content with a filled message icon.</p>
    </c-lb.tabs.content>
</c-lb.tabs>

API Reference

c-lb.tabs

Property Type Default Required Description
class string - No Additional CSS classes to apply
style
border lift box
- No Tab style variant
placement
top bottom
top No Tab placement - top or bottom
size
xs sm md lg xl
md No Tab size
name string tabs No Unique name for the tab group (used for radio inputs)
Slot Name Description
default Tab content items using <c-lb.tabs.content> components
content Custom tab content area. Defaults to rendering the default slot

c-lb.tabs.content

Property Type Default Required Description
class string - No Additional CSS classes to apply
name string - Yes Tab name for the radio input (required)
checked boolean False No Whether this tab is initially selected
disabled boolean False No Whether this tab is disabled
title string - No Tab title text (alternative to slot for simple text)
icon string - No Icon name to display
↳ .fill modifier - No Render in filled (solid) style
icon.class string - No Additional CSS classes for the icon
Slot Name Description
default Tab content (main content area)
input Custom tab input/label area. Defaults to <label class='tab' />
Prev Steps
Next Alert