Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Depth Layered Stack Features Block for Svelte

An exploded isometric stack of three greyscale planes (data, logic, view) in CSS 3D, with a ruled list of the layers beside it: hovering, focusing or tapping a layer lifts its plane and outlines it.

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 depth layered stack features section for Svelte with Ark UI. A split with a hairline divider: on the start side a compact heading and the three layers of a design-layers tool (view, logic and data) as a ruled list, each a button with a sentence; on the end side, in a framed stage, three greyscale planes hang apart in CSS 3D at an isometric angle, a screen above a flow of rules above a table of cells. Hovering, focusing or tapping a layer lifts its plane and outlines it while the others step back, and leaving the list lets the stack rest. It's built from Guides with CSS transforms and transitions and your theme's tokens for every colour. For architecture, design-system and platform products that explain themselves in layers.

FAQ

How are the planes drawn?

The stage has a perspective; inside it one square is rotated with rotateX(58deg) rotateZ(-40deg) and transform-style: preserve-3d, and each plane is placed along its local z axis by a --rise custom property (0, 5 and 10 rem). Picking a layer adds a --lift of 2.5 rem to that plane. There's no script frame loop: a transition on transform does the movement.

How do I change the layers?

Edit the three Layer objects at the top (title, text and rise) and the three plane drawings (DataPlane, LogicPlane and ViewPlane), which are plain boxes and lines. The list reads top to bottom the way the stack looks, so LIST is the layers from the highest down.

What works from a keyboard or on a touch screen?

Each layer is a real button in a heading, with aria-pressed while it is the picked one. Pointer hover, keyboard focus and a tap all pick it. The stack rests again when the pointer or focus leaves the list. The planes are decoration and hidden from assistive technology: the list says everything they show.

What happens with reduced motion?

The planes jump to their lifted or resting position without a transition, and the one-time fade-up of the two halves on load is off.

Does it follow my theme?

Yes. The planes are your card colour with hairlines and a shadow, the contents are greyscale and the one filled element is your foreground colour, so it reads in light and dark and in any preset. The primary colour is not used.

How does it fit on a phone?

The list comes first and the stage sits under it behind a rule, at a shorter height and a smaller square, with a one-line hint under it. Tapping a layer lifts its plane.

All 170 features blocks