After exploring various solutions to improve the usability of the current components pages for designers, developers, and other users, and reviewing these proposals internally with DST designers and engineers, the final decision is as follows:

We will use Tabs to organize the content on the components pages effectively:

Desktop prototype	Mobile prototype

• Two tabs will be utilized: "Guidelines" and "Code". The "Guidelines" tab will host design-focused content, including existing guidelines and new content migrated from Figma spec sheets. The "Code" tab will contain development-related content, including Vue demos and CSS-only demos.
• This proposal is focused on using tabs to organize the content in the components pages. But the design is iterable, and we could use either Quiet or Framed tabs.
• When scrolling the page, the tabs will be fixed on top under the main navigation.
• When scrolling on mobile, the "On this page" dropdown menu will be displayed over the tabs.
  
• This initial iteration with two tabs is open to future iterations for further organization if needed.
• Potential future tabs could include "Accessibility" for accessibility-related information and "Content" for specific UX writing recommendations for the component.
  
• We will explore if this Tabs navigation and scrolling is possible in VitePress T358798.
• The placement of the Configurable demo is under consideration, with the possibility of including it in either the "Guidelines" tab or the "Code" tab, depending on visibility preferences. A decision will be made in T358854.

Once the feasibility of implementing Tabs in VitePress is confirmed in T357714 and the placement of the configurable demo is decided in T358854, the proposal will be implemented.