Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Beach Tide Finder Map Block for Radix UI

A drawn coast with five beaches whose sand bands and wave pills change as a time slider moves from 06:00 to 20:00 along a tide curve, naming the best beach for the hour.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Pick a beach for the hour you can get there, with this tide-aware beach map for React with Radix UI. Shorewick, a surf and beach guide, draws a coast with five beaches, each a band of sand along the shore and a pill that reads the wave height. A Slider moves the time of day from 06:00 to 20:00 in half hours; the tide curve under the map has a cursor on it, and as the tide rises each beach loses sand at its own rate while the swell reaches each one in its own share. The beach with the most sand for the least surf is named in a polite status line and marked "Best now" in the list at the side, where every beach gives its sand width, wave height and amenities in words. The pins are a pointer shortcut and the list is the way in for the keyboard. It's built from Slider and Guides, with a CSS entrance only. For surf schools, coastal tourism, lifeguard planning and any guide where the tide decides.

FAQ

Where do the sand widths and wave heights come from?

TIDE and SWELL are typed series with one value for each hour from 06:00 to 20:00, read straight between hours for the half-hour steps. Each beach has base (metres of sand at low water), drop (metres lost for each metre of tide) and exposure (its share of the swell), so sandAt and waveAt are two short functions of the hour. The best beach is the one with the highest sand minus 14 times the wave height, a weight you can change in SURF_COST.

How do I use my own coast and beaches?

Edit COAST, the points of the shore from west to east, and the beachOf calls: a beach runs between two neighbouring coast points, so its sand band follows the same curve and its pill sits just offshore. Replace the two series with a tide table and a forecast for your coast, keeping the hourly order.

Are the widths and heights real?

No. The coast is a drawing, the sand is drawn at 0.45 drawing units for each metre, and the figures are sample data, which the caption says. Nothing is read from a tide gauge or a buoy.

Can I use it without a mouse?

Yes. The slider takes the arrow keys and speaks the time. The list is the way in: each beach is a button that marks it, and the pins and sand bands on the map are decoration hidden from assistive technology. The tide curve has its text in the readout and the caption, and a polite message gives the new best beach once the slider settles.

What stays local in the demo, and how do I wire it up?

Everything. Nothing is booked, saved or sent. In your app, feed the two series from your tide and surf forecast, and let a beach row open its page or a booking flow.

How does it look on a phone?

The map comes first at a fixed height with the beach list stacked under it, and the slider and the tide curve sit full width below that. Pills and rows have the same content at every width, and the list never changes height as the hour moves.

All 100 map blocks