React Layout Components
Split layouts, sticky columns, parallax layers, full-bleed sections and asymmetric grids. Whether a page looks like 2018 or like today usually comes down to its layout, not its components.
19 components, 7 of them free to install without an account.
One dataset across list, table, board, and card layouts — every entry morphs continuously to its new position with a shared-element animation, preserving the user's spatial memory.
As the page scrolls, the hero's title, avatar, and meta migrate one by one into a sticky header via shared-element FLIP, then expand back into place in order when you scroll up.
A layered drill-down detail panel system — new panels push in from the right, lower layers recede with parallax and dimming, and breadcrumbs pop back one level at a time with optional URL sync.
A two-column reading layout of content plus outline, where an indicator spine stretches and slides continuously with the reading position and the current section comes into focus in sync.
A side-by-side comparison layout — bilingual or two-version content on facing columns, paired at the sentence level, auto-aligned on scroll with linked hover highlighting.
A studio-archive-style full-page index table — multiple sortable columns that reorder with FLIP, and rows that expand into full-width detail while the rest elastically make way.
A red-string pinboard layout — cards are clues pinned to corkboard, connected by red strings that sag naturally, with slack and droop changing live as you drag.
One set of headline, image, and body copy morphing seamlessly between several magazine-grade layouts with FLIP layout animation, plus a keyboard-driven tab indicator switcher.
Blocks scattered like paste-up cuttings that fly back into their grid slots with FLIP as you scroll in, and scatter apart again when you scroll back.
A stage-managed layout — the main scene sits center stage while the rest stack as tilted thumbnails in a sidebar, swapping places with shared-element FLIP and a depth-of-field blur when selected.
An accordion layout that stacks eras or phases into horizontal strata — the expanded band opens vertically while the rest compress, and the content inside floats up with parallax.
A real view transition between a card grid and a detail page — the clicked card's image and title carry across with the View Transitions API, the other cards scatter outward by distance and return in sequence on the way back.
One click shrinks every section of the page into a thumbnail overview with FLIP; click a thumbnail to zoom back in, giving the page a spatial navigation map.
A two-column onboarding layout with a stepped form on the left and a live preview canvas on the right — input morphs into the preview instantly, and step changes slide the form directionally while the preview cross-fades.
Section boundary dividers in several shapes — slant, wave, zigzag, and curve
A magazine collage composition of overlapping elements, each lifting on hover.
A pluckable rubber-band divider that bounces and oscillates when pulled and released.
- Scroll Fade ListFree
A React scrolling list whose top and bottom fades grow and shrink with the remaining scroll distance, disappearing entirely at either end, with optional auto-scroll that pauses on hover, focus and touch.
A scene of 3–5 torn-edge paper layers with soft cut-paper shadows that parallax on scroll or cursor, for storytelling heroes and editorial layouts.