Overview
Gallery
Grid display for browsing and selecting generated content
gallerygridbrowsing
Docs
Gallery displays a collection of AI-generated or AI-curated items in a browsable grid layout. It's the natural presentation pattern when the output is visual or when users need to compare multiple options at a glance. Galleries support selection, lazy loading, and filtering, making them suitable for both small result sets and large, paginated collections.
Variants
- Image gallery — A grid of image thumbnails with selection support, commonly used for AI image generation results.
- Card gallery — Content cards with titles and descriptions arranged in a grid, useful for text-based generated content.
- Mixed media gallery — A grid combining different content types — images, text, and metadata — for heterogeneous result sets.
Use Cases
- AI image generation tools displaying multiple outputs
- Design tools showing template or style options
- Content libraries browsing AI-generated articles or posts
- Search results presented as visual cards
- Portfolio displays of AI-assisted creative work
Best Practices
- Support keyboard navigation and selection for accessibility.
- Use consistent card sizes within a gallery for visual rhythm.
- Provide clear selection feedback — borders, checkmarks, or overlays.
- Implement lazy loading for large galleries to maintain performance.
- Offer column count adjustment for different screen sizes and preferences.