UIPackage
Vue React

Page

Vue layout
Edit on GitHub

Page-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 ->

Installation

$ npx shadcn-vue@latest add https://uipkge.dev/r/vue/page.json

Or with the named registry: npx shadcn-vue@latest add @uipkge/page

Examples

Props

Name Type / Values Default Required
class string — optional

Used by

kanban-board

Files (5)

  • app/components/ui/page/Page.vue 0.2 kB 
    <script setup lang="ts">
import { cn } from '@/lib/utils'

defineProps<{
  class?: string
}>()
</script>

<template>
  <div :class="cn('space-y-6', $props.class)">
    <slot />
  </div>
</template>
  • app/components/ui/page/PageBody.vue 0.2 kB 
    <script setup lang="ts">
import { cn } from '@/lib/utils'

defineProps<{
  class?: string
}>()
</script>

<template>
  <div :class="cn('', $props.class)">
    <slot />
  </div>
</template>
  • app/components/ui/page/PageHeader.vue 0.3 kB 
    <script setup lang="ts">
import { cn } from '@/lib/utils'

defineProps<{
  class?: string
}>()
</script>

<template>
  <div :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.vue 0.4 kB 
    <script setup lang="ts">
import { cn } from '@/lib/utils'

defineProps<{
  title: string
  description?: string
  class?: string
}>()
</script>

<template>
  <div :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.ts 0.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