mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 18:11:51 +08:00
e79f0d1dd1
## What kind of change does this PR introduce? Add `Markdown` component - as a ui-pattern - docs in design-system <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a Markdown UI pattern with full documentation and a docs sidebar entry. * Markdown component supports composable renderers, optional lazy syntax highlighting, and customizable element overrides. * Added many interactive examples (full demo, headings, paragraphs, lists, links, inline code, blockquotes, code blocks, tables, images, horizontal rules) plus Quote and Avatar demos. * **Documentation** * New MDX guide detailing usage, props, and customization previews. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46325?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
18 lines
1.5 KiB
Plaintext
18 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](charts)**: Visualizing data consistently using standardized chart types and styling.
|
|
- **[Empty States](empty-states)**: Communicating the absence of data and guiding users toward meaningful actions.
|
|
- **[Forms](forms)**: Building cohesive form experiences in both page layouts and side panels.
|
|
- **[Layout](layout)**: Creating consistent page structures with proper spacing, max-widths, and content organization.
|
|
- **[Markdown](markdown)**: Rendering composable markdown content with defaults
|
|
- **[Navigation](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.
|