UI3232
47 Accordion48 Alerts49 Avatar50 Badge51 Breadcrumb52 Button53 Button Group54 Calendar55 Card56 Checkbox57 Collapsible58 Combobox59 Data Table60 Date Picker61 Dialog62 Dropdown Menu63 Form64 Input65 Input Mask66 Input OTP67 Pagination68 Popover69 Radio Group70 Select71 Sheet72 Slider73 Sonner74 Switch75 Table76 Tabs77 Textarea78 Tooltip
Blocks1010
202 Marketing hero with product shot203 Marketing feature bento204 Marketing pricing205 Marketing testimonials wall206 Marketing CTA and footer212 Dashboard shell213 Sign in214 Settings page215 Inbox216 AI chat app
Charts2929
01 Animated radial chart99 Live line101 Route trace142 Candlestick chart143 Forecast fan144 State timeline145 Spark table146 Distribution plot147 Violin plot148 Beeswarm149 Slope chart150 Dumbbell chart151 Waterfall chart152 Treemap153 Streamgraph154 Scatter brush155 Correlation matrix156 Sankey flow157 Drawdown chart158 Depth chart159 Calibration plot160 Stacked area chart161 Grouped bar chart162 Donut chart163 Funnel chart164 Cohort retention165 Calendar heatmap166 Bullet chart240 Order book
Interactive66
02 Message dock03 Voice powered orb07 Draggable rope93 Timer113 Elastic frame117 Scene states
AI2424
13 AI voice input103 Agent trace104 Handoff beam105 Lattice orb220 Streaming message221 Reasoning disclosure222 Stream status223 Message branch224 Response feedback225 Prompt composer226 Model selector227 Attachment chips228 Suggested prompts229 Context meter230 Tool call card231 Approval gate232 Diff review233 Artifact panel234 Inline AI edit235 Citation chips236 Retrieval inspector237 Memory viewer238 Response compare239 Cost meter
Galleries66
04 Ruler carousel10 Portfolio gallery32 Hover image gallery106 Torn edge reveal107 Mosaic settle115 Project index
Heroes22
05 Video scroll hero116 Aperture dive
Shaders66
80 Aurora veil88 Kinetic dots90 Silt91 Intaglio92 Phosphor114 Sumi
Tables1420
06 Financial table43 Contacts table44 Leads table45 Resizable table46 Server management89 Periodic table100 Flap ledger120 Sortable table121 Pricing table122 Invoice table123 Leaderboard124 Changelog table125 API reference table126 File tree table127 Timetable128 Shortcuts table129 Spec sheet130 Transactions table131 Spreadsheet grid132 Permissions matrix
Cards2626
11 Video upload card16 Animated card options17 Animated card status list18 Audio upload card19 Bonuses incentives card20 Coach scheduling21 Dashboard card modal22 Event countdown card23 Hover detail card24 News cards25 Onboarding stages26 Prediction market card27 Product reveal card28 Profile hover card29 Project cards102 Solar sky panel182 Plan usage card183 Payment method card184 Integration card185 Metric card186 Shipment card187 Now playing card188 Deployment card189 Team invite card190 Streak card191 Link preview card
Badges11
14 Animated status badge
Controls44
31 Gradient selector95 Adaptive precision slider96 Click wheel97 Velocity ink
Navigation22
94 Radial command ring108 Minimap scrollbar
Utilities33
98 Spring tuner110 Stroke-morph icon119 Glow rules
HUD88
09 HUD frame15 Animated download34 Glitchy 40435 Overlay 236 HUD button37 HUD graph38 HUD status40 Warning graphic
Feedback11
109 Morph loader
Text1212
33 Reveal text111 Scatter rewind112 Plane type133 Glyph morph134 Weight wave135 Decode text136 Magnetic letters137 Slice shift138 Stroke draw type139 Ink bleed text140 Liquid text141 Chromatic text
Components•Forecast fan
Components•Forecast fan

Forecast fan

