Page
pageuiPage-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for `routes` pages so every screen looks consistent.
Installation
$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/page.json$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/page.json$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/page.json$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/page.jsonManifest:
https://uipkge.dev/r/svelte/page.jsonInstalls to:src/lib/components/ui/page/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
ref | HTMLDivElement | null | — | optional |
Used by
Files installed (5)
src/lib/components/ui/page/Page.svelte0.5 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface PageProps extends HTMLAttributes<HTMLDivElement> { ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: PageProps = $props() </script> <div bind:this={ref} data-uipkge data-slot="page" class={cn('space-y-6', className)} {...restProps}> {@render children?.()} </div>src/lib/components/ui/page/PageBody.svelte0.5 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface PageBodyProps extends HTMLAttributes<HTMLDivElement> { ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, children, ref = $bindable(null), ...restProps }: PageBodyProps = $props() </script> <div bind:this={ref} data-uipkge data-slot="page-body" class={cn('', className)} {...restProps}> {@render children?.()} </div>src/lib/components/ui/page/PageHeader.svelte0.8 kB
<script lang="ts" module> import type { Snippet } from 'svelte' import type { HTMLAttributes } from 'svelte/elements' export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> { /** Action buttons rendered right of the heading (the Vue `#actions` slot). */ actions?: Snippet ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, actions, children, ref = $bindable(null), ...restProps }: PageHeaderProps = $props() </script> <div bind:this={ref} data-uipkge data-slot="page-header" class={cn('flex flex-col justify-between gap-4 sm:flex-row sm:items-center', className)} {...restProps} > <div class="flex-1"> {@render children?.()} </div> {@render actions?.()} </div>src/lib/components/ui/page/PageHeaderHeading.svelte0.7 kB
<script lang="ts" module> import type { HTMLAttributes } from 'svelte/elements' export interface PageHeaderHeadingProps extends HTMLAttributes<HTMLDivElement> { title: string description?: string ref?: HTMLDivElement | null } </script> <script lang="ts"> import { cn } from '$lib/utils' let { class: className, title, description, ref = $bindable(null), ...restProps }: PageHeaderHeadingProps = $props() </script> <div bind:this={ref} data-uipkge data-slot="page-header-heading" class={cn('', className)} {...restProps}> <h2 class="text-xl font-bold tracking-tight">{title}</h2> {#if description} <p class="text-muted-foreground mt-1 text-sm leading-relaxed">{description}</p> {/if} </div>src/lib/components/ui/page/index.ts0.3 kB
export { default as Page, type PageProps } from './Page.svelte' export { default as PageHeader, type PageHeaderProps } from './PageHeader.svelte' export { default as PageHeaderHeading, type PageHeaderHeadingProps } from './PageHeaderHeading.svelte' export { default as PageBody, type PageBodyProps } from './PageBody.svelte'
Raw manifest:https://uipkge.dev/r/svelte/page.json