Page
pageuiPage-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for `routes/*.vue` pages so every screen looks consistent.
Installation
$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/page.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/page.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/page.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/page.jsonNamed registry:
npx shadcn-vue@latest add @uipkge/pageInstalls to:app/components/ui/page/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
class | string | — | optional |
Used by
Files installed (5)
app/components/ui/page/Page.vue0.2 kB
<script setup lang="ts"> import { cn } from '@/lib/utils' defineProps<{ class?: string }>() </script> <template> <div data-uipkge data-slot="page" :class="cn('space-y-6', $props.class)"> <slot /> </div> </template>app/components/ui/page/PageBody.vue0.2 kB
<script setup lang="ts"> import { cn } from '@/lib/utils' defineProps<{ class?: string }>() </script> <template> <div data-uipkge data-slot="page-body" :class="cn('', $props.class)"> <slot /> </div> </template>app/components/ui/page/PageHeader.vue0.4 kB
<script setup lang="ts"> import { cn } from '@/lib/utils' defineProps<{ class?: string }>() </script> <template> <div data-uipkge data-slot="page-header" :class="cn('flex flex-col justify-between gap-4 sm:flex-row sm:items-center', $props.class)" > <div class="flex-1"> <slot /> </div> <slot name="actions" /> </div> </template>app/components/ui/page/PageHeaderHeading.vue0.4 kB
<script setup lang="ts"> import { cn } from '@/lib/utils' defineProps<{ title: string description?: string class?: string }>() </script> <template> <div data-uipkge data-slot="page-header-heading" :class="cn('', $props.class)"> <h2 class="text-xl font-bold tracking-tight">{{ title }}</h2> <p v-if="description" class="text-muted-foreground mt-1 text-sm leading-relaxed">{{ description }}</p> </div> </template>app/components/ui/page/index.ts0.2 kB
export { default as Page } from './Page.vue' export { default as PageHeader } from './PageHeader.vue' export { default as PageHeaderHeading } from './PageHeaderHeading.vue' export { default as PageBody } from './PageBody.vue'
Raw manifest:https://uipkge.dev/r/vue/page.json