S shadcn · 07

Topic index

주제 목록

Under a “Browse by topic” title, topics are separated by text and thin lines only, with no cards.

RuleThe featured post is not repeated here, so no post appears twice on the home page. The “finder” hero and the “index” list hold the same links, so they are never picked together.

Also known as: TopicIndexNavigationMenu
···
usage (Astro)
---
// src/pages/index.astro
import { TopicIndex } from '../components/registry';
---
<TopicIndex heading="주제별로 보기" topics={await topics(featured)} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "TopicIndex": "sections" }
}
props (TypeScript)
export interface TopicIndexProps {
  heading: string;
  topics: Topic[];
  variant?: VariantOf<'TopicIndex'>;
}

sections lays out four columns, one per topic, each with a name, description, three posts separated by lines and a “See all” link. index is a two-column list of only the name, post count and a one-line description, the lightest of the three. lead gives each topic a row: the name on the left, the first post as a large title and description in the middle, and the other two posts small on the right, with thin lines between topics.

Use sections or lead to show posts inside each topic on the home page, and index for pure wayfinding. None of the three has box borders, so the white page feels quite empty.

index shows a faint background only when the pointer hovers.

Use it when — Variants 3

  1. sectionsSections When every topic has three or more posts.Used by 4: babyplay, babysleep, birthprep, newborn
  2. indexIndex When there are many topics and posts should be browsed on topic pages — name, blurb and count only.Used by 4: babyfood, feeding, milestone, vaccination
  3. leadLead When each topic has a clear lead post — one big, two small.Used by 3: babysick, toddlerfood, 허브
Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.