Tailwind CSS Layout Components

Dev Design Library indexes 483 Tailwind CSS layout components from 63 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. Every library in this list styles its components with Tailwind CSS utility classes.

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

• Aspect Ratioshadcn/ui · ReactDisplays content within a desired ratio.
• DividerdaisyUI · CSS (Tailwind)
• 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.
• Layout SplitterPreline UI · JavaScript (HTML + Tailwind)
• Agent Suggest Card StackCult UI · ReactStack of suggestion cards for AI agent responses
• DividerTremor · React
• 16:9 widescreen aspect ratioReUI · React16:9 widescreen aspect ratio
• 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…
• 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.
• 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.
• 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.
• 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.
• 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.
• 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…
• Image Density GridSkecher UI · ReactA percentage-controlled image grid with animated density changes, soft focus, and optional controls.
• SeparatorOUI · ReactReact aria components Separator with shadcn characteristics.
• 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…
• StackdaisyUI · CSS (Tailwind)
• 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.
• Illustration Card GridCult UI · ReactGrid of cards with gateway illustrations
• 4:3 standard aspect ratioReUI · React4:3 standard aspect ratio
• 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.
• 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.
• 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.
• Animated Card 1Badtz UI · React
• Scroll AreaObsidianUI · React
• Claude Code TerminalNotra · ReactThe terminal window with traffic lights and a title bar for Claude Code sessions.
• Category Previews 02Oxbow UI · AstroCategory cards in bento style
• Mixeraudiocn · ReactThe container for channel strips: shared meter settings, keyboard navigation between strips, a master area and an…
• FloatShark UI · ReactAnchor an element to the edge of a container.
• Prototype Morph SurfaceSona UI · ReactStress tests for the Morph Surface primitive. Página de testes de estresse do primitivo Morph Surface.
• Astrix DashboardWatermelon UI · ReactA trade compliance workspace with AI classification metrics, a live pipeline, HS code stream review, and light and…
• Image Gallery Onesv-efferd · SvelteA responsive editorial gallery with staggered aspect ratios, lazy-loaded media, and a clean masonry-style rhythm.
• Separatorglasscn · React
• Changelog StackUI Lab · ReactFiles each release card behind the stack like a hand riffling index cards.
• MarkerHextaUI · ReactQuiet notes between content, like date dividers and system events, with sticky dates and times that read as Today or…
• ConversationLocalMode · ReactScrollable message-display surface with first-class scroll-anchoring: auto-pins to the newest content while tokens…
• Bento BuilderCojeev UI · ReactAn editable Bento canvas with complete partitions, content swapping, snapped neighbor resizing, history and usable…
• Bento grids 02FLX UI · ReactA row of collection cards, one twice as wide, each with a product photo bleeding off the top, a title, a short…
• Browser MockupVelora UI · ReactBrowser window frame for product screenshots.
• Scroll areaMetal UI · React + SwiftUIA region that scrolls with the system's own scrollbar: a slim thumb that fades in while scrolling and widens when…
• Aspect RatioSpaceUI · ReactMaintains a consistent width-to-height ratio for images, videos, and embeds, preventing layout shifts when pages load…
• Morph StackSkecher UI · ReactA composable three-plate stack with spring-driven perspective and layered hover motion.
• Aspect RatioD2Studio UI · ReactDisplays content within a desired ratio.
• Glass Code BlockOpaline · ReactSyntax-highlighted code in a glass window, with tabs, line numbers, highlighted lines and copy.
• Browser MockupReactFrame · ReactA realistic browser chrome frame in macOS, Windows, or mobile Safari style, with tabs, a URL bar, and a content area…
• Features Section Demo 1Aceternity UI · ReactSimple with card gradient
• Scroll Areaark-cn · ReactA shadcn-style scroll area component built with Ark UI primitives.
• Resizableshadcn/ui · ReactAccessible resizable panel groups and layouts with keyboard support.
• SurfaceHeroUI · ReactContainer component that provides elevation and background styling.
• Separatorcoss ui · ReactA separator element accessible to screen readers.
• Mock Browser WindowCult UI · ReactA customizable browser window mockup component with support for Chrome, Safari, and generic styles, customizable…

Libraries with Tailwind CSS layout components

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

Related categories

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