Layer stack

Manages supplied layer selection, visibility, locking, and order through named 44px controls and caller-owned changes.

Preview

Layers

Visible · Unlocked
Visible · Locked

In action

Keep the composition ordered

Cover art

Layers

Visible · Unlocked
Visible · Unlocked
Visible · Locked

When to use

Use it for

Top-to-bottom layer order for a graphics, audio, or video editor.
onLayersChange receives the proposed array; the application applies it and owns persistence.
onSelect independently controls selection; locked layers cannot use their move actions.

Not for

Implying drag-and-drop support or modifying document content behind the host's back.
Rendering state-changing controls without onLayersChange.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { LayerStack } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/layer-stack.

2. Vendor the source

npx @noorddev/vlak-cli add layer-stack

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/layer-stack.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { useState } from "react";
import { LayerStack } from "@noorddev/vlak-react";
import type { CreativeLayer } from "@noorddev/vlak-react";

function Layers() {
  const [layers, setLayers] = useState<CreativeLayer[]>([{ id: "title", label: "Title", visible: true, locked: false }, { id: "background", label: "Background", visible: true, locked: true }]);
  const [selected, setSelected] = useState<string | null>(null);
  return <LayerStack label="Layers" layers={layers} selectedId={selected} onSelect={setSelected} onLayersChange={setLayers} />;
}

Props

LayerStack

A controlled layer order with explicit selection, visibility, lock and move actions.

Prop	Type	Description
`label`required	`ReactNode`
`layers`required	`CreativeLayer[]`	Ordered from top to bottom.
`selectedId`	`string \| null`
`onSelect`	`(id: string) => void`
`onLayersChange`	`(layers: CreativeLayer[]) => void`
`disabled`	`boolean`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onSelect">.

Keyboard

Keys	Does
`Tab`	Moves through available layer selection and Vlak visibility, lock, and move buttons.
`Enter, Space`	Requests the focused action; move buttons reorder one position when allowed.

Accessibility

An ordered list preserves the supplied layer order, with visible status text for visibility and locking.
Selection, visibility, and lock controls have stable names and pressed states.
Move actions name their layer, disable at boundaries or when locked, and avoid a drag-only workflow.
All actions have 44px targets; the ref and native attributes reach the root div.

Markup

<div class="rs-layer-stack"><p class="rs-layer-stack-label">Layers</p><ol class="rs-layer-stack-list"><li class="rs-layer-stack-row"><span>Title</span><span class="rs-layer-stack-note">Visible · Unlocked</span></li><li class="rs-layer-stack-row"><span>Background</span><span class="rs-layer-stack-note">Visible · Locked</span></li></ol></div>

Classes

.rs-layer-stack.rs-layer-stack-label.rs-layer-stack-list.rs-layer-stack-row.rs-layer-stack-actions.rs-layer-stack-action.rs-layer-stack-button.rs-layer-stack-selected.rs-layer-stack-note

Depends on

/button