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•Candlestick chart
Components•Candlestick chart

Candlestick chart

Daily candles with volume, a crosshair that snaps to each candle, and zoom that eases into place. Pinch or ctrl-scroll to zoom, drag to pan, and use the arrow keys to step through candles. The last close stays labelled in the price gutter, and the y range never clips a wick.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/candlestick-chart

How to use

import { CandlestickChart } from "@/components/bjork-ui/charts/candlestick-chart";export function Demo({ candles }: { candles: { t: number; o: number; h: number; l: number; c: number; v?: number }[] }) {  return <CandlestickChart data={candles} formatPrice={(v) => v.toFixed(2)} />;}
PreviousChromatic textNextForecast fan
O H L C Vol
ACME daily
DateOpenHighLowCloseVolume
Thu, Jan 2, 2025142.00142.69137.44140.171.5M
Fri, Jan 3, 2025140.17140.63138.12139.131.1M
Sat, Jan 4, 2025139.13141.90138.24140.811.7M
Sun, Jan 5, 2025140.81141.08140.73140.91972K
Mon, Jan 6, 2025140.91141.38138.42138.741.3M
Tue, Jan 7, 2025138.74138.91137.47137.60893.7K
Wed, Jan 8, 2025137.60137.80135.01135.90858.8K
Thu, Jan 9, 2025135.90136.68135.15135.54949.4K
Fri, Jan 10, 2025135.54137.17132.05132.521.3M
Sat, Jan 11, 2025132.52134.04131.39131.601.3M
Sun, Jan 12, 2025131.60132.74129.20130.141.8M
Mon, Jan 13, 2025130.14131.44127.51128.202M
Tue, Jan 14, 2025128.20128.38125.13125.501.7M
Wed, Jan 15, 2025125.50126.60123.28123.731.2M
Thu, Jan 16, 2025123.73125.98122.80125.251.3M
Fri, Jan 17, 2025125.25130.22123.28124.091.8M
Sat, Jan 18, 2025124.09124.72123.59124.20901.5K
Sun, Jan 19, 2025124.20125.43119.37121.971.1M
Mon, Jan 20, 2025121.97122.77120.73120.801.3M
Tue, Jan 21, 2025120.80121.79117.29118.361.7M
Wed, Jan 22, 2025118.36118.40115.94116.44877.3K
Thu, Jan 23, 2025116.44118.04114.44114.611.4M
Fri, Jan 24, 2025114.61115.59113.17115.09820.3K
Sat, Jan 25, 2025115.09115.59114.21114.351.1M
Sun, Jan 26, 2025114.35114.78112.11113.591.3M
Mon, Jan 27, 2025113.59117.68113.46117.321.8M
Tue, Jan 28, 2025117.32121.25115.95120.29932.7K
Wed, Jan 29, 2025120.29124.49120.22123.031.4M
Thu, Jan 30, 2025123.03123.23120.03121.14943K
Fri, Jan 31, 2025121.14121.83117.38117.911.3M
Sat, Feb 1, 2025117.91119.77116.81117.39986.6K
Sun, Feb 2, 2025117.39121.94117.10121.492.1M
Mon, Feb 3, 2025121.49122.56120.22121.001.4M
Tue, Feb 4, 2025121.00123.63118.39121.272.1M
Wed, Feb 5, 2025121.27121.30118.59119.891.6M
Thu, Feb 6, 2025119.89120.41117.98119.401.7M
Fri, Feb 7, 2025119.40121.16118.74119.291M
Sat, Feb 8, 2025119.29126.49118.77123.812M
Sun, Feb 9, 2025123.81128.64123.56126.701.7M
Mon, Feb 10, 2025126.70132.25126.20131.591.1M
Tue, Feb 11, 2025131.59136.16130.74134.001.5M
Wed, Feb 12, 2025134.00135.65128.84129.461.2M
Thu, Feb 13, 2025129.46134.45128.70134.351.9M
Fri, Feb 14, 2025134.35135.33132.18133.291.3M
Sat, Feb 15, 2025133.29135.39129.29131.131.1M
Sun, Feb 16, 2025131.13137.08128.69135.881.9M
Mon, Feb 17, 2025135.88139.44134.16137.231.3M
Tue, Feb 18, 2025137.23138.15135.77137.061.1M
Wed, Feb 19, 2025137.06141.30136.20139.021.2M
Thu, Feb 20, 2025139.02141.76138.80141.36837.1K
Fri, Feb 21, 2025141.36143.15138.15138.361.1M
Sat, Feb 22, 2025138.36138.77135.97137.851.1M
Sun, Feb 23, 2025137.85140.70136.53138.101.5M
Mon, Feb 24, 2025138.10139.42137.29138.991.1M
Tue, Feb 25, 2025138.99141.03137.51140.571.4M
Wed, Feb 26, 2025140.57141.83137.69139.04934.9K
Thu, Feb 27, 2025139.04140.70137.91138.721.7M
Fri, Feb 28, 2025138.72138.93135.98136.99992.8K
Sat, Mar 1, 2025136.99138.91131.56131.79942.4K
Sun, Mar 2, 2025131.79140.02131.34135.252.1M
Mon, Mar 3, 2025135.25138.90134.58135.301.6M
Tue, Mar 4, 2025135.30135.47130.07133.701.9M
Wed, Mar 5, 2025133.70136.68133.21135.071.7M
Thu, Mar 6, 2025135.07135.83130.37131.691.6M
Fri, Mar 7, 2025131.69133.82124.91129.341.2M
Sat, Mar 8, 2025129.34132.82128.94130.491.2M
Sun, Mar 9, 2025130.49135.46129.01133.721.7M
Mon, Mar 10, 2025133.72134.96129.73131.272M
Tue, Mar 11, 2025131.27132.63128.09129.172.1M
Wed, Mar 12, 2025129.17129.87124.12127.231.2M
Thu, Mar 13, 2025127.23132.06126.47131.731.1M
Fri, Mar 14, 2025131.73136.89128.26136.051.3M
Sat, Mar 15, 2025136.05139.20128.60131.441.7M
Sun, Mar 16, 2025131.44133.56131.12132.052.6M
Mon, Mar 17, 2025132.05132.67128.90129.581.2M
Tue, Mar 18, 2025129.58138.55128.76136.671.7M
Wed, Mar 19, 2025136.67138.36129.50133.682.6M
Thu, Mar 20, 2025133.68133.73129.29130.581.5M
Fri, Mar 21, 2025130.58132.52123.77124.061.2M
Sat, Mar 22, 2025124.06130.30124.02127.711.6M
Sun, Mar 23, 2025127.71132.49123.02131.052M
Mon, Mar 24, 2025131.05132.92129.18131.122.2M
Tue, Mar 25, 2025131.12132.82124.67126.351.9M
Wed, Mar 26, 2025126.35127.65124.13126.061.3M
Thu, Mar 27, 2025126.06129.77123.99125.372.7M
Fri, Mar 28, 2025125.37130.84124.38129.221.2M
Sat, Mar 29, 2025129.22131.23118.16122.121.6M
Sun, Mar 30, 2025122.12124.64119.55119.891.5M
Mon, Mar 31, 2025119.89130.25119.34127.311.2M
Tue, Apr 1, 2025127.31131.93127.24130.992.6M
Wed, Apr 2, 2025130.99131.33126.23127.741.9M
Thu, Apr 3, 2025127.74131.42122.34124.931.6M
Fri, Apr 4, 2025124.93125.91117.58118.612.6M
Sat, Apr 5, 2025118.61122.63116.53118.591.9M
Sun, Apr 6, 2025118.59120.01117.37119.741.3M
Mon, Apr 7, 2025119.74124.46118.08123.672.2M
Tue, Apr 8, 2025123.67127.20123.31124.701.5M
Wed, Apr 9, 2025124.70128.88120.24127.471.3M
Thu, Apr 10, 2025127.47132.26126.41132.052.2M
Fri, Apr 11, 2025132.05132.42129.79130.202M
Sat, Apr 12, 2025130.20135.37127.38132.401.6M
Sun, Apr 13, 2025132.40133.63131.62132.951.8M
Mon, Apr 14, 2025132.95133.86129.25129.681.3M
Tue, Apr 15, 2025129.68132.60128.04131.501.2M
Wed, Apr 16, 2025131.50132.43129.02129.211.6M
Thu, Apr 17, 2025129.21130.29126.11129.251.4M
Fri, Apr 18, 2025129.25129.70123.10125.891.4M
Sat, Apr 19, 2025125.89128.63120.06123.821.2M
Sun, Apr 20, 2025123.82125.24121.96122.742.3M
Mon, Apr 21, 2025122.74125.20119.90121.482.1M
Tue, Apr 22, 2025121.48122.86117.32117.881.4M
Wed, Apr 23, 2025117.88119.32116.15118.451.3M
Thu, Apr 24, 2025118.45124.00117.80122.681.3M
Fri, Apr 25, 2025122.68128.44121.63126.041.7M
Sat, Apr 26, 2025126.04131.49122.12130.73990.3K
Sun, Apr 27, 2025130.73131.08128.29128.632.2M
Mon, Apr 28, 2025128.63129.41126.53128.651.9M
Tue, Apr 29, 2025128.65129.17125.94126.712M
Wed, Apr 30, 2025126.71126.75123.04124.751.1M
Thu, May 1, 2025124.75125.92122.99123.74963.8K
Fri, May 2, 2025123.74133.50122.86131.981.5M
Sat, May 3, 2025131.98134.15128.86133.001.8M
Sun, May 4, 2025133.00135.06131.49132.661.3M
Mon, May 5, 2025132.66133.51129.18131.081.2M
Tue, May 6, 2025131.08131.26129.29130.821.8M
Wed, May 7, 2025130.82131.14128.19130.541.5M
Thu, May 8, 2025130.54132.82129.14130.452.2M
Fri, May 9, 2025130.45132.87128.30132.311M
Sat, May 10, 2025132.31138.30131.99138.271.3M
Sun, May 11, 2025138.27139.11135.92135.951.7M
Mon, May 12, 2025135.95136.65132.96135.592M
Tue, May 13, 2025135.59137.14131.32131.501.2M
Wed, May 14, 2025131.50135.85130.83135.081.5M
Thu, May 15, 2025135.08138.01133.89137.391.3M
Fri, May 16, 2025137.39137.79133.41134.321.9M
Sat, May 17, 2025134.32136.29133.41134.911.5M
Sun, May 18, 2025134.91138.62134.46136.261.2M
Mon, May 19, 2025136.26137.31135.75136.891.8M
Tue, May 20, 2025136.89141.45135.96140.68902.2K
Wed, May 21, 2025140.68141.56135.00137.90958.7K
Thu, May 22, 2025137.90139.42136.31136.621.8M
Fri, May 23, 2025136.62136.88133.83135.061M
Sat, May 24, 2025135.06135.53129.58130.721.6M
Sun, May 25, 2025130.72132.43125.70127.191.2M
Mon, May 26, 2025127.19129.91121.98124.881.6M
Tue, May 27, 2025124.88126.74123.44126.19920.5K
Wed, May 28, 2025126.19128.26125.79127.46854.8K
Thu, May 29, 2025127.46133.59126.96130.921.5M
Fri, May 30, 2025130.92133.00130.83131.801.8M
Sat, May 31, 2025131.80131.99128.67128.96892.8K
Sun, Jun 1, 2025128.96132.81128.63132.061.3M
Mon, Jun 2, 2025132.06137.08130.80136.531.6M
Tue, Jun 3, 2025136.53138.30135.87138.131.8M
Wed, Jun 4, 2025138.13138.31133.73133.781.6M
Thu, Jun 5, 2025133.78135.55128.99131.621M
Fri, Jun 6, 2025131.62132.63131.30132.511.6M
Sat, Jun 7, 2025132.51133.65132.09133.571.3M
Sun, Jun 8, 2025133.57134.54132.77134.46937.6K
Mon, Jun 9, 2025134.46137.30132.72136.26937.9K
Tue, Jun 10, 2025136.26139.31130.12131.901.7M
Options
Palette