SquareLayout

Responsive full screen layout to show something that's square, and have remaining space for text, except on square screens where text floats on top. Features adaptive design, responsive breakpoints, and optimized layout for different screen sizes.

v0.0.1
🍰
🏃
🎓
Beginner
layout
#css#responsive#tailwind#react

SquareLayout

Install

Requires a project with shadcn/ui initialized. Installs all 2 files and any listed registry dependencies.

npx shadcn@latest add https://manglekuo.com/showcase/r/square-layout.json
  • @ui/square-layout.tsx
  • @ui/layout-wrapper.tsx

Documentation

SquareLayout

Responsive full-screen layout: a square content area with text beside it on wide/narrow screens, overlaid on square viewports.

Usage

import SquareLayout from '@/components/ui/square-layout'; <SquareLayout wideBreakpoint={1.6} narrowBreakpoint={0.7}>  <img src="/hero.jpg" alt="Hero" />  <p>Caption or description</p></SquareLayout>Language: jsx

Props

  • children (ReactNode): Square content plus text (typically an image and caption).
  • wideBreakpoint (number, default: 1.4): Switch to side-by-side when width/height exceeds this ratio.
  • narrowBreakpoint (number, default: 0.8): Switch to stacked layout below this ratio.

Layout behaviour

  • Wide: square on the left, text on the right.
  • Narrow: square on top, text below.
  • Square viewport: text floats over the square.

The companion layout-wrapper client component sets data-layout from viewport aspect ratio.