Note: All components below are demo versions for documentation purposes.
Quant Strategy Metrics Guide (Demo Components)
Alert
Success Alert
This is a success alert demo.
Warning Alert
This is a warning alert demo.
Callout
Tip Callout
This is a tip callout demo.
Info Callout
This is an info callout demo.
Metric Cards in a CardGrid
Annualized Return
11.2%
CAGR over full period
Volatility
7.5%
Annualized std dev
Sharpe Ratio
1.35
Return per unit of risk
Tags
Default Tag Warning Tag Info Tag Success TagQuote
”To understand the economy, you need to understand how the machine works.”
Table
| Strategy | CAGR | MDD | Sharpe |
|---|---|---|---|
| Trend Following | 13.2% | -18% | 1.21 |
| Mean Reversion | 10.4% | -11% | 1.34 |
| Momentum | 12.1% | -13% | 1.38 |
Tooltip
Hover over meVideo
CodeTabs
PYTHON
def calmar(cagr, mdd):
return cagr / abs(mdd)TYPESCRIPT
function calmar(cagr: number, mdd: number): number {
return cagr / Math.abs(mdd);
}Collapse
Show More
This is the content inside the collapse component.
CopyBox
pip install quantjourneyHighlight
This is a red highlight.Accordion
Accordion Title
This is the content inside the accordion component.
Tabs
Tabs component error:
Usage:
tabs prop is required and must be an array.Usage:
<Tabs tabs={[{ label: 'Tab', content: <div>...</div> }]} />Image
StockChart
How to Add More Components
To add more interactive or styled components to your documentation, create them in src/components/ or src/components/ui/ and import them here. For example, you could add an Alert, MetricCard, or Callout component for richer documentation.