Entity Page
A full page layout composition combining breadcrumb navigation, entity hero, and content area with single or split layout modes.
Installation
$ npx shadcn@latest add @orecus/entity-pageComponent
Project Alpha
A cutting-edge platform for modern workflows and team collaboration
Project Status Update
This project is on track and progressing well. Next milestone is scheduled for next week.
Progress
Completion
This Month
Budget
Total Budget
Spent
Team
Members
This is the main content area for the entity page. In a real application, this would contain detailed information, forms, or other content.
Technologies
Categories
Props
| Prop | Type | Default | Description |
|---|---|---|---|
entity* | T extends BaseEntity | ā | The entity data to display |
heroProps* | Omit<EntityHeroProps<T>, 'entity' | 'children'> | ā | Props to pass to EntityHero (entity and children are handled by EntityPage) |
layout | 'single' | 'split' | 'single' | Content layout mode |
embedHeader | boolean | false | Embed the header inside the hero area for a more cohesive visual |
stickyHeader | boolean | true | Make the header sticky (only applies when embedHeader is false) |
Compound Components
EntityPage.Header
Top bar container for breadcrumb and actions with optional glass styling.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ā | Header content (breadcrumb, EntityPage.Actions) |
className | string | ā | Additional CSS classes |
type | CardType | 'none' | Glass effect style variant |
radius | HeaderRadius | 'none' | Border radius size |
border | boolean | true | Show border on header |
invert | boolean | false | Invert glass overlay (light-on-light, dark-on-dark) |
EntityPage.Actions
Action buttons within the header.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ā | Action elements (buttons, etc.) |
className | string | ā | Additional CSS classes |
EntityPage.Hero
Content slots passed to the EntityHero component.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ā | EntityHero slot components |
EntityPage.Content
Main content area.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ā | Main content |
className | string | ā | Additional CSS classes |
EntityPage.SidePanel
Side panel content for split layout. Position controlled by parent sidePanelAlign prop.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ā | Side panel content |
className | string | ā | Additional CSS classes |
EntityPage.Footer
Footer area with optional glass styling and sticky positioning.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ā | Footer content |
className | string | ā | Additional CSS classes |
type | CardType | 'none' | Glass effect style variant |
radius | HeaderRadius | 'none' | Border radius size |
border | boolean | true | Show border on footer |
invert | boolean | false | Invert glass overlay (light-on-light, dark-on-dark) |