mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
kemal.earth
9008713a78
* feat: sort intro page entry points and sidebar * feat: beef up getting started intro and faq * chore: small copy fix * feat: description for ui patterns intro * feat: basic description for fragments intro * feat: add description for atom components intro * feat: add links to ui pattern docs * chore: run prettier for mdx files
17 lines
1.5 KiB
Plaintext
17 lines
1.5 KiB
Plaintext
---
|
|
title: UI Pattern components
|
|
description: Higher-level design patterns that guide how to compose components together to solve common interface problems.
|
|
---
|
|
|
|
UI Patterns are reusable design solutions that combine multiple components from our design system to address common interface challenges. Unlike atom components (basic building blocks like buttons and inputs) or fragment components (pre-built composite components), UI patterns provide guidelines and best practices for structuring entire interface sections.
|
|
|
|
These patterns help ensure consistency across Supabase products by establishing standard approaches for:
|
|
|
|
- **Charts**: Visualizing data consistently using standardized chart types and styling.
|
|
- **[Empty States](/docs/ui-patterns/empty-states)**: Communicating the absence of data and guiding users toward meaningful actions.
|
|
- **[Forms](/docs/ui-patterns/forms)**: Building cohesive form experiences in both page layouts and side panels.
|
|
- **[Layout](/docs/ui-patterns/layout)**: Creating consistent page structures with proper spacing, max-widths, and content organization.
|
|
- **[Navigation](/docs/ui-patterns/navigation)**: Organizing complex hierarchical navigation systems across multiple products and contexts.
|
|
|
|
UI patterns may incorporate external libraries (such as `react-markdown`, `reactflow`, `recharts`, etc) or compose various components from the `ui` package. They serve as blueprints for solving recurring design problems, ensuring that similar features across the application follow the same structural and interaction patterns.
|