Fear & Greed Gauge
The crypto Fear & Greed index as an SVG dial. Fetches live data from alternative.me, refreshed every 10 minutes.
Loading Fear & Greed Index
Variants
The default variant: a smooth continuous color blend with just the dial, needle, and number.
Loading Fear & Greed Index
Usage
<FearGreedGauge />Skeleton
FearGreedGauge shows this shaped skeleton automatically while its bundled fetcher loads. Import FearGreedGaugeSkeleton directly for a React Suspense fallback or an SSR placeholder.
Installation
pnpm dlx shadcn@latest add @voraui/fear-greed-gauge
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | FearGreedData | - | Your own data ({ value, label, updatedAt }). When set, the bundled fetcher is skipped entirely. |
| variant | "minimal" | "ticks" | "gradient" | "wedges" | "gradient" | "gradient" is a smooth continuous color blend with just the dial, needle, and number; "minimal" shows the same layout with 5 discrete color bands instead; "ticks" swaps the solid arc for 100 individual gradient tick marks; "wedges" shows pie-slice zone sectors with the current zone highlighted. |
| animateOnLoad | boolean | true | Spring the needle in from neutral (12 o'clock) on first render instead of snapping straight to its value. |
| className | string | - | Extra classes for the wrapper. |
- dataFearGreedDatadefault: -
- Your own data ({ value, label, updatedAt }). When set, the bundled fetcher is skipped entirely.
- variant"minimal" | "ticks" | "gradient" | "wedges"default: "gradient"
- "gradient" is a smooth continuous color blend with just the dial, needle, and number; "minimal" shows the same layout with 5 discrete color bands instead; "ticks" swaps the solid arc for 100 individual gradient tick marks; "wedges" shows pie-slice zone sectors with the current zone highlighted.
- animateOnLoadbooleandefault: true
- Spring the needle in from neutral (12 o'clock) on first render instead of snapping straight to its value.
- classNamestringdefault: -
- Extra classes for the wrapper.
Data source
GET https://api.alternative.me/fng/?limit=1. Free, keyless, CORS-enabled. The bundled useFearGreed hook polls it every 10 minutes; pass refreshInterval to change that.