shadcn.io is not affiliated with official shadcn/ui
Ratio Switcher Gallery Block for React
Six drawn pictures in cells of their own, with a Ratio control (1:1, 4:3, 16:9, 3:2, 9:16, 21:9) that crops every picture to it while keeping each subject in frame, and a chip on every picture naming the ratio.
Installation
Overview
A ratio switcher for React with Base UI. A start-aligned header with a "Ratio" control at its end sits over six drawn pictures (a heath at dusk, a lamp, a tower, a lake, a watch and a night harbour), each in its own cell with a hairline frame that overshoots its corners. Choose 1:1, 4:3, 16:9, 3:2, 9:16 or 21:9 and every picture crops to it, with a chip on each picture naming the ratio. Each picture says what its crop protects ("Focus: the moon") and the crop holds that corner of the picture, so a tall crop and a wide one both keep the subject. Every cell is a fixed slot with the frame centred in it, so no ratio changes the block's height. The pictures are drawn in the theme's greys. It's built from Guides, Toggle Group and Badge. For image CDNs, media libraries and any product that crops.
FAQ
How does the crop keep the subject in view?
Every subject is drawn once, at 3:2, and the frame shows part of it. Each entry has an align (an SVG alignment such as xMinYMid) that says which part a crop keeps, so a tall crop of the harbour keeps the moon at the start edge and a wide crop of the tower keeps its crown. With photographs, set object-position the same way.
Does the page move when I change the ratio?
No. Each picture sits in a fixed 4:3 slot (a size container), and the frame takes the biggest box of its ratio that fits, so a 9:16 crop is a narrow, tall frame in the same slot and a 21:9 one is a wide, short frame. The block's height is the same for all six ratios.
Which keys work?
How do I use my own photographs?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change. Keep each entry's align pointing at the part you want to protect.
Related
- Pro
Numerals Over Maps Gallery
Hairline gridsSix drawn route maps on shared hairlines, each with its distance laid over the foot in large figures on a solid, masked panel, and a Show control that rolls every figure between this year and all time.
- Pro
Container Query Columns Gallery
Hairline gridsA resizable split, copy and a framed wall of twelve square swatches: drag the divider to change the wall's width and container queries turn two columns into up to five, with a live readout.
- Pro
Balanced Waterfall Gallery
Masonry and mosaicA waterfall of twelve drawn pictures in two, three or four columns on shared hairlines, a switch between shortest-column and round-robin flow, and bars under the wall that read each column's height.
- Pro
Sortable Masonry Gallery
Masonry and mosaicA masonry wall of twelve drawn pictures of mixed ratio in CSS columns, framed with + marks on its corners, with an Order control (Newest or Oldest) that re-sorts them.
- Pro
Hover Card EXIF Gallery
Hairline gridsSix drawn frames in cells of their own, each a link with a hover card of camera, lens, aperture, shutter speed and ISO that opens on hover and on keyboard focus, and prints the same settings in the caption on a touch screen.
- Pro
Full-Width Before After Slider Hero
Interactive demosA showcase hero with centred copy over a wide before and after panel in a hairline frame, with a draggable handle and a band of four results.