Layout

TwTabs

TwTabs is a Blazor tabs component, built from TwTabContainer and TwTab. Set Label, Color, Dense and Disabled, and colour the whole container or single tabs.

Last updated 24 September 2026

Basic Tabs

Use TwTabContainer and TwTab to split content into switchable panels.

This is the content of Tab 1.

Razor

<TwTabContainer>
    <TwTab Label="Tab 1">
        <p>This is the content of Tab 1.</p>
    </TwTab>
    <TwTab Label="Tab 2">
        <p>This is the content of Tab 2.</p>
    </TwTab>
</TwTabContainer>

Container Tab Colors

Set TabColor on TwTabContainer to colour every tab within it.

Setting the TabColor property on the TwTabContainer will set the colour for all tabs within that container.

Razor

<TwTabContainer TabColor="Color.Accent">
    <TwTab Label="Tab 1">
        <p>Setting the <code>TabColor</code> property on the <code>TwTabContainer</code> will set the colour for all tabs within that container.</p>
    </TwTab>
    <TwTab Label="Tab 2">
        <p>This is the content of Tab 2.</p>
    </TwTab>
    <TwTab Label="Tab 3">
        <p>This is the content of Tab 2.</p>
    </TwTab>
</TwTabContainer>

Single Tab Colors

Set Color on an individual TwTab to colour just that tab.

Setting the Color property on an individual basis will set the colour for each tab.

Razor

<TwTabContainer>
    <TwTab Label="Tab 1" Color="Color.Danger">
        <p>Setting the <code>Color</code> property on an individual basis will set the colour for each tab.</p>
    </TwTab>
    <TwTab Label="Tab 2" Color="Color.Success">
        <p>This is the content of Tab 2.</p>
    </TwTab>
    <TwTab Label="Tab 3" Color="Color.Primary">
        <p>This is the content of Tab 3.</p>
    </TwTab>
</TwTabContainer>

Dense Tabs

Set Dense on TwTabContainer to render more compact tabs.

This is the content of Tab 1.

Razor

<TwTabContainer Dense>
    <TwTab Label="Tab 1">
        <p>This is the content of Tab 1.</p>
    </TwTab>
    <TwTab Label="Tab 2">
        <p>This is the content of Tab 2.</p>
    </TwTab>
</TwTabContainer>

Disabled Tabs

Set Disabled on a TwTab to prevent it from being selected.

This is the content of Tab 1.

Razor

<TwTabContainer Dense>
    <TwTab Label="Tab 1">
        <p>This is the content of Tab 1.</p>
    </TwTab>
    <TwTab Label="Disabled" Disabled>
        <p>This is the content of Tab 2.</p>
    </TwTab>
</TwTabContainer>

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwTabTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`TabBase`	string
`TabPadding`	string
`TabDensePadding`	string
`ActiveIndicator`	string
`InactiveIndicator`	string
`DisabledTab`	string
`TabListContainer`	string
`PanelContainer`	string
`Background`	string

Full reference: TwTabTheme on the API docs.