AI Tabs Generator.

Create a tabs component with four triggers using the ARIA tabs pattern: role="tablist" on the container, role="tab" with aria-selected and aria-controls on each trigger, and role="tabpanel" with aria-labelledby on each panel. Use roving tabindex so only the selected tab has tabindex 0 and Tab moves out of the group entirely rather than through it. Left and Right arrows move focus and wrap at both ends, Home and End jump to the first and last tab, and activation is automatic because the panels are static text. Triggers are 40px tall with 15px medium labels, muted grey when inactive and near-black when active. Measure the active trigger and slide a 2px underline using translateX and scaleX over 200ms — never animate left or width.

Create a segmented-control tabs component: one rounded 36px-tall track with a light grey background and 2px inner padding, holding three equal-width triggers. The active trigger is a white pill with a soft shadow that moves between positions with translateX over 180ms, so the label text never reflows mid-transition. Keep the full ARIA tabs roles and roving tabindex — Left and Right arrows move focus with wrapping, Home and End jump to the ends, and activation is automatic. Give every trigger the same explicit min-width so switching from a short label to a long one does not resize the track. Under prefers-reduced-motion, cross-fade the pill background instead of sliding it.

Create a tabs component whose active tab is derived from a ?tab= query parameter rather than local state, so the first server render already paints the correct panel with no post-hydration flash. Read the parameter, validate it against the known tab ids, and fall back to the first tab when the value is unrecognised. On selection, write the new value with a replace-style navigation so the back button is not filled with tab switches, and preserve every other query parameter already on the URL. Keep the ARIA tabs wiring intact: roving tabindex, Left and Right arrows with wrapping, Home and End, and manual activation on Enter or Space.

Create a tabs component that handles overflow by scrolling rather than wrapping or clipping. Under 640px the tablist scrolls horizontally with momentum, the scrollbar is hidden, and a gradient fade appears on either edge only while content remains in that direction. When Left or Right arrow moves the roving tabindex, call scrollIntoView with inline nearest on the newly focused trigger so keyboard focus is never off screen, and do the same for Home and End. Use scroll-snap-align on each trigger so a flick settles on a label boundary instead of mid-word. Keep the full ARIA roles and aria-controls wiring, and recompute the indicator position on scroll and on resize.

Create a tabs component that mounts only the active panel and keeps every inactive panel out of the DOM entirely, so charts, video players and data fetches for unseen tabs never run. Use manual activation — arrow keys move the roving tabindex and only Enter or Space commits the change — because automatic activation would fire a request for every tab a keyboard user passes through. Accept a keepMounted list of tab ids whose panels stay in the DOM hidden with the hidden attribute instead, for panels holding half-filled forms or scroll position. Show a skeleton inside a newly mounted panel while its data resolves, and keep the panel container height stable so the page below does not jump.

Create a vertical tabs component for a settings screen: a 200px left rail of triggers with a single panel to its right. Set aria-orientation="vertical" on the tablist and bind Arrow Up and Arrow Down to move the roving tabindex with wrapping, since Left and Right are wrong on this axis; keep Home and End for the ends. Triggers are left-aligned rows, 36px tall, with a 2px indicator on the left edge that translates vertically over 200ms. Below 768px collapse the rail into a horizontal scrolling tablist above the panel and switch the arrow bindings and aria-orientation to match. Use manual activation, and give the panel tabindex="-1" so a programmatic focus move after selection is possible.