---
type: doc
title: Layout
description: Page-shell primitives for the root html, head, body, and main structure.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

`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

```bash
npx shadcn@latest add @fulldev/layout
```

## Usage

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

```astro
---
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](https://docs.astro.build/en/guides/fonts/)
under one of these variables and render it in the head:

```astro
---
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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/layout) for more information on props.