ComponentsPublishing
Tag Grid
Public tag archive links composed from card and button primitives.
Install
npx ghostcn@1.4.0 add tag-grid --skip-existingMissing dependencies install automatically: Card, Button. Existing dependency files are preserved.
Usage
Queries up to 100 public tags and links to their archives. Without results, the block is hidden unless you pass emptyText. Use a custom paginated query for larger directories.
{{> "components/tag-grid" heading="Explore topics"}}Component options
| Parameter | Behavior |
|---|---|
heading | Optional section heading. |
emptyText | Optional message when no content is available; otherwise render nothing. |
cardVariant | Variant forwarded to each card. Values: default, secondary, outline. Default: default. |
Customize this instance
{{> "components/tag-grid" heading="Explore topics" class="my-6" titleClass="text-purple-700 dark:text-purple-300"}}Styling parameters
| Parameter | Target |
|---|---|
class | Component root — .ghcn-tag-grid |
titleClass | .ghcn-tag-grid__title |
gridClass | .ghcn-tag-grid__grid |
cardClass | .ghcn-ui-card |
cardTitleClass | .ghcn-ui-card__title |
descriptionClass | .ghcn-ui-card__description |
buttonClass | .ghcn-ui-button |
Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.
Installed files
partials/components/tag-grid.hbsassets/css/components/tag-grid.css
Was this helpful?