Layout Components

Dev Design Library indexes 591 layout components from 81 open-source UI libraries, with the most coming from ReUI, Watermelon UI, Shadcn Space, FLX UI and Tremor Blocks. Each one links to its page with the source code, a live preview where available, the library license and the install command.

Showing 120 of 591, a mix from every library. Open a library to see all of its components.

• Aspect Ratioshadcn/ui · ReactDisplays content within a desired ratio.
• ContainerMUI / Material UI · React
• Card SwapReact Bits · ReactCards animate position swapping with smooth layout transitions.
• DividerdaisyUI · CSS (Tailwind)
• Absolute CenterChakra UI · ReactUsed to horizontally and vertically center an element relative to its parent dimensions using absolute positioning.
• Scroll ShadowHeroUI · ReactAdds dynamic gradient shadows to scrollable content based on scroll position and overflow.
• Bento GridMagic UI · ReactBento grid is a layout used to showcase the features of a product in a simple and elegant way.
• DividerReact Spectrum · ReactDividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to…
• Framecoss ui · ReactA framed container for grouping related information.
• Scroll AreaOrigin UI · ReactA native scroll container with custom scrollbars.
• Aspect RatioRadix Themes · React
• Layout SplitterPreline UI · JavaScript (HTML + Tailwind)
• Agent Suggest Card StackCult UI · ReactStack of suggestion cards for AI agent responses
• Floating PanelArk UI · ReactUsed to display content in a non-modal floating window.
• Card Stack Hovertransitions.dev · HTML/CSS
• DividerTremor · React
• 16:9 widescreen aspect ratioReUI · React16:9 widescreen aspect ratio
• Dividerpdfcn · ReactDivider PDF component (forme)
• Card Cascade StaggerAmicro Micro Transitions · ReactStack of cards that cascade into place one after another.
• ConversationAI Elements · ReactWraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the…
• Absolute CenterPark UI · ReactA utility component for centering content within its parent container.
• BlockLobe UI · ReactA flexible container that extends Flexbox with variants, shadows, and glass effects.
• Widget GridKokonut UI · ReactDashboard widgets you lift, drag and resize on a 6-column grid, with spring physics and full keyboard support.
• containerIntent UI · Reactcontainer
• Section DividerUntitled UI React · React
• Animated Toast StackbeUI · ReactStacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
• Aspect RatioTailGrids · ReactAspect ratio component to maintain the aspect ratio of an element.
• Avatar StackSpectrum UI · ReactAn overlapping avatar stack that fans apart on hover, springs name tooltips over each face and expands hidden members…
• Agent Bento GridVengeance UI · ReactMulti-agent workspace grid layout
• Scroll AreaFluid Functionalism · ReactScroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system…
• Scroll FadeToolcraft · ReactScroll area whose edges fade out to hint that there is more content to scroll.
• Layout LinesLaunch UI · React
• Grid ItemPanel UI · React NativeBento tiles, and the grid that places them.
• Animated List 03 - Expandable StackShadcn Space · ReactExpandable stack of cards showing notifications with dynamic spring layouts
• Hover Layer StackPixel Perfect · ReactAn isometric stack of UI layers that lifts apart on hover, exploding the interface into its depth layers.
• Browser Mockup CardOpenSourceUI · React
• Animated Collectionuselayouts · ReactA collection of items with smooth layout transitions and animations.
• Bento ExpandKinetics · HTML/CSSHover focuses one tile; the rest quietly recede
• App ShellBoardUI · ReactThe page standard every BoardUI template follows, free or Pro: content sits directly on the page background inside a…
• Collection SurferComponentry · ReactSmooth surfing interaction for browsing collections.
• DividerTremor Blocks · React
• Aspect RatioShadcn Dashboard · React
• Bento GridAnimations (Svelte) · SvelteA flexible grid layout with interchangeable BentoCard items for showcasing content in a responsive masonry style.
• CheckpointAI Elements (Svelte) · SvelteA compact checkpoint component that pairs a separator with icon and trigger helpers for workflow checkpoints.
• Drag Select GridSwiftPieces · SwiftUIA photo and file grid where one drag selects a whole range like the system photo library, auto-scrolling at the edges…
• 3D WrapperBadtz UI · ReactThis component transforms any content into an immersive, interactive 3D experience. It tracks cursor movements to…
• ResizableObsidianUI · React
• ChatGPT ThreadNotra · ReactThe ChatGPT conversation column with auto-scroll, a scroll-to-bottom button and a pinned footer.
• Macbook MockupGreatUI · React
• Category Previews 01Oxbow UI · AstroSimple card with overlayed text
• Laptop MockupNexvyn UI · ReactA laptop device-frame illustration for showcasing app screens.
• dB Scaleaudiocn · ReactTick marks and labels for a decibel range, shared by meters and faders.
• Aspect RatioShark UI · ReactWrapper that maintains aspect ratio for content.
• Morph SurfaceSona UI · ReactAn unstyled layout primitive that grows, shrinks, clips, and updates the content of one persistent consumer-styled…
• Agndex DashboardWatermelon UI · ReactA developer portal for managing search indexes, API credentials, billing, and project settings with light and dark…
• App Shell 2sv-efferd · SvelteA compact dashboard shell with a collapsible sidebar, sticky header, and structured content skeleton.
• Card stackArc Library · ReactReview a deck one card at a time, with a throw and an undo.
• Glass Separatorglasscn · ReactGlass Separator with five variants: clear, frosted, subtle, liquid, and liquid-refract
• Avatar StackUI Lab · ReactFans open when you reach for it, with a name above each face.
• Aspect ratioHextaUI · ReactA box that holds its shape before media loads, shimmers while loading, fades the media in and falls back when it fails.
• Model Evaluator BlockLocalMode · ReactEvaluate a selected classifier over a selected labeled dataset via useEvaluateModel, reporting accuracy plus macro…
• Aspect RatioCojeev UI · ReactKeeps a media container at a chosen width-to-height ratio as its available width changes.
• Card Image SectionROI UI · ReactA section with 4 image cards in a masonry layout.
• Bento grids 01FLX UI · ReactThree-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.
• Bento GridVelora UI · ReactFeature bento with hover-reveal CTAs and rich backgrounds.
• Magnetic Dot GridAtelier UI · React
• Browser FrameHalaska UI · React
• RuleMetal UI · React + SwiftUIAn engraved groove between groups; graphite on dark chrome.
• Adaptive Density GridSpaceUI · ReactA fluid polymorphic grid featuring velocity-driven spring pill tabs, staggered layout reflow animations, and built-in…
• Aria Aspect RatioReScript shadcn · ReScript
• Image Density GridSkecher UI · ReactA percentage-controlled image grid with animated density changes, soft focus, and optional controls.
• Fisheye Chromatic Card GridCue Foundations · React
• SeparatorOUI · ReactReact aria components Separator with shadcn characteristics.
• Liquid DividerLiquefy UI · ReactDivider line in liquid glass style. Linha divisória em estilo vidro líquido.
• AI BlockD2Studio UI · ReactAI prompt template grid with creative prompts, summarizer, story, poetry and study presets.
• Pull To RefreshEaseUI · ReactA pull-down gesture over scrollable content: the indicator tracks the finger 1:1, then resists past the trigger…
• Glass Bento GridOpaline · ReactFeature tiles on glass in a bento layout, with a pointer light and a call to action that slides in.
• SeparatorFibo · ReactA thin rule between groups of content, across or down, with an optional label.
• Aspect RatioReactFrame · ReactA container that locks its content to a fixed width/height ratio (a preset like video or square, or a custom number)…
• Container Text FlipAceternity UI · ReactBoxed word inside a sentence that flips through a list of words, with the box resizing to fit each one.
• Floating Panelark-cn · ReactA shadcn-style floating panel component built with Ark UI primitives.
• Message Scrollershadcn/ui · ReactA chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without…
• DividerMUI / Material UI · React
• Fluid GlassReact Bits · ReactGlassmorphism container with animated liquid distortion refraction.
• StackdaisyUI · CSS (Tailwind)
• Aspect RatioChakra UI · ReactMaintain a consistent aspect ratio for embedding videos, images, maps, etc.
• SeparatorHeroUI · ReactA simple line to separate content visually.
• SafariMagic UI · ReactA safari browser mockup to showcase your website.
• Scroll Areacoss ui · ReactA native scroll container with custom scrollbars.
• ContainerRadix Themes · React
• Illustration Card GridCult UI · ReactGrid of cards with gateway illustrations
• FrameArk UI · ReactUsed to render a component in an iframe
• 4:3 standard aspect ratioReUI · React4:3 standard aspect ratio
• Keep Togetherpdfcn · ReactKeep Together PDF component (forme)
• Card Stack PeelAmicro Micro Transitions · ReactLayered card index tab that peels down in 3D perspective to reveal underlay.
• PanelAI Elements · ReactA styled panel component for React Flow-based canvases to position custom UI elements.
• GroupPark UI · ReactA layout component for grouping related elements visually.
• Draggable PanelLobe UI · ReactAn edge-anchored panel that can be resized by dragging, by keyboard, or collapsed. Built on motion values, so a drag…
• Lightbox GridKokonut UI · ReactA photo grid whose thumbnails grow into a full view and fly back to their slot when you drag them down.
• grid-listIntent UI · Reactgrid-list
• Aspect RatiobeUI · ReactResponsive media with smooth aspect ratio transitions.
• ResizableTailGrids · ReactAccessible resizable panel groups and layouts with keyboard support.
• Bento GridSpectrum UI · ReactA premium interactive Bento Grid component
• Image CollageVengeance UI · ReactInteractive scattered image collage toggle
• Scroll Area (Base UI)Fluid Functionalism · ReactScroll container with a restyled overlay scrollbar that stays discoverable on hover and follows the shape system…
• Anchor Grid ControlToolcraft · React
• MockupLaunch UI · React
• SeparatorPanel UI · React NativeHorizontal or vertical rule between content, optionally labelled.
• Aspect Ratio 01 - DefaultShadcn Space · ReactA simple image constrained to a 16:9 aspect ratio.
• Photo Magnet GridPixel Perfect · ReactA tidy grid of photos that scatters away from the cursor like same-pole magnets, each tile leaning away in 3D as it…
• Stacked Cards EffectOpenSourceUI · React
• Bento Carduselayouts · ReactAn interactive bento card with animated tabs and workspace preview.
• Depth StackKinetics · HTML/CSSLayered cards fan apart on hover
• DividerBoardUI · ReactSingle, double, and filled content separators.
• Scroll ChoreographyComponentry · ReactA smooth, scroll-driven image choreography component using Framer Motion.
• Grid List 01Tremor Blocks · React
• ResizableShadcn Dashboard · React
• SeparatorAnimations (Svelte) · SvelteA flexible horizontal separator for dividing content with solid or gradient lines and optional centered labels.
• Web PreviewAI Elements (Svelte) · SvelteA browser-style preview frame with navigation controls and a log console.
• Fan StackSwiftPieces · SwiftUIOverlapping avatars in glass bubbles that fan apart on tap and scrub under the finger, a name tag budding out of the…

Libraries with layout components

• ReUI
• Watermelon UI
• Shadcn Space
• FLX UI
• Tremor Blocks

Related categories

• React Layout Components
• Tailwind CSS Layout Components
• Svelte Layout Components
• Animated Layout Components
• shadcn/ui Layout Components
• Grid Components
• Bento Grid Components
• Separator Components
• Stack Components
• App Shell Components
• Container Components
• Scroll Area Components
• Split Pane Components
• Window Frame Components
• Aspect Ratio Components
• Sticky Scroll Components
• Masonry Components
• Dashboard Grid Components