UI patterns

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: Communicating the absence of data and guiding users toward meaningful actions.
• Forms: Building cohesive form experiences in both page layouts and side panels.
• Layout: Creating consistent page structures with proper spacing, max-widths, and content organization.
• 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.