PrerequisiteChain Demo

This page demonstrates the PrerequisiteChain component, which displays visual dependency chains between topics.

Prerequisites Required

This component only displays data for tags that have prerequisites defined in your tags.yml configuration.

Basic Usage

The js-async tag has prerequisites defined (js-functions):

Prerequisites

Complete these topics before starting this content

1. ⚡Functions
2. 📦Variables
3. 📘JS Basics
4. You are here⏳Async JS

import { PrerequisiteChain } from 'starlight-tags/components';

<PrerequisiteChain tagId="js-async" />

Full Learning Path

The js-objects tag shows a longer chain through arrays, functions, variables, and basics:

Prerequisites

Complete these topics before starting this content

1. 📋Arrays
2. ⚡Functions
3. 📦Variables
4. 📘JS Basics
5. You are here🧱Objects

Without Description

Hide the helper text for a more compact display:

Prerequisites

1. ⚡Functions
2. 📦Variables
3. 📘JS Basics
4. You are here⏳Async JS

<PrerequisiteChain tagId="js-async" showDescription={false} />

Limiting Chain Length

For tags with many prerequisites, you can limit the display:

Prerequisites

Complete these topics before starting this content

1. 📋Arrays
2. ⚡Functions
3. 📦Variables
4. You are here🧱Objects

... and 1 more prerequisites

<PrerequisiteChain tagId="js-objects" maxChainLength={3} />

How Prerequisites Work

Prerequisites are defined in your tags.yml configuration:

tags:
  js-basics:
    label: "JS Basics"
    description: "Introduction to JavaScript fundamentals"

  js-variables:
    label: "Variables"
    prerequisites:
      - js-basics  # Must understand basics first

  js-functions:
    label: "Functions"
    prerequisites:
      - js-variables  # Must understand variables first

The component automatically:

1. Reads the prerequisiteChain computed property from the tag
2. Resolves the full chain recursively (prerequisites of prerequisites)
3. Displays tags in order with arrows between them
4. Highlights the current tag with “You are here”

Use Cases

Audience Progression

Show users how content builds from beginner to advanced:

Prerequisites

Complete these topics before starting this content

1. 🌱Getting Started
2. You are here⚡Advanced

Learning Paths

Guide users through a sequence of topics they should understand:

Prerequisites

Complete these topics before starting this content

1. ⚡Functions
2. 📦Variables
3. 📘JS Basics
4. You are here📋Arrays

Responsive Behavior

On mobile devices (< 768px):

• The chain displays vertically instead of horizontally
• Arrows rotate 90 degrees to point downward
• Resize your browser to see this in action

---

See the PrerequisiteChain documentation for full API reference.