Inline Layout Switch

Installation & details

Inline Layout Switch by Codrops. Inline editorial imagery expands into an image column with coordinated layout transitions. Try the live React demo, inspect the original source, and install from PODIE.

React · Tailwind CSS · MIT license · Original GitHub source

Added to PODIE 2026-10-01 · Catalog updated 2026-10-01 · Page updated 2026-10-13

Installation and usage

The published examples target React 19 and Tailwind CSS 4. See the recorded installation tests and their limits; verify compatibility in your own project.

This original Codrops demo runs inside a self-contained React iframe. The installation includes the original GitHub source and image assets. Set autoplay={false} for manual interaction. Bundled libraries retain their own licenses.

01 — Set up your project

First component? Initialize shadcn once.

pnpm dlx shadcn@latest init

02 — Install the component

pnpm dlx shadcn@latest add https://podie.dev/r/codrops--inline-layout-switch.json

03 — Add it to your interface

Import the component from the path created by the installer.

'use client';
import EffectInlineLayoutSwitch from '@/components/codrops/inline-layout-switch';
export default function Demo() {
  return (
    <div className="expanded-demo" data-demo-id="codrops--inline-layout-switch">
      <EffectInlineLayoutSwitch className="codrops-preview" />
    </div>
  );
}

Example styling

These styles belong to the demo wrapper. Add them to your stylesheet to reproduce this example.

.expanded-demo { position:relative; display:flex; align-items:center; justify-content:center; width:360px; max-width:100%; min-height:180px; padding:15px; isolation:isolate }
.demo-stack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px }
.demo-action { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--border, #e5e5e5); border-radius:8px; background:var(--muted, #f5f5f5); color:var(--foreground, #171717); padding:10px 16px; font-size:13px; cursor:pointer }
.demo-action:hover { background:var(--accent, #eee) }
.demo-tile { padding:16px 22px; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:12px; color:var(--foreground, #171717); font-size:15px }
.demo-art { display:flex; align-items:center; justify-content:center; min-height:140px; padding:30px; width:280px; max-width:100%; background:var(--muted, #f5f5f5); border:1px solid var(--border, #e5e5e5); border-radius:16px; text-align:center; font-size:25px; letter-spacing:-.7px; color:var(--foreground, #171717) }
.demo-art.h-full { height:100%; min-height:0 }
.demo-gradient { position:relative; background:linear-gradient(145deg,#b6c7d1,#d5bcd6 50%,#e2d5bb); border-radius:16px; padding:20px; color:#222 }
.demo-gradient .demo-tile { background:#ffffff48 }
.demo-scene { position:relative; width:360px; height:260px; max-width:100%; overflow:hidden; border-radius:12px }
.demo-scene-label { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-size:25px; line-height:1.3; font-weight:500; letter-spacing:-.7px; z-index:1; pointer-events:none }
.demo-dot { display:block; width:60px; height:60px; border-radius:50%; background:var(--foreground, #171717) }
.expanded-demo:has(.codrops-preview) { width:100%; max-width:none; height:100%; padding:0 }
.codrops-preview { width:100%; height:100%; border:0; border-radius:inherit }

Dependencies and distribution

No additional npm dependencies are declared. The CLI installs declared dependencies. React is a project prerequisite; scenes may include bundled libraries with their own notices.

By Codrops · MIT license. Original component source and license included.

Choosing and integrating this component

PODIE source review · 2026-10-02

Where it fits

Switching between visual arrangements inside one scene. Its document controls the original layout; the wrapper does not rearrange siblings in your application.

Integration boundary

React wrapper with an isolated iframe scene. Give the scene a stable size and inspect the supplied markup before replacing images or labels.

Checks before shipping

Test focus behavior during the layout change and keep essential links available when motion is reduced.

Recorded verification

Included in the October 1, 2026 production sample: npm, pnpm, Yarn and Bun installation, TypeScript checking and a Vite build passed in four separate React 19.2.6 / Tailwind CSS 4.2.1 projects, with all 20 sampled entries installed together. Read the method and limitations.

No component-specific mobile performance or assistive-technology pass is claimed here. Test the final page, including its content, theme and application logic.

Reviewed source identity

Registry SHA-256: be5ce45bd71cf8527c9f965ff26eb28dbe7cc20432935aaec21cae0ebaea59ec

Entry file: components/codrops/inline-layout-switch/index.tsx. 12 files in the registry payload.

Consider also: Morphing Effect Canvas 2D.