Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Ratio Switcher Gallery Block for Radix UI

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.

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

A ratio switcher for React with Radix 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?

The Ratio group is a single-choice toggle group that always keeps one value on: Tab goes to it, the arrow keys move between the six ratios, and Space or Enter chooses.The pictures are plain content.

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.

Does it work right to left?

Yes. The control and captions follow the reading direction, and the ratios are written in bdi so "16:9" never flips. The pictures themselves never mirror.

How does it fit on a phone?

Two columns by three rows. The "Focus" line is hidden below sm to save room; the title and the ratio chip stay.

All 100 gallery blocks