PageWithTags Demo
This page demonstrates the PageWithTags component, which wraps content and displays tags at configurable positions.
Bottom Position (Default)
Section titled “Bottom Position (Default)”Tags appear after the content with a separator line and “Tags” heading:
This is sample content wrapped by PageWithTags.
import { PageWithTags } from 'starlight-tags/components';
<PageWithTags position="bottom"> <YourContent /></PageWithTags>Top Position
Section titled “Top Position”Tags appear before the content:
This is sample content wrapped by PageWithTags.
<PageWithTags position="top"> <YourContent /></PageWithTags>Both Positions
Section titled “Both Positions”Tags appear at both top and bottom:
This is sample content wrapped by PageWithTags.
<PageWithTags position="both"> <YourContent /></PageWithTags>Without Title
Section titled “Without Title”Hide the “Tags” heading at the bottom:
This is sample content wrapped by PageWithTags.
<PageWithTags position="bottom" showTitle={false}> <YourContent /></PageWithTags>Custom Tag Selection
Section titled “Custom Tag Selection”Specify which tags to display using tagIds:
This content shows custom-selected tags.
<PageWithTags position="bottom" tagIds={['frameworks', 'getting-started', 'advanced']}> <YourContent /></PageWithTags>See the PageWithTags documentation for full API reference.