GitHub Stars

Layout

Page-shell primitives for the root html, head, body, and main structure.

Layout is a document-level primitive family. It is intended for page shells and shared templates rather than inline component composition inside a docs example.

Installation

npx shadcn@latest add @fulldev/layout

Usage

import {
  Layout,
  LayoutBody,
  LayoutHead,
  LayoutMain,
} from "@/components/ui/layout"
---
import {
  Layout,
  LayoutBody,
  LayoutHead,
  LayoutMain,
} from "@/components/ui/layout"
---

<Layout lang="en">
  <LayoutHead
    name="Fulldev UI"
    title="Page title"
    description="Page description"
  />
  <LayoutBody>
    <LayoutMain>
      <slot />
    </LayoutMain>
  </LayoutBody>
</Layout>

Notes

  • Layout owns the root <html> element and global visual baseline.
  • LayoutHead centralizes metadata, canonical URLs, and social tags.
  • LayoutBody and LayoutMain provide the default body and page-content wrappers.
  • LayoutMain is a neutral structural wrapper for page content.

API Reference

See the GitHub source code for more information on props.