Design Pack Atlas
한국어
K KRDS · 09

Hub 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.

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

Also known as: HubDirectoryStep indicator
···
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 →

···

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.

···

shadcn/ui

09Hub 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.

stages puts stage names like "01 Before birth" on the left and site boxes (mark, name, description, post count) on the right, with a rule between stages. table is one table — Stage | Site | What it covers | Posts — with a grey header row. timeline links stages with numbered squares and a vertical line, with site rows underneath.

table is densest and fits the most on screen. stages lets each description be read but runs long, and timeline gives the strongest sense of following an order.

timeline is the KRDS step indicator turned vertical.

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.