Tabs Styling

Style every visual detail of the Tabs option type — the tab bar, each tab's states, the content panel, and animations — using per-type templates.

Overview

Read Types Settings first if you haven't created a template before. This page covers every setting available once you're editing a Tabs template, grouped the same way they appear in the editor's left navigation.

Tab Bar Style

The foundational choice — pick a visual preset first, since the rest of the bar's controls are calibrated against it.

Setting	What it controls	Options / Range
Tab Bar Style	The overall visual preset for the tab bar	Plain, Underline (default), Pills, Segmented

Underline-only settings:

Setting	What it controls	Default	Range
Indicator Color	Color of the line under the selected tab	Black	—
Indicator Thickness	Thickness of that line	3px	1–6px

Pills-only settings:

Setting	What it controls	Default	Range
Pill Border Radius	Corner rounding of each pill-shaped tab	6px	0–30px

Segmented-only settings:

Setting	What it controls	Default	Range
Container Padding	Inset between the segmented track and its selected pill	4px	0–12px

Tab States

Idle, hover, and selected colors for each tab, edited via state tabs in the editor:

Setting	What it controls	Default
Text Color	Tab label color for that state	Dark gray (idle/hover/selected)
Background Color	Tab background color for that state	Transparent

When Tab Bar Style is Pills, each state also gets:

Setting	What it controls	Default	Range
Outline Width	Thickness of the pill's outline in that state	0px	0–4px
Outline Color	Color of that outline	Black	—

Container

The outer shell of the whole tabs component.

Setting	What it controls	Default	Range
Border Radius (per corner)	Rounding of each of the 4 outer corners	0px	0–30px
Container Border Width	Thickness of the outer border around the entire component	1px	0–8px
Container Border Color	Color of that border	Light gray	—
Container Shadow	Drop shadow on the whole component	No Shadow	No Shadow, Subtle, Medium, Strong

Tab Bar Layout

Bar Layout:

Setting	What it controls	Default	Options / Range
Tab Alignment	How tabs are positioned within the bar	Left	Left, Center, Right, Stretch
Bar Background	Background color of the tab bar	White	—
Bar Padding	Inner padding of the bar (hidden for Segmented, which uses Container Padding instead)	0px	0–24px
Bar Bottom Border (Underline style only)	Toggles a border under the entire bar	On	—
Bar Border Color (if bottom border on)	Color of that border	Light gray	—
Bar Border Thickness (if bottom border on)	Thickness of that border	1px	1–8px

Alignment and overflow

If your tabs don't all fit in the bar, the layout automatically falls back to left-aligned and shows scroll buttons — regardless of your chosen Tab Alignment. This is intentional, so centered or right-aligned tabs never scroll off-screen. Use the Sandbox preview to test overflow behavior.

Scroll Buttons (shown only when tabs overflow the bar):

Setting	What it controls	Default	Options / Range
Scroll Button Style	Visual treatment of the scroll chevrons	Ghost	Ghost, Floating, Divider
Background	Button background color	Transparent	—
Icon Color	Chevron icon color	Dark gray	—
Icon Size	Chevron icon size	22px	15–30px
Divider Color (Divider style only)	Color of the vertical separator line	Light gray	—
Divider Thickness (Divider style only)	Thickness of that line	1px	1–4px

Tab Item

Setting	What it controls	Default	Range
Tab Padding (per side)	Inner padding of each tab	12px top/bottom, 20px left/right	0–40px
Tab Min Width	Minimum width each tab must occupy	0px (auto)	0–200px
Tab Gap	Space between adjacent tabs	0px	0–32px

Typography

Setting	What it controls	Default	Options / Range
Font Size	Size of tab label text	14px	8–30px
Font Weight (Idle)	Weight of unselected tab labels	500	300, 400, 500, 600, 700
Font Weight (Selected)	Weight of the selected tab's label	600	300, 400, 500, 600, 700
Text Transform	Case transformation of tab labels	None	None, Uppercase, Capitalize, Lowercase
Letter Spacing	Spacing between letters	0px	-2 to 8px
Label Truncation	Truncates long labels with an ellipsis instead of wrapping	Off	—

Content Panel

The body area shown below the active tab.

Setting	What it controls	Default	Range
Content Padding (per side)	Inner padding of the content area	16px all sides	0–40px
Content Background	Background color of the content panel	White	—
Content Text Color	Text color inside the panel	Dark gray	—
Content Font Size	Font size of body text	14px	8–30px
Content Font Weight	Font weight of body text	400	300–700
Content Line Height	Line spacing of body text	1.5	1–2.5
Content Border	Toggles a border on the content panel	Off	—
Content Border Color (if on)	Color of that border	Light gray	—
Content Border Thickness (if on)	Thickness of that border	1px	1–8px

Shadow moved to Container

Content Panel used to have its own shadow setting — it now lives on the whole component under Container → Container Shadow.

Animation

Setting	What it controls	Default	Options
Tab Hover Effect	Micro-interaction when hovering a tab	None	None, Lift, Scale Up
Content Transition	Animation when switching between tab panels	Fade	Fade, Slide Horizontal, Slide Up, None
Transition Duration	Speed of the content transition	300ms	150ms, 300ms, 500ms
Transition Easing	Easing curve of the transition	Ease	Ease, Ease-in-out, Linear, Ease-out

Responsive

Setting	What it controls	Default	Range
Mobile Font Size	Overrides tab label font size on small screens	Uses desktop size	8–30px

Advanced

Setting	What it controls	Default	Range
Focus Outline Color	Keyboard-focus outline color, for accessibility	Blue	—
Focus Outline Width	Thickness of that outline	2px	1–4px
Disabled Opacity	Opacity applied to a disabled tab	50%	0–100%

How to Style Tabs

1. Open the Style Settings modal (see Customization Overview)
2. Click Types → Tabs
3. Create a new template or click an existing one to edit it
4. Use the left navigation to jump between Tab Bar Style, Container, Tab Bar Layout, Tab Item, Typography, Tab States, Content Panel, Animation, Responsive, and Advanced
5. Watch the Live Preview update as you change settings
6. Click Save in the contextual save bar

Related

• Tabs (option type) — how to add and configure a Tabs option
• Types Settings — how templates work and how to assign one to an option
• Accordion Styling
• Swatches Styling
• File Upload Styling