# Layout components

> Choose from 6 flexible Layout components for React, streamlining responsive design with Tailwind CSS.

47 components available. Showing all of them below.

- [Morphing Card Stack](https://21st.dev/@koustubhayadiyala36/components/morphing-card-stack.md) — by Kousthubha Yadiyala
- [Layout Grid](https://21st.dev/@manuarora700/components/layout-grid.md) — by Manu Arora
- [Connoisseur Stack Interactor](https://21st.dev/@hardikkashiyani123456788/components/connoisseur-stack-interactor.md) — by Hardik Kashiyani
- [layout preloader](https://21st.dev/@kedhareswer.12110626/components/layout-preloader.md) — by Kedhareswer Naidu
- [Form Layout](https://21st.dev/@ephraimduncan/components/form-layout/form-sections-with-side-labels.md) — by Ephraim Duncan
- [Form Layout](https://21st.dev/@ephraimduncan/components/form-layout/form-sections-with-checkbox-settings.md) — by Ephraim Duncan
- [Mountain Vista Bg](https://21st.dev/@dhileepkumargm/components/mountain-vista-bg.md) — by Dhileep Kumar GM
- [Form Layout](https://21st.dev/@ephraimduncan/components/form-layout/workspace-registration-form.md) — by Ephraim Duncan
- [Animated Collection](https://21st.dev/@0xUrvish/components/animated-collection.md) — by 0xUrvish
- [Resizable](https://21st.dev/@shadcn/components/resizable.md) — by shadcn
- [Auto Layout Card](https://21st.dev/@ln-dev7/components/auto-layout-card.md) — by LN
- [BrutalistBentoGrid](https://21st.dev/@dhileepkumargm/components/brutalist-bento-grid.md) — by Dhileep Kumar GM
- [Animated Toggle Layout Container](https://21st.dev/@youcefbnm/components/animated-toggle-layout-container.md) — by YoucefBnm Bnm
- [Form](https://21st.dev/@ephraimduncan/components/form.md) — by Ephraim Duncan
- [Toggle nav](https://21st.dev/@airbnb-visx/components/toggle-nav.md) — by Airbnb
- [Resizable](https://21st.dev/@sean0205/components/resizable.md) — by Sean Hello
- [Resizable](https://21st.dev/@preetsuthar17/components/resizable.md) — by Preet Suthar
- [Resizable](https://21st.dev/@sean0205/components/resizable/handle.md) — by Sean Hello
- [The Item one](https://21st.dev/@felipemenezes098/components/the-item-one/sizes.md) — by felipemenezes098
- [Resizable](https://21st.dev/@sean0205/components/resizable/vertical.md) — by Sean Hello
- [Resizable](https://21st.dev/@sean0205/components/resizable-1/handle.md) — by Sean Hello
- [Resizable](https://21st.dev/@sean0205/components/resizable-1.md) — by Sean Hello
- [Player Layout](https://21st.dev/@limeplay/components/player-layout.md) — by Limeplay
- [Splitter](https://21st.dev/@anubra266/components/splitter.md) — by Abraham
- [Scroller](https://21st.dev/@shugar/components/scroller-old.md) — by tigran tumasov
- [Splitter](https://21st.dev/@anubra266/components/splitter/nested-splitter.md) — by Abraham
- [Splitter](https://21st.dev/@anubra266/components/splitter/three-panels-splitter.md) — by Abraham
- [Resizable](https://21st.dev/@sean0205/components/resizable-1/vertical.md) — by Sean Hello
- [Astryx Aspect Ratio](https://21st.dev/@Astryxdesign/components/astryx-aspect-ratio.md) — by Astryx
- [Splitter](https://21st.dev/@anubra266/components/splitter/vertical-splitter.md) — by Abraham
- [Separator](https://21st.dev/@sean0205/components/separator.md) — by Sean Hello
- [Astryx App Shell](https://21st.dev/@Astryxdesign/components/astryx-app-shell/with-banner.md) — by Astryx
- [BeUI Shared Layout Background](https://21st.dev/@saurabh10102/components/beui-dock.md) — by Saurabh Chauhan
- [Astryx Aspect Ratio](https://21st.dev/@Astryxdesign/components/astryx-aspect-ratio/circle-image.md) — by Astryx
- [Astryx Aspect Ratio](https://21st.dev/@Astryxdesign/components/astryx-aspect-ratio/widescreen.md) — by Astryx
- [Astryx Aspect Ratio](https://21st.dev/@Astryxdesign/components/astryx-aspect-ratio/square-image.md) — by Astryx
- [Astryx App Shell](https://21st.dev/@Astryxdesign/components/astryx-app-shell/top-nav-only.md) — by Astryx
- [Astryx App Shell](https://21st.dev/@Astryxdesign/components/astryx-app-shell.md) — by Astryx
- [Astryx App Shell](https://21st.dev/@Astryxdesign/components/astryx-app-shell/minimal.md) — by Astryx
- [Astryx Aspect Ratio](https://21st.dev/@Astryxdesign/components/astryx-aspect-ratio/with-skeleton.md) — by Astryx
- [Astryx App Shell](https://21st.dev/@Astryxdesign/components/astryx-app-shell/side-nav-only.md) — by Astryx
- [Astryx App Shell](https://21st.dev/@Astryxdesign/components/astryx-app-shell/top-nav-side-nav.md) — by Astryx
- [Surface](https://21st.dev/@hero_ui/components/heroui-surface.md) — by Hero Ui
- [Reshaped Divider](https://21st.dev/@reshaped/components/reshaped-divider.md) — by reshaped
- [Reshaped Divider](https://21st.dev/@reshaped/components/reshaped-divider/color.md) — by reshaped
- [Reshaped Divider](https://21st.dev/@reshaped/components/reshaped-divider/divided-view.md) — by reshaped
- [HeroUI Separator](https://21st.dev/@hero_ui/components/heroui-separator/variants.md) — by Hero Ui

Full component directory: https://21st.dev/llms.txt