Component Showcase
This page is a living catalog of the shared building blocks we develop for this project. Add new sections here as more reusable components are introduced.
GroupCard
Shared layout container
GroupCard is the standard wrapper for grouped content with a title, optional audit text,
header actions, and a content area.
Preview
Nested example
Use this component when a page needs a clear section boundary and optional actions in the header.
FacetFilter
Interactive demo
FacetFilter renders selectable badges for simple faceted filtering. The demo below toggles
a local selection set.
Active selection: None
ConfirmDialog
Shared dialog content component
ConfirmDialog is the content component used for confirmation dialogs. It accepts a message
payload and is intended to be hosted inside the Fluent dialog infrastructure.
Property | Description |
|---|---|
| Message | Primary confirmation text shown in the dialog body. |
| Dialog | Cascading Fluent dialog host provided by the surrounding dialog infrastructure. |
ImageComponent
Image upload with focus point
ImageComponent provides interactive image upload with focus point selection via click or keyboard.
Users can upload files, set a focus point with a crosshair, and preview how the image crops in different aspect ratios.
Product Image
Upload and set focus point
Drag & drop or browse
JPG, PNG, WebP — max 5 MB
Click to set focus point • Use arrow keys to adjust (±1%)
Portrait (9:16)
Landscape (16:9)
Focus point: X = 50.ToString("F0")%, Y = 50.ToString("F0")%
Typeahead
Async suggestions with triggerable actions
Typeahead combines free-text search, async suggestions, item selection, and zero-to-many action buttons.
The demo below uses a fake async search source and reports both parent-observed selection changes and the generated GET requests.
Parent observed selection: None
Current query text: None
Last triggered URL: None
Last trigger status: None