shadcn.io is not affiliated with official shadcn/ui
Sort Controls Gallery Block for React
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.
Installation
Overview
Sort controls for React with Base UI, 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?
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.
Related
- Pro
Multi-Select Bulk Actions Gallery
Select and actEight drawn scans on shared hairlines, each with a checkbox, a Select all box that shows a mixed state, Shift to take a run, and a bar with Download, Share and an undoable Delete.
- Pro
Media Library Gallery
Filter, sort and tabsA media manager drawn as a window in a hairline frame: tabs that filter by type, a search field, a List or Grid switch, twelve files with size and upload date, and an Empty state.
- Pro
Approval Sheet Gallery
Select and actEight drawn design proposals on shared hairlines, each with a status badge and an Approve or Request changes choice that can be cleared, and a running tally with a progress bar.
- Pro
Drag To Reorder Gallery
Select and actEight drawn portfolio pages in a framed grid that you reorder by dragging a grip, by Space and the arrow keys, or with Move earlier and Move later buttons, with every move announced and logged.
- Pro
Paginated Minimal Grid Gallery
Hairline gridsA quiet grid of twenty-four drawn concrete-architecture plates, eight to a page on shared hairlines, with a title and year that appear on hover and focus and the catalog pagination in a band that ends the block.
- 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.