Tabs UI Design

The live example above is plain HTML with Tailwind utility classes, so you can paste it into any Tailwind project. It uses type sizes text-sm (14px) and spacing gap-1 (4px), p-1 (4px), px-3 (12px), py-2 (8px), mt-3 (12px), p-4 (16px), constrained by max-w-md. Everything sits on a 4px grid, which keeps rhythm consistent when you adapt it.

Colors use Tailwind's neutral stone scale so the pattern stays brand-agnostic. Swap stone-900 for your primary color on the main action, keep body text dark and check contrast after any change.

An account owner opens settings to update a card. The page shows four tabs at the top: Profile, Billing, Team and Security, with Profile selected by default. He clicks Billing, and the panel below changes immediately without a page reload, while the URL updates so he could share or bookmark the Billing view.

Using only the keyboard, he presses Tab to reach the tab row and then the arrow keys to move between tabs, the same way he would in a desktop application. On his phone, the tabs become a horizontally scrollable row with the selected tab clearly marked, and a subtle fade at the edge hints that Security is just off screen.

Behind the scenes, only the selected tab is in the keyboard tab order, so pressing Tab again moves him into the Billing form rather than through every tab label. When he leaves with unsaved changes in the card form and clicks Team, the product asks whether to save first, because switching tabs should never silently discard work.

Product pages use tabs for Description, Specifications, Reviews and Shipping.

Settings pages use tabs or vertical tabs for Profile, Account, Billing, Team and Security.

Dashboards use tabs or segmented controls to switch time ranges or views of the same data.

Tab labels are usually 14 to 16px with 16 to 24px horizontal padding. The active indicator should be clearly visible, such as a 2px underline or a filled segment, and it can animate smoothly between tabs. Keep the tab row attached to its panel with consistent spacing, and avoid icons unless they add real meaning.

On mobile, tabs should scroll horizontally if they do not fit, with a visual hint that more tabs exist. For three or fewer options, a full-width segmented control works well. For many sections, consider a select menu instead.

Follow the WAI-ARIA tabs pattern: a tablist containing tabs, each controlling a tabpanel. Support arrow keys to move between tabs and Home and End to jump to the first and last. Only the active tab should be in the tab order.

In a design system, tabs usually ship as a tablist, tab and tabpanel trio with variants for underline, segmented and vertical styles. Define tokens for label size, padding and the active indicator, and include keyboard behaviour in the component so every product team gets accessible tabs by default.

Track which tabs are visited. If most users never open a tab, its content may not be needed or may belong elsewhere. If nearly everyone switches to the same tab, consider making it the default.

Before shipping, run a short usability test with five or so people from your audience. Give them tasks rather than instructions and watch where they hesitate:

Use short, parallel nouns: Overview, Activity, Settings. Keep labels consistent in grammar and length. Counts can be added in parentheses, such as Reviews (128), when they help users decide.

If you use an AI UI generator such as Inspo AI, these prompts are a good starting point for exploring variations of this pattern:

Tabs are related to stepper UI for sequential flows and to accordions in the FAQ section. App-level navigation should use a sidebar instead.