shadcn.io is not affiliated with official shadcn/ui
Layered Stack Diagram Features Block for Solid
A flat stack ladder for an app platform: five bars from interface to infrastructure, each a step wider, linked by hover and focus to a list of what sits in every layer.
Installation
Overview
A stack-diagram features section for Solid with Ark UI. Five flat bars, Interface at the top to Infrastructure at the foot, sit in a hairline frame with + marks on its corners, each bar one step wider than the one above. Beside the frame a list gives every layer a name, a sentence and the parts that sit in it as outlined badges. Hover or focus a bar and its group in the list is lit; the list always shows all five layers, so nothing depends on the pointer. Below lg the list moves under the ladder and the bars run full width. It's built from Guides and Badge, with CSS for everything else, and it follows your theme. For platforms, frameworks and any product explained as layers that can be used alone or together.
FAQ
How do I change the layers?
Edit LAYERS at the top of the file: each layer has a name, a sentence, its parts and step, the bar's width from sm (one class per layer, widening by about a tenth each step). The bar's count of parts is the length of parts. Keep it to five or six layers: the frame is sized for them.
What do hover and focus do?
Pointing at a bar or tabbing to it makes it the active layer: the bar turns to the text colour and its group in the list gets a tint and a heavier title. Tapping a bar does the same on a touch screen. The state is plain useState, and the list shows every layer the whole time, so keyboard and screen reader users lose nothing.
Is it accessible?
The bars are real buttons in an ordered list, each named by its layer and count, with aria-pressed on the active one and a visible focus ring. The list is a second ordered list with a heading per layer. The frame's caption says which end is closest to users and which to hardware.
What changes on a phone?
The bars lose their stepped widths and run the full width of the frame, so each one is an easy target, and the list sits under the ladder with a hairline between them. The keyboard order is the same: bars first, then the list.