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.
Also available for React ->$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.jsonnpx shadcn-vue@latest add @uipkge/pageInstalls to:app/components/ui/page/| Name | Type / Values | Default | Required |
|---|---|---|---|
class | string | — | optional |
<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>
<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>
<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>
<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>
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
