Tabs Element

The Tabs element organizes related content into multiple panes, allowing users to switch between datasets or sections while maintaining the same spatial context.

Live Preview

Tabs Preview

Specifications

Tabs consist of two core elements that work in sync:

  • Tabs Triggers: Define the Trigger Buttons that users click to switch views.
  • Tabs Content: A container for the Content Panes that match the order of the triggers.
  • Active Styles: Customize the look of the currently active trigger with specific Background, Text, or Outline colors.
  • Linkage: The Tabs Content ID connects the triggers to the correct content container.
  • Initial Selection: Use Default Index to choose which tab is visible upon page load.
  • Styling: Apply various Tailwind Classes to style triggers as underlined tabs, pill buttons, or segmented controls.

AI Guidance

How to prompt for Tabs:

  • Add a tab section for Pricing with Monthly and Yearly switches.
  • Create a set of tabbed content for features (Design, Code, Ship).
  • Insert underlined tab triggers with a blue active text color.