Tabs

A full-featured Tabs component using DefaultValue to set the initially active tab. Each TabsTrigger and TabsContent pair is matched by their Value parameter, and the content area renders a Card with a form layout for a polished settings panel appearance.

A lightweight tabs layout without Card wrappers, where each TabsContent panel renders plain text content. This pattern is ideal for simple section switching in dashboards and overview pages where heavy card containers are unnecessary.

Add LucideIcon components inside each TabsTrigger to display icons alongside the tab labels. Apply a grid class with grid-cols-3 on the TabsList to distribute triggers evenly across the full width, creating a visually balanced tab bar.

Set Disabled="true" on a TabsTrigger to prevent it from being selected. The disabled trigger appears dimmed with reduced opacity and does not respond to clicks, keyboard focus, or arrow key navigation, keeping the tab list accessible for remaining active triggers.

Use @bind-Value to create a controlled Tabs component where the parent manages the active tab state. This enables programmatic tab switching, external navigation buttons, or integration with URL routing to synchronize the active tab with application state.

A real-world dashboard pattern using Tabs to switch between content views within a Card. The TabsList sits inside the CardHeader alongside a title, creating a compact tabbed interface suitable for data-heavy dashboards where each tab presents a different metric view.

Enable Addable, Closable, Renamable and Reorderable on the list. Each action raises a callback; update your collection to apply it. Keep stable values and @key entries when rendering tabs in a loop. This example prevents closing the last tab and refuses duplicate names. Double-click or press F2 to rename, Delete to close, and Ctrl with an arrow key to move. The add button also remains available in the responsive mobile layout.