mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
kemal.earth
ec6f55c00b
* feat: remove unused chart files * chore: regenerate registry * fix: logs bar chart positioning * feat: add charts page to ui patterns * chore: alphabetise ui patterns nav * feat: base composable chart components * chore: prettier for charts.mdx * chore: slowly putting example together * feat: add chart header components * feat: add chart content wrapper * feat: add recharts to source * feat: add empty state handling * feat: add loading state for content area as well * feat: starting on actual recharts pieces * feat: add basic api to documentation * feat: add disabled state too * feat: couple of basic chart types * chore: tidy up for now * feat: modify eslint rules for our demo files * fix: recharts logo colour on light mode * feat: absorb metric card into chart * feat: align prop for chart header * feat: refactor chart content * feat: example with table * chore: format for prettier * fix: pkg lock merge conflict * fix: small bits from danny * feat: add link in ui pattern intro to charts * chore: remove charts link from atoms * chore: update metric padding to saxon suggestion * feat: table footer overrides by default * feat: update api props in table * chore: formating
17 lines
1.5 KiB
Plaintext
17 lines
1.5 KiB
Plaintext
---
|
|
title: UI patterns
|
|
description: Higher-level guidance on 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](/docs/ui-patterns/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.
|