Persistent Tabs Component with shadcn/ui
I'll create a tabs component that keeps all tab content in the DOM at all times, only hiding inactive tabs visually instead of unmounting them.
How It Works
I've created a custom version of the shadcn/ui Tabs component that keeps all tab content in the DOM at all times. Here's what I modified:
- Instead of using conditional rendering to show/hide tabs, I've used CSS to visually hide inactive tabs while keeping them in the DOM 1.
The key changes are in the
TabsContentcomponent:- Added
data-[state=inactive]:invisible data-[state=inactive]:opacity-0 data-[state=inactive]:absoluteto hide inactive tabs - Added
data-[state=active]:visible data-[state=active]:opacity-100 data-[state=active]:relativeto show active tabs - Added a smooth transition with
transition-opacity duration-200
- Added
- The demo component includes counters that maintain their state even when switching between tabs, demonstrating that the component state is preserved.
Benefits
- All tab content remains in the DOM at all times
- State is preserved when switching between tabs
- Smooth transitions between tabs
- Maintains accessibility features from Radix UI
- Works with keyboard navigation and screen readers
You can use this component exactly like the standard shadcn/ui Tabs component, but with the added benefit of persistent DOM elements.
The issue is with the TabsPrimitive.Content component from Radix UI, which unmounts inactive content by default. My previous solution only applied CSS styling but didn't prevent the unmounting behavior.
Let's create a completely custom implementation for the TabsContent component that will keep all content in the DOM:
How This Solution Works
This implementation completely solves the problem by creating a custom tabs system that keeps all content in the DOM:
Custom TabsContent Component: Instead of using Radix UI's
TabsPrimitive.Content(which unmounts inactive content), I've created a customTabsContentcomponent that:- Renders a regular
divwith proper ARIA attributes for accessibility - Uses CSS to show/hide content based on the active tab
- Never unmounts the content, just visually hides it
- Renders a regular
Context-Based State Management:
- Created a
TabsContentContextto share the selected tab value with allTabsContentcomponents - This allows each content panel to know whether it should be visible or hidden
- Created a
Proper Accessibility:
- Maintained all necessary ARIA attributes (
role="tabpanel",aria-labelledby, etc.) - Added
aria-hiddenfor inactive tabs - Set appropriate
tabIndexvalues
- Maintained all necessary ARIA attributes (
CSS for Visual Toggling:
- Used
invisible,opacity-0, andabsolutefor inactive tabs - Used
visible,opacity-100, andrelativefor active tabs - Added smooth transitions between states
- Used
Key Benefits
- State Preservation: All component state (like form inputs, counters, etc.) is preserved when switching tabs
- DOM Persistence: All tab content remains in the DOM at all times
- Accessibility: Maintains proper accessibility with ARIA attributes
- Smooth Transitions: Includes smooth visual transitions between tabs
- API Compatibility: Uses the same API as the standard shadcn/ui Tabs component
You can test this by typing in the textarea in Tab 2, incrementing counters in different tabs, and switching between tabs - all state will be preserved.