History meets forecast at a clear now line. The 50, 80 and 95% bands open out of the last real value, the median runs on as a dashed accent line, and the scrub reads every interval at once. Give it a threshold and it marks the first week the outer band reaches it.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/forecast-fan

How to use

import { ForecastFan } from "@/components/bjork-ui/charts/forecast-fan";<ForecastFan  history={history}            // { t, v }[]  forecast={forecast}          // { t, mid, bands: [[p25, p75], [p10, p90], [p025, p975]] }[]  bandLabels={["50%", "80%", "95%"]}  threshold={{ value: 300, label: "$300K target" }}  formatValue={(v) => `$${Math.round(v)}K`}/>
PreviousCandlestick chartNextState timeline
ActualMedian50%80%95%
Now$300K target
Weekly revenue
DateActualMedian forecast50% interval80% interval95% interval
Jul 1$171K
Jul 8$182K
Jul 15$172K
Jul 22$188K
Jul 29$185K
Aug 5$183K
Aug 12$189K
Aug 19$190K
Aug 26$185K
Sep 2$193K
Sep 9$194K
Sep 16$199K
Sep 23$200K
Sep 30$198K
Oct 7$208K
Oct 14$201K
Oct 21$207K
Oct 28$204K
Nov 4$198K
Nov 11$193K
Nov 18$192K
Nov 25$209K
Dec 2$211K
Dec 9$213K
Dec 16$206K
Dec 23$208K
Dec 30$209K
Jan 6$212K
Jan 13$205K
Jan 20$204K
Jan 27$200K
Feb 3$199K
Feb 10$200K
Feb 17$201K
Feb 24$203K
Mar 3$196K
Mar 10$195K
Mar 17$193K
Mar 24$193K
Mar 31$194K
Apr 7$205K
Apr 14$209K
Apr 21$202K
Apr 28$210K
May 5$218K
May 12$214K
May 19$211K
May 26$205K
Jun 2$201K
Jun 9$203K
Jun 16$204K
Jun 23$210K
Jun 30$212K$208K to $216K$204K to $220K$200K to $224K
Jul 7$214K$208K to $220K$203K to $225K$197K to $231K
Jul 14$216K$209K to $223K$202K to $230K$195K to $238K
Jul 21$218K$209K to $227K$202K to $235K$194K to $244K
Jul 28$220K$211K to $230K$202K to $239K$193K to $249K
Aug 4$222K$212K to $234K$202K to $244K$192K to $255K
Aug 11$224K$213K to $237K$203K to $248K$191K to $261K
Aug 18$227K$214K to $240K$203K to $252K$191K to $266K
Aug 25$229K$216K to $244K$204K to $257K$190K to $271K
Sep 1$231K$217K to $247K$204K to $261K$190K to $276K
Sep 8$233K$218K to $250K$204K to $265K$189K to $281K
Sep 15$235K$219K to $253K$205K to $269K$188K to $286K
Sep 22$237K$220K to $256K$205K to $272K$188K to $291K
Sep 29$239K$221K to $258K$205K to $276K$187K to $295K
Oct 6$241K$222K to $261K$205K to $279K$186K to $300K
Oct 13$242K$222K to $263K$205K to $282K$185K to $304K
Oct 20$243K$223K to $265K$204K to $285K$183K to $308K
Oct 27$244K$223K to $267K$203K to $288K$182K to $311K
Nov 3$245K$223K to $269K$203K to $291K$180K to $315K
Nov 10$246K$222K to $271K$202K to $293K$178K to $318K
Nov 17$246K$222K to $272K$200K to $295K$176K to $321K
Nov 24$246K$221K to $273K$199K to $297K$174K to $324K
Dec 1$246K$220K to $274K$197K to $299K$171K to $327K
Dec 8$246K$219K to $275K$195K to $301K$168K to $330K
Dec 15$246K$218K to $275K$193K to $302K$166K to $332K
Dec 22$245K$217K to $276K$191K to $303K$162K to $334K
Options