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.
Live examples
Try the controls below, then read or copy the complete example to adapt it for your application.
Consumer experience
Live Faye UI examples.
Make a little room for wonder.
Take the scenic route.
A quiet walk, a new favourite corner, and time to enjoy it.
Consumer navigation and feedback
Live Faye UI examples.
A little room for the weekend
Explore, save, and make a plan at your own pace.
Choose the pace
Consecutive notifications
Navigation that follows your reading
Start with the morning light
Move through the day at your own pace. The navigation returns when you scroll back or focus its controls.
Take the path beside the water
Move through the day at your own pace. The navigation returns when you scroll back or focus its controls.
Leave room for a longer lunch
Move through the day at your own pace. The navigation returns when you scroll back or focus its controls.
Find a place to watch the sunset
Move through the day at your own pace. The navigation returns when you scroll back or focus its controls.
Make room from any edge
Little signals, thoughtful placement
A day, in order
- Morning walkBy the coast
- A picnic with friendsIn the garden
- Sunset and a quiet momentNear the water
Quick actions, your way
Cards and composed surfaces
Live Faye UI examples.
Coastal paths
Curated by Alex · 6 places
Room to wander, a place to pause. Save a few places for your next day outside.
Your collections
- Saved for later
standard image list
Coastal paths 
A slower morning 
Hidden gardens Weekend stories
quilted image list
Coastal paths A slower morning Hidden gardens Weekend stories
woven image list
Coastal paths A slower morning Hidden gardens Weekend stories
Packed collections
Coastal paths
A small collection for a new perspective.
A slower morning
A small collection for a new perspective.
Hidden gardens
A small collection for a new perspective.
Weekend stories
A small collection for a new perspective.
Old town
A small collection for a new perspective.
Open water
A small collection for a new perspective.
Interactive navigation and transitions
Live Faye UI examples.
Responsive collection tools
Create a collection
Motion and continuity
First
Second
Third
Discover view
Foundations
Live Faye UI examples.
Typography and semantic structure
Structure before decoration
A readable baseline for product interfaces.
Use semantic roles; the same tokens resolve in both schemes.
color.text is a meaning, not a palette index. Press Tab to explore.
A deliberately long title that may be truncated in a constrained layout while preserving the original text.
Additional screen-reader context.Icon artwork and compatibility
Surfaces and cards
Research workspace
Header, body and footer share spacing, not business rules.
Layout
Live Faye UI examples.
Responsive twelve-column grid
Stacks, inline groups and constrained width
Responsive split and query boundary
Column masonry
Item 1
Variable content height.
Variable content height.
Item 2
Variable content height.
Variable content height.
Variable content height.
Variable content height.
Item 3
Variable content height.
Variable content height.
Variable content height.
Item 4
Variable content height.
Variable content height.
Variable content height.
Variable content height.
Variable content height.
Item 5
Variable content height.
Variable content height.
Item 6
Variable content height.
Variable content height.
Variable content height.
Variable content height.
CSS columns preserve column-major reading order. This is not a row-packed JavaScript masonry engine.
Buttons and actions
Live Faye UI examples.
Variants and intent
Icons before and after labels
Persistent toggles and removable chips
Fields and forms
Live Faye UI examples.
Native submission and validation
Text areas and states
Advanced field composition
Compose a collection
This local form deliberately fails its first save so draft retention and retry can be tried. No server is contacted.
Selection controls
Live Faye UI examples.
Checkbox groups
Mutually exclusive options
Immediate state changes
Pickers
Live Faye UI examples.
Adaptive and native selection
Adaptive uses the native system picker when the primary pointer is coarse. Desktop keeps the themed popup.
Select
Searchable selection
Free-form autocomplete
Current suggestion:Autocomplete with dropdown actions
Multiple offices with removable chips
Grouped destinations
Scrollable selection
Numeric inputs
Live Faye UI examples.
Interaction variants
Classic
Listening volumeUp nextMinimal
Listening volumeUp nextSoft
Listening volumeUp nextHover, drag or use keyboard focus to compare the styles. Standard and enhanced levels work independently of each variant. Disabled controls keep their idle appearance.
Locale-aware number entry
Continuous and range sliders
Vertical sliders
One-time code
Grouped one-time code
Fractional, clearable rating
Dialogs and drawers
Live Faye UI examples.
Composed dialog
Scrollable dialog body
Nested scheme and portal inheritance
Alert dialog and convenience modal
Drawers
Gesture and snap-point drawer
Coordinated drawers and swipe activation
The visible buttons provide keyboard and pointer alternatives to swiping. Virtual-keyboard behavior still needs real-device qualification.
Floating content
Live Faye UI examples.
Cursor-following tooltip
Positioning without modal behavior
Popper only positions content. Applications provide semantics and dismissal where appropriate.
Explicit portal and backdrop primitives
This decorative backdrop preview does not create a modal or lock focus.
Menus
Live Faye UI examples.
Anchor sides, alignment and offsets
Placement follows logical direction and flips to stay inside the viewport.
Menu with checked state and submenu
Context menu with an ordinary action alternative
Application menubar
Navigation
Live Faye UI examples.
Accordion surfaces and indicators
Tabs
Accordion and disclosure
Toolbar and navigation menu
Location and progress
- Details
- Review
- Publish
Feedback
Live Faye UI examples.
Messages and compact statuses
Inline feedback with an action
Progress, meter and loading
Notifications
Custom toast anatomy
Anchored notification
Display
Live Faye UI examples.
Table structure and controlled pagination
| Status | |
|---|---|
| Project 01 | Draft |
| Project 02 | Active |
| Project 03 | Active |
| Project 04 | Draft |
| Project 05 | Active |
| Project 06 | Active |
| Project 07 | Draft |
| Project 08 | Active |
| Project 09 | Active |
| Project 10 | Draft |
| 23 total projects | |
Sort the project names or choose how many rows appear on each page.
Avatars, lists and bounded scrolling
The list scrolls first. At either end, scrolling continues through the page unless you choose to keep it inside the panel.
Image gallery
Coastal path 
City gardens 
Mountain trail
Image tiles keep artwork and captions together. Change the layout to compare the arrangements.
Order tracking timeline
- Order received
- Preparing your order
- Out for delivery
Use a vertical sequence or a horizontal journey. Narrow horizontal timelines can be scrolled sideways.
Motion
Live Faye UI examples.
Interruptible presence transitions
Application patterns
Live Faye UI examples.
Application shell
Projects
Application patterns compose the same primitives.
No projects in this example
Create a draft to begin.
Form section and transfer pattern
Command palette and optional action docks
Accessibility guidance
Live Faye UI examples.
Adaptive accessibility preferences
Focus guidance and floating hints
Use Tab to explore. Optional hints follow the focused control; labels and form help stay visible.
This name is visible only in this preview.
Focus: auto; hints: auto; contrast: system.
A local automatic scope
Read the complete example
'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>;
}