FreeComponent · Layout
Vue layout components
Layout components give pages a consistent structure: containers, grids, stacks, split panes and app shells. These Vue 3 components wrap that structure in slots so the content stays yours, styled with Tailwind CSS 4.
They use <script setup lang="ts"> and class-based dark mode, and have no dependencies besides vue. Use them as the skeleton of a page and fill in sections from the rest of the library.
Free
FreeComponent · Layout
Box
A layout building block based on display: flex. It offers fine-tuned controls for creating a wide range of layouts without writing custom CSS.
Good to know
Building layout that hold up
- Build layouts from slots
- Named slots like header, sidebar and default keep layout components reusable. Avoid passing content through props when a slot will do.
- Use container queries for reusable sections
- Tailwind 4 includes container queries: add @container to a wrapper and use @md: variants inside. Components then adapt to the space they are given, not the viewport.
- Prefer gap over margins
- Flex and grid gap utilities space children without leftover margins on the first or last item, and they work cleanly with v-for.
- Use dynamic viewport units
- For full-height shells, h-dvh accounts for mobile browser toolbars where h-screen can overflow.
FAQ
Questions
Can I use these layouts with Nuxt layouts or Vue Router views?
Yes. Put a layout component in a Nuxt layout or around <RouterView>, and pass the page content through its default slot.
Do these layouts support dark mode?
Yes. They use Tailwind CSS 4 dark: variants with class-based dark mode, so they switch when a dark class is present on a parent element.