Layout

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.

Fonts

LayoutHead loads no fonts. Text uses --font-sans and code uses --font-mono, which fall back to the system fonts from Tailwind’s theme, and headings use --font-heading, which follows --font-sans.

To use your own font, configure it with Astro fonts under one of these variables and render it in the head:

---
import { Font } from "astro:assets"
---

<LayoutHead title="Page title" description="Page description">
  <Font cssVariable="--font-sans" preload />
</LayoutHead>

API Reference

See the GitHub source code for more information on props.

Sidebar