Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Sort Controls Gallery Block for React Aria

Eight drawn bike frames that each print their date, likes and title, with a Sort by select, a reverse toggle and a Grid or List switch, so the order is checkable by eye.

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

Sort controls for React with React Aria, for Spoke & Co, a bike shop. A centred header sits over a band with a "Sort by" Select (Date added, Likes, Title), a "Reverse order" Toggle and a Grid / List Toggle Group, then eight drawn bike frames on shared hairlines. Every frame prints the three things it can be sorted by, a fixed date, a like count and a title, and the key in use is set in heavier type, so you can check the order by eye. Date and Likes start with the biggest first and Title from A, and Reverse flips each. A polite status in the foot band says "Sorted by Likes, most liked first. List view." The list and the grid share one cell, so no choice moves the page. The frames are drawn, never photographed: road, step-through, flat-bar and cargo bikes, each as one line. It's built from Select, Toggle, Toggle Group and Guides.

FAQ

How is the order worked out?

From the data, with one comparison per key and the title as the tie-break, so equal likes always fall in the same order. The natural direction is newest first, most liked first and A to Z; Reverse flips it. Nothing is sorted in place: the block sorts a copy and renders it.

Does the page move when I change the sort or the view?

No. The list and the grid are both always in the markup, in one grid cell; the one you are not looking at is invisible, aria-hidden and inert, and both stretch to the taller one, so the rows of the list grow a little to match a grid that is taller. Every row and cell is the same height whatever the order, because titles are one line.

Which keys work?

Tab goes to the Select, which opens with Enter or Space, moves with the arrow keys and closes with Escape.The reverse toggle is a button you press with Space or Enter, and The View group is a single-selection toggle button group that disallows an empty selection: Tab goes to it, the arrow keys move between Grid and List, and Space or Enter chooses.

What does a screen reader hear?

A polite status line that says which key and direction are in use and which view is showing, each time any of them changes. Rows and cells are plain lists; the date is a time element and the likes carry a hidden "likes".

How do I use my own pictures?

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 picture's own so the layout doesn't change. Replace each frame's Scene in both views.

How does it fit on a phone?

The three controls stack, the Select and the view switch full width. The list shows a thumbnail, the title and the date and likes on two small lines; the grid is two columns.

All 100 gallery blocks