# All components gallery

One visual QA route that renders every component-family example from the public documentation using the real Faye UI React components.

## Purpose
This page is the visual integration gallery for the component layer. It mounts every component-family documentation example using the actual exported Faye UI React components. It is deliberately large: the purpose is regression review, theme review, density review, responsive inspection and screenshot capture rather than a minimal application payload.

The gallery starts with a consumer journey, composed cards and dialogs, and interactive navigation. The consumer example exposes hints and validation directly; create a day to see circular/linear loading and a sliding confirmation, toggle the landscape to see a fade, and switch to the saved itinerary through the responsive navigation.

Use the normal family pages for focused learning. Use this gallery when reviewing a release, a theme, or a broad visual change.

## What this proves
When the real documentation application builds and this page executes without its error boundary, it proves that the documented component examples can coexist in one application tree. It does not by itself prove every state, keyboard path, server boundary, accessibility requirement or tree-shaking property; those remain separate verification gates.

## Screenshot policy
The documentation browser suite captures light, dark and mobile screenshots from this route after a successful build. A static CSS specimen is never substituted for those application screenshots.

## Executable example source

```tsx
'use client';
import ConsumerExperience from './consumer-experience';
import FunctionalCompletion from './functional-completion';
import SurfaceCompositions from './surface-compositions';
import InteractionCompositions from './interaction-compositions';
import Foundations from './foundations';
import Layout from './layout';
import Buttons from './buttons';
import Fields from './fields';
import Selection from './selection';
import Pickers from './pickers';
import Numeric from './numeric';
import Dialogs from './dialogs';
import Floating from './floating';
import Menus from './menus';
import Navigation from './navigation';
import Feedback from './feedback';
import Display from './display';
import Motion from './motion';
import Patterns from './patterns';
import Accessibility from './accessibility';
import { Heading, Text } from '@fayegram-ai/faye-ui/core/text';
import { Stack } from '@fayegram-ai/faye-ui/layout/layout';

const families = [
  ['Consumer experience', ConsumerExperience], ['Consumer navigation and feedback', FunctionalCompletion], ['Cards and composed surfaces', SurfaceCompositions], ['Interactive navigation and transitions', InteractionCompositions],
  ['Foundations', Foundations], ['Layout', Layout], ['Buttons and actions', Buttons],
  ['Fields and forms', Fields], ['Selection controls', Selection], ['Pickers', Pickers],
  ['Numeric inputs', Numeric], ['Dialogs and drawers', Dialogs], ['Floating content', Floating],
  ['Menus', Menus], ['Navigation', Navigation], ['Feedback', Feedback], ['Display', Display],
  ['Motion', Motion], ['Application patterns', Patterns], ['Accessibility guidance', Accessibility],
] as const;

export default function AllComponents() {
  return <Stack gap="10">{families.map(([name, Example]) => <section className="docs-gallery-family" key={name} data-gallery-family={name}>
    <header className="docs-gallery-heading"><Heading level={2} size="md">{name}</Heading><Text as="p" size="sm" tone="muted">Live Faye UI examples.</Text></header>
    <Example/>
  </section>)}</Stack>;
}
```