Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Categories Storefront Block for Ark UI

A department index drawn as a mega menu: six departments in a vertical tab list, and for the open one its four categories as drawn tiles with product counts, the most viewed first, and a Shop all link with the department total.

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

Help shoppers find their way into a catalog, with this department index for React with Ark UI. A header names the page and says what Gatehouse Goods sells. In a hairline frame with a plus mark on each corner, a vertical Tabs list at the start holds six departments, each with the number of products it holds; on a phone it becomes a scrolling row of chips. The open department shows its name and a Shop all link whose number is the sum of its four categories, then the categories as drawn tiles in hairline cells, each with its name and its product count, the most viewed first. The arrow keys move through the departments and the panel changes in place; every department has four tiles, so the frame keeps its height. It's built from Tabs and Guides, with a CSS entrance only. For a store's department page, a mega menu panel or a catalog landing.

FAQ

How do I fill it with my own departments?

Edit DEPARTMENTS. Each has an id, a name and its categories; each category has a count of products, a views figure that orders the tiles, a drawing kind and a grey step. The department's number and the Shop all total are summed from its categories, so they cannot disagree with the tiles. Keep the same number of categories in each department, so the panel never changes height.

What does most viewed first mean?

The tiles are sorted by views, the views of the last month, highest first; ties go to the name. Views are typed sample figures: feed them from your analytics, or sort by sales or by newest instead.

How do I use it from the keyboard?

Tab moves to the department list, the arrow keys move between departments, and the panel changes with them. Tab again reaches the Shop all link and the tiles in order.

What stays local?

All of it: the departments and their counts are typed, and every link goes to #. Wire each tile to its category page and fill the counts from your catalog.

How does it look on a phone?

The list of departments becomes a row of chips that scrolls sideways, with the open one filled; the tiles go two up. Counts beside the departments are hidden to save room, and the Shop all link keeps its number.

Is it accessible?

The department list is a named tab list, each panel is labelled by its tab, and the tiles are links with their category and count in text; the pictures are decorative. The open department is shown by a bar and a filled chip, not only by colour.

All 100 storefront blocks