TagsList Demo
This page demonstrates the TagsList component, which renders a collection of tags with customizable layouts and sorting.
Basic Usage
Section titled “Basic Usage”Display all tags in the system:
import { TagsList } from 'starlight-tags/components';
<TagsList limit={8} />Layouts
Section titled “Layouts”Inline (Default)
Section titled “Inline (Default)”Tags flow horizontally and wrap:
<TagsList layout="inline" />Tags in a responsive grid:
<TagsList layout="grid" />Tags stacked vertically:
<TagsList layout="list" />With Title
Section titled “With Title”Add a heading above the tags:
Related Topics
<TagsList title="Related Topics" />Style Variants
Section titled “Style Variants”Solid (Default)
Section titled “Solid (Default)”Outline
Section titled “Outline”With Page Counts
Section titled “With Page Counts”Show how many pages use each tag:
<TagsList showCount />Specific Tags
Section titled “Specific Tags”Display only specific tags by ID:
<TagsList tagIds={['configuration', 'guide', 'plugins', 'advanced']} />Grouped Examples
Section titled “Grouped Examples”Content Types
Section titled “Content Types”Content Types
Audience
Section titled “Audience”Audience
Integrations
Section titled “Integrations”Integrations
Sorting
Section titled “Sorting”By Name (Default)
Section titled “By Name (Default)”Sort tags alphabetically:
<TagsList sortBy="name" />By Count
Section titled “By Count”Sort by number of pages using each tag (highest first):
<TagsList sortBy="count" showCount />Combined Options
Section titled “Combined Options”Grid layout with title, counts, and outline variant:
Popular Topics
<TagsList title="Popular Topics" layout="grid" showCount variant="outline" limit={6}/>See the TagsList documentation for full API reference.