Design Pack Atlas
한국어
S shadcn · 09

Hub directory

허브 사이트 목록

Groups sites by baby stage. Each stage has a small number and a large name; sites appear as cards, a table or a vertical line.

RuleEach stage has an anchor, so the stage links in the hero jump straight to it.

Also known as: HubDirectory
···
usage (Astro)
---
// src/pages/index.astro
import { HubDirectory } from '../components/registry';
---
<HubDirectory stages={stageGroups} empty="첫 사이트를 준비하고 있어요. 곧 이곳에서 주제별 사이트를 고를 수 있어요." />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "HubDirectory": "stages" }
}
props (TypeScript)
export interface HubDirectoryProps {
  stages: HubStage[];
  /** 사이트가 하나도 없을 때 문장 */
  empty: string;
  variant?: VariantOf<'HubDirectory'>;
}

See all four packs side by side →

···

KRDS

09Hub directory허브 사이트 목록

Lists sites in baby-stage order (before birth, first 100 days, and so on). Each stage has a number: blue text in the list and table, a boxed number in the vertical steps.

···

Primer

09Hub directory허브 사이트 목록

Each baby stage gets a heading with its sites as box rows beneath. There are also table and vertical-steps versions.

···

Carbon

09Hub directory허브 사이트 목록

Lists the sites in baby-stage order (before birth, first 100 days, …) as numbered rows, a grey-headed table, or a horizontal step line.

stages puts the stage (number, name, description) on the left and outlined site cards in two columns on the right, with thin lines between stages. table is a single four-column table: stage, site, what it covers and post count, with sites in the same stage following each other. timeline draws a gray vertical line with a small dot per stage and lists site names and descriptions under it without boxes.

Pick table to let readers scan many sites at once, stages to separate each stage clearly, and timeline to stress reading order.

The stage links in the home hero jump straight to each stage block.

Use it when — Variants 3

  1. stagesStages When each stage has two or more sites — stage | site boxes.Used by 4: babyfood, birthprep, milestone, newborn
  2. tableTable When at-a-glance comparison matters most — stage | site | what’s inside | posts.Used by 3: babyplay, babysick, toddlerfood
  3. timelineTimeline When the order of stages (pregnancy → newborn → first year) is the key information.Used by 4: babysleep, feeding, vaccination, 허브
Open as page ↗

Suggest an entry

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