Page

The Page component is a specialized wrapper for top-level pages. It handles document metadata (SEO, Open Graph, Twitter Cards) and provides a standard "main" container for content.

Props

Prop	Type	Default	Description
`title`	`string`	`''`	The title of the page (appears in browser tab and search results).
`description`	`string`	`''`	A brief summary of the page for search engines and social previews.
`image`	`string`	`''`	URL of the image used for social media previews.
`imageAlt`	`string`	`''`	Alt text for the social preview image.
`url`	`string`	`''`	The canonical URL of the page.
`siteName`	`string`	`''`	The name of the overall website.
`type`	`'website' \| 'article' \| 'profile'`	`'website'`	The type of Open Graph object.
`twitterCard`	`'summary' \| 'summary_large_image'`	`'summary_large_image'`	The type of Twitter card to render.
`themeColor`	`string`	`''`	Color for the browser toolbar/address bar.
`robots`	`string`	`'index, follow'`	Instructions for search engine crawlers.
`keywords`	`string`	`''`	Comma-separated keywords for the page.
`class`	`string`	`''`	CSS classes to apply to the main container.

Samples

Social Preview Simulator

See how your page metadata would appear when shared on platforms like Discord, Slack, or LinkedIn.

Preview Title

Preview Description

Image URL

Site Name

Mock Link Preview

fluidui.io

Fluid UI Svelte

A highly flexible and customizable UI library built with Svelte 5 and Tailwind CSS 4.

Basic Usage

The Page component wraps your entire route content and automatically manages the document head.

(This documentation page itself is wrapped in a Page component. Check the browser tab title or inspect the HTML source to see the metadata in action.)

<script>

  import { Page } from 'fluid-ui-svelte/components';

  import { Text } from 'fluid-ui-svelte/base';

</script>

<Page

  title="Home"

  description="Welcome to my awesome website."

  <Text type="h1">Hello World</Text>

  <Text>This content is inside a semantic main container.</Text>

</Page>

With Detailed Metadata

You can provide comprehensive metadata for SEO and social sharing previews (Open Graph & Twitter).

<script>

  import { Page } from 'fluid-ui-svelte/components';

</script>

<Page

  title="My Article"

  description="A deep dive into Fluid UI Svelte."

  type="article"

  siteName="My Blog"

  url="https://example.com/blog/article"

  image="https://example.com/cover.jpg"

  imageAlt="Cover image showing Fluid UI components"

  twitterCard="summary_large_image"

  keywords="svelte, ui, library, framework"

  robots="index, follow"

  <!-- Content here -->

</Page>