UIPackage
Vue React

Page

React layout
Edit on GitHub

Page-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for route pages so every screen looks consistent.

Also available for Vue ->

Installation

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

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

Examples

Props

Name Type / Values Default Required
actions

Right-aligned action bar (buttons, menus). The Vue `#actions` slot.

 React.ReactNode — optional

Used by

kanban-board

Files (2)

  • components/ui/page/page.tsx 1.9 kB 
    import * as React from 'react'
import { cn } from '@/lib/utils'

const Page = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="page" className={cn('space-y-6', className)} {...props} />
  ),
)
Page.displayName = 'Page'

const PageBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="page-body" className={cn('', className)} {...props} />
  ),
)
PageBody.displayName = 'PageBody'

export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Right-aligned action bar (buttons, menus). The Vue `#actions` slot. */
  actions?: React.ReactNode
}

const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
  ({ className, children, actions, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="page-header"
      className={cn('flex flex-col justify-between gap-4 sm:flex-row sm:items-center', className)}
      {...props}
    >
      <div className="flex-1">{children}</div>
      {actions}
    </div>
  ),
)
PageHeader.displayName = 'PageHeader'

export interface PageHeaderHeadingProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  description?: string
}

const PageHeaderHeading = React.forwardRef<HTMLDivElement, PageHeaderHeadingProps>(
  ({ className, title, description, ...props }, ref) => (
    <div ref={ref} data-uipkge="" data-slot="page-header-heading" className={cn('', className)} {...props}>
      <h2 className="text-xl font-bold tracking-tight">{title}</h2>
      {description && <p className="text-muted-foreground mt-1 text-sm leading-relaxed">{description}</p>}
    </div>
  ),
)
PageHeaderHeading.displayName = 'PageHeaderHeading'

export { Page, PageBody, PageHeader, PageHeaderHeading }
  • components/ui/page/index.ts 0.1 kB 
    export { Page, PageBody, PageHeader, PageHeaderHeading } from './page'
export type { PageHeaderProps, PageHeaderHeadingProps } from './page'

Raw manifest: https://react.uipkge.dev/r/react/page.json