Are layers sorted by their offsets?

No. The caller's order is retained in both the controlled array and the CSS preview.

Can spread be negative?

Yes. Blur is clamped nonnegative, while signed spread and offsets are preserved.

Input Shadow Layers

Edit ordered CSS box-shadow layers without losing their stacking order.

Shadow layers

Surface shadow

horizontal offset

vertical offset

blur

spread

Inset

Surface shadow CSS color

Hex picker

Edge shadow

horizontal offset

vertical offset

blur

spread

Inset

Edge shadow CSS color

Hex picker

Preview0px 2px 6px 0px #172033, 0px 1px 0px 1px #64748b

Customise

Code

<InputShadowLayers />

Input Shadow Layers is a free forms-inputs component for Next.js, React and Tailwind that lets a theme editor compose several box-shadow layers in order.

Each stable-ID layer exposes numeric, CSS color text, inset, and reorder controls. Numeric drafts stay intact while typing and commit on Enter or blur. The exact color token remains visible and editable; six-digit hex values also get a native picker. The caller owns the array and every edit returns a new ordered array; the preview preserves that exact order, including layers with equal offsets.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-shadow-layers

Usage

import { useState } from "react";
import { InputShadowLayers } from "@/components/input-shadow-layers";

export function CardThemeEditor() {
  const [layers, setLayers] = useState([{ id: "surface", label: "Surface", inset: false, x: 0, y: 2, blur: 6, spread: 0, color: "#172033" }]);
  return <InputShadowLayers layers={layers} onLayersChange={setLayers} />;
}

Props

Prop	Type	Default	Description
layers	readonly ShadowLayer[]	required	Controlled ordered layers with stable id, label, inset, x, y, blur, spread and CSS color string properties.
onLayersChange	(layers: readonly ShadowLayer[]) => void	required	Receives immutable arrays for edits, add/remove and reorder operations.
disabled	boolean	false	Disables every editor and action.
className	string	undefined	Additional classes merged onto the root.

Customisation

The component edits CSS shadows directly. The surrounding application owns presets, tokens, naming and element geometry.

.card-preview { border-radius: 1rem; }

Frequently asked questions

Are layers sorted by their offsets?: No. The caller's order is retained in both the controlled array and the CSS preview.
Can spread be negative?: Yes. Blur is clamped nonnegative, while signed spread and offsets are preserved.

Related components

Build the surrounding settings formExplore form controls for the rest of your theme editor.Form components