Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Full Width Tabs
Full width tabs with grid layout and grid-cols-3 for equal width triggers spanning entire container built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Tabs that crowd left side look unbalanced—spread them out evenly. This React tabs component uses shadcn/ui Tabs with grid w-full and grid-cols-3 on TabsList for equal-width distribution. Built with grid layout that stretches triggers across container width, full-width tabs create balanced symmetry—perfect for filtering views, status toggles, segmented controls, dashboard sections, or any interface with few equal-importance options where symmetric layout looks more polished than default inline clustering.
All Tasks
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Vertical Tabs
Sidebar-style vertical layout
Scrollable Tabs
Horizontal scrolling for many tabs
Standard Tabs
Default inline horizontal tabs
Button Group
Alternative segmented control
Toggle Group
Exclusive selection controls
Card
Content container
Questions you might have
React Vertical Tabs
Vertical tabs layout with flex-col TabsList positioned on left side for sidebar-style navigation through settings sections built with shadcn/ui
React Scrollable Tabs
Scrollable tabs with ScrollArea wrapping TabsList for horizontal scrolling through many tab options with whitespace-nowrap built with shadcn/ui