mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
ff599edf14
* change database to pagelayout * page components * design system documentation * reduce preview width * revert studio * functions apply page * layout * interfaces * remove demos * pckage * format * format * Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * build registry * pckg * build script to allow index files * switch exports * fixes * gen exports * remove invalid prop * fix typecheck * fix prettier * Revert "remove invalid prop" This reverts commit118ecd40c5. * Revert "fix typecheck" This reverts commit0e1ec8fb61. * Revert "fix prettier" This reverts commit2f25ed695c. * pretter * fresh pnpm i * Update pnpm lock * fix import * revert * Update packages/ui-patterns/src/PageContainer/index.tsx Co-authored-by: Charis <26616127+charislam@users.noreply.github.com> * Update packages/ui-patterns/src/PageHeader/index.tsx Co-authored-by: Charis <26616127+charislam@users.noreply.github.com> * Update packages/ui-patterns/src/PageSection/index.tsx Co-authored-by: Charis <26616127+charislam@users.noreply.github.com> * ts fix * Update apps/design-system/content/docs/ui-patterns/page.mdx Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> * change to layouts and examples --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>
81 lines
3.5 KiB
Plaintext
81 lines
3.5 KiB
Plaintext
---
|
|
title: Layout
|
|
description: Guidelines to create consistent layouts across Studio pages using a set of page components.
|
|
---
|
|
|
|
The Page pattern consists of three main components that work together to create consistent page layouts: [PageContainer](../fragments/page-container), [PageHeader](../fragments/page-header), and [PageSection](../fragments/page-section). These components provide a structured approach to building pages with consistent spacing, max-widths, and content organization.
|
|
|
|
## Layout Types
|
|
|
|
### Settings
|
|
|
|
Settings pages are used for configuration and preference management. They follow a single-column layout with default widths to keep content focused and readable. Examples include project settings or auth sessions.
|
|
|
|
- Use `PageHeader` with `size="default"`
|
|
- Use `PageContainer` with `size="default"`
|
|
- Use `PageSection` for organizing settings into logical groups
|
|
|
|
<ComponentPreview
|
|
name="page-layout-settings"
|
|
description="Settings page layout with default widths"
|
|
peekCode
|
|
wide
|
|
/>
|
|
|
|
### List
|
|
|
|
List pages display collections of objects like tables, triggers, or functions. These pages use larger widths to accommodate wide content like data tables. Examples include database triggers, database functions or org team members.
|
|
|
|
- Use `PageHeader` with `size="large"`
|
|
- Use `PageContainer` with `size="large"`
|
|
- Use `PageSection` to wrap list content
|
|
|
|
**Table and List Actions:**
|
|
|
|
- **With filters or search:** If the table has filters or search, place table actions aligned with the filters on the right side. Do not use `PageSectionAside` or `PageHeaderAside` for table actions when filters are present.
|
|
- **Without filters:** For simple lists without filters or search, add primary list actions to `PageHeaderAside` or `PageSectionAside` as appropriate.
|
|
|
|
<ComponentPreview
|
|
name="page-layout-list"
|
|
description="List page layout with search and filters - actions aligned with search"
|
|
peekCode
|
|
wide
|
|
/>
|
|
|
|
<ComponentPreview
|
|
name="page-layout-list-simple"
|
|
description="Simple list page layout without filters - actions in PageHeaderAside"
|
|
peekCode
|
|
wide
|
|
/>
|
|
|
|
### Data and Full Page Experiences
|
|
|
|
Full-page experiences like the table editor, cron jobs, and edge functions require maximum screen real-estate and so make use of "full" size containers.
|
|
|
|
- Use `PageHeader` with `size="full"`
|
|
- Use `PageContainer` with `size="full"`
|
|
- Content spans the full width of the viewport
|
|
|
|
### Detail Pages
|
|
|
|
Detail pages display dense or lengthy content split into multiple sections. The horizontal orientation allows for better information hierarchy and context. Examples include organisation billing or project infrastructure.
|
|
|
|
- Use `PageHeader` with `size="large"`
|
|
- Use `PageContainer` with `size="large"`
|
|
- Use `PageSection` with `orientation="horizontal"` to show summary alongside content
|
|
- Multiple sections can stack vertically with horizontal layouts within each
|
|
|
|
<ComponentPreview
|
|
name="page-layout-detail"
|
|
description="Detail page layout with horizontal sections for dense content"
|
|
peekCode
|
|
wide
|
|
/>
|
|
|
|
## Components
|
|
|
|
- **[PageContainer](/docs/fragments/page-container)** - Container component providing consistent max-width and padding based on size variants
|
|
- **[PageHeader](/docs/fragments/page-header)** - Compound component for building page headers with breadcrumbs, icons, titles, descriptions, actions, and navigation
|
|
- **[PageSection](/docs/fragments/page-section)** - Compound component for organizing page content into distinct sections with title, description, and action areas
|