Wiki Components Showcase

This page is a living sandbox for Wiki components.
Add new component examples here whenever new functionality is introduced.

---

Recipe Embed

Minimal usage:

<Recipe id="tfg:chemical_bath/ad_astra_blue_flag" />

Live preview:

Open in Recipe Book

---

Mermaid Diagram

Learn more about Mermaid at https://mermaid.ai/open-source/intro/.

---

Custom Components

gradient-text

The GradientText component allows for customization with props.

<GradientText> 
    Default Gradient
</GradientText>

Custom Colors (Green to Blue)

<GradientText from="#00ff00" to="#0000ff"> 
    Custom Colors (Green to Blue)
</GradientText>

Custom Direction (Red to Yellow)

<GradientText dir="to bottom" from="red" to="yellow"> 
    Custom Direction (Red to Yellow)
</GradientText>

Custom Type (Radial)

<GradientText image="radial-gradient(circle, #fa18cf, #ff7967)"> 
    Custom Type (Radial)
</GradientText>

---

modern-header

<ModernHeader>
    modern-header
</ModernHeader>

---

modern-header-fade

<ModernHeader fade>
    modern-header-fade
</ModernHeader>

---