Button
.fgui-btnThe same 457 development components shown one underneath another at a more natural size.
components.html, but removes the DEV inventory cards and grid compression. Components are shown one per row with their type, name and Core class directly above them.Filter the complete component inventory by release status. Release badges are documentation metadata and are not built into the component itself.
6 real FG UI Core component families in this group.
.fgui-btn.fgui-btn-group.fgui-icon-btn.fgui-icon.fgui-brand-mark.fgui-brand-lockup11 real FG UI Core component families in this group.
.fgui-cardReusable FG UI content surface.
.fgui-avatar.fgui-avatar-group.fgui-media-card.fgui-file.fgui-status.fgui-tag.fgui-presence.fgui-counter.fgui-rating.fgui-meter7 stable structural primitives promoted from the existing Core layout layer.
.fgui-containerCentred with a stable maximum width.
.fgui-section.fgui-stack.fgui-cluster.fgui-grid.fgui-split.fgui-sidebar-layout25 real FG UI Core component families in this group.
.fgui-field.fgui-input.fgui-textarea.fgui-select.fgui-custom-select.fgui-search.fgui-input-group.fgui-input-affix.fgui-check.fgui-radio.fgui-switch.fgui-range.fgui-dropzone.fgui-password.fgui-password-strength.fgui-otp.fgui-tag-input.fgui-mention-picker.fgui-inline-edit.fgui-media-picker.fgui-upload-queue.fgui-date-picker.fgui-time-picker.fgui-month-picker.fgui-color-picker9 real FG UI Core component families in this group.
.fgui-alert.fgui-note.fgui-spinner.fgui-progress.fgui-loader.fgui-skeleton.fgui-empty-stateCreate your first item to get started.
.fgui-tooltip.fgui-toast6 real FG UI Core component families in this group.
.fgui-menu.fgui-accordion.fgui-modal.fgui-drawer.fgui-popoverSmall contextual surface.
.fgui-lightbox12 real FG UI Core component families in this group.
.fgui-table| Name | Status |
|---|---|
| FG UI | Active |
| FG Bible | Ready |
.fgui-list.fgui-stat.fgui-kv.fgui-tree.fgui-timeline.fgui-calendar.fgui-reorder-list.fgui-value-stack.fgui-inline-stat.fgui-value-delta.fgui-summary-row10 real FG UI Core component families in this group.
.fgui-mini-chart.fgui-bar-chart.fgui-donut.fgui-sparkline.fgui-carousel.fgui-countdown.fgui-media-frame.fgui-hotspot.fgui-gallery.fgui-back-to-top15 real FG UI Core component families in this group.
.fgui-content-rule.fgui-heading-groupSupporting text stays visually connected to the heading.
.fgui-icon-label.fgui-logo-tile.fgui-contact-line.fgui-social-link.fgui-address-block.fgui-media-objectSmall media and content pattern.
.fgui-figure.fgui-pullquoteA strong quotation can break up long-form content.
.fgui-byline.fgui-meta-row.fgui-citation.fgui-inline-code.fgui-meta-list15 real FG UI Core component families in this group.
.fgui-fieldset.fgui-choice-card.fgui-rating-input.fgui-number-stepper.fgui-currency-input.fgui-phone-input.fgui-url-input.fgui-date-range.fgui-search-suggestion.fgui-form-actions.fgui-donation-choice.fgui-vote-control.fgui-reaction-button.fgui-consent-row.fgui-copy-field5 distinct controls that add behaviour not covered cleanly by existing Basics.
.fgui-combobox.fgui-dual-range.fgui-character-counter.fgui-duration-input.fgui-tree-select12 real FG UI Core component families in this group.
.fgui-price.fgui-price-range.fgui-stock.fgui-sku.fgui-quantity.fgui-product-swatch.fgui-option-tile.fgui-shipping-estimate.fgui-payment-method.fgui-discount.fgui-tax-note.fgui-delivery-slot18 real FG UI Core component families in this group.
.fgui-reading-time.fgui-dateline.fgui-topic-label.fgui-thumbnail.fgui-audio-player.fgui-video-player.fgui-download-link.fgui-resource-link.fgui-footnote.fgui-image-stack.fgui-opening-hours.fgui-appointment-slot.fgui-event-date.fgui-score.fgui-quiz-option.fgui-answer-feedback.fgui-progress-ring.fgui-donation-amountOnly genuinely distinct primitives retained from the 450-component review.
.fgui-typing-indicator.fgui-repeatable15 real FG UI Core component families in this group.
.fgui-admin-page-heroManage site users and permissions.
.fgui-app-shellMain workspace inside the shell.
.fgui-filterbar.fgui-command.fgui-kanban.fgui-frontend-context-headerFrontend content context.
.fgui-prev-next.fgui-summary.fgui-danger-zoneDestructive actions are grouped clearly.
.fgui-split-view.fgui-table-toolbar| Example row | Active |
.fgui-editorEdit rich content here.
.fgui-settings-group.fgui-save-bar.fgui-permission-table16 repeatable finished patterns assembled from existing FG UI Basics.
.fgui-admin-dashboardOverview of the extension and its local data.
.fgui-admin-list-viewManage extension records.
| Title | Status |
|---|---|
| Welcome | Published |
.fgui-admin-edit-viewMain edit form plus publishing controls.
.fgui-admin-config-viewTabbed global extension settings.
.fgui-data-table| Name | State | |
|---|---|---|
| Chris | Enabled | |
| Alex | Pending |
.fgui-filter-builder.fgui-saved-views.fgui-bulk-actions.fgui-publishing-panel.fgui-menu-assignment.fgui-batch-actionsApply changes to the selected records.
.fgui-permissions-editor.fgui-extension-status.fgui-entity-picker.fgui-media-library.fgui-audit-log13 real FG UI Core component families in this group.
.fgui-user-card.fgui-composer.fgui-post.fgui-activity.fgui-chat.fgui-notification.fgui-comment-thread.fgui-notification-centre.fgui-bottom-nav.fgui-result.fgui-profile-header.fgui-article-card.fgui-articleLong-form article typography gives content a readable measure and consistent rhythm.
Reusable components keep interfaces consistent.
Use the existing FG UI component that matches the job.
8 reusable social/community patterns built from existing Basics.
.fgui-community-groupShare components, patterns and Joomla ideas.
.fgui-group-header.fgui-conversation-list.fgui-event-calendar.fgui-event-detailDiscuss new components and real-world builds.
.fgui-moderation-queue.fgui-member-management.fgui-invite-membersSend invitations by email.
12 real FG UI Core component families in this group.
.fgui-site-nav.fgui-marketing-heroReusable components, local icons and interaction patterns.
Everything uses the same design language.
.fgui-featureBuild once and use consistently across products.
.fgui-testimonialFG UI keeps the interface consistent without making every page feel identical.
.fgui-ctaUse FG UI components in your next interface.
.fgui-newsletter.fgui-site-footer.fgui-moduleReusable module/widget chrome.
.fgui-announcement.fgui-popup-cardReusable popup card for contextual messages.
.fgui-cookie-banner.fgui-special-stateThe page you requested could not be found.
8 repeatable page patterns that make complete websites faster to assemble.
.fgui-mega-menu.fgui-mobile-nav.fgui-global-search.fgui-cookie-preferences.fgui-faq-sectionEverything people usually ask before getting started.
.fgui-contact-sectionHave a question about a project? Send us a message.
.fgui-pricing-sectionCore essentials.
Everything for growing sites.
Advanced team features.
.fgui-feature-gridUse the same components everywhere.
One visual language across products.
Build larger patterns from Basics.
15 real FG UI Core component families in this group.
.fgui-auth-shellEnter your account details.
.fgui-auth-shell-altUse your email or phone number and password.
Your password is not stored in the browser.
.fgui-auth-cardEnter your details below.
.fgui-auth-boxCreate your account.
.fgui-security-cardAdd an extra layer of security.
.fgui-recovery-codesAB12-CD34EF56-GH78JK90-LM12NP34-QR56.fgui-device-list.fgui-onboarding.fgui-system-stateFG UI services are running normally.
.fgui-connection-state.fgui-maintenance-state.fgui-session-expiredPlease log in again to continue.
.fgui-secret-fieldfg_live_••••••••••••.fgui-webhook-row.fgui-help-card5 real FG UI Core component families in this group.
.fgui-pricing-toggle.fgui-price-cardFor small projects.
.fgui-product-cardReusable product-card component.
.fgui-cart-line.fgui-order-summary4 real FG UI Core component families in this group.
.fgui-code-block<button class="fgui-btn fgui-btn--primary">Save</button>.fgui-log-viewerFG UI initialised.
Components ready.
.fgui-rating-summary.fgui-filter-groups9 real FG UI Core component families in this group.
.fgui-service-cardProfessional fitting and maintenance.
View service.fgui-services-listFind the right service.
Professional appointment.
.fgui-business-profileHair extension specialist · Southport
Open today.fgui-contact-card.fgui-hours-card.fgui-location-card123 Example Street, Southport
.fgui-booking-card.fgui-team-cardSenior stylist
.fgui-review-card“Excellent service from start to finish.”
10 real FG UI Core component families in this group.
.fgui-category-card128 products
.fgui-product-gallery.fgui-product-detailReusable product detail pattern with options and actions.
.fgui-variant-selector.fgui-mini-cart.fgui-cart-summary.fgui-checkout.fgui-payment-methods.fgui-order-confirmationOrder #FG1024 has been received.
.fgui-wishlist-item8 real FG UI Core component families in this group.
.fgui-blog-heroIdeas, tutorials and practical UI guidance.
.fgui-featured-postHow a consistent system speeds up future builds.
.fgui-author-card.fgui-table-of-contents.fgui-share-bar.fgui-related-posts.fgui-content-series.fgui-archive-panel8 real FG UI Core component families in this group.
.fgui-resume-headerProduct builder · Joomla developer
.fgui-project-cardLocal Bible reader and Joomla component.
.fgui-project-gallery.fgui-case-studyOne consistent design system across every administrator page.
.fgui-experience-listProduct development and UI systems.
Web products and communities.
.fgui-skills-panel.fgui-logo-cloud.fgui-availability-card9 real FG UI Core component families in this group.
.fgui-leadership-card.fgui-org-chart.fgui-kpi-strip.fgui-office-card.fgui-job-card.fgui-job-detailBuild accessible product interfaces using FG UI.
.fgui-press-releaseNew reusable components for common website builds.
Read release.fgui-press-kitOfficial logos, screenshots and company information.
.fgui-compliance-panel8 real FG UI Core component families in this group.
.fgui-lead-form.fgui-trust-bar.fgui-benefit-listStart building immediately.
One reusable system.
.fgui-comparison-table| Feature | Basic | Pro |
|---|---|---|
| Components | 150 | 300 |
| Icons | 300 | 800 |
.fgui-guarantee-card.fgui-social-proof.fgui-product-showcaseShow the product, value and action together.
.fgui-conversion-panelJoin thousands of customers today.
9 real FG UI Core component families in this group.
.fgui-forum-categoryTalk with the community.
.fgui-forum-topic.fgui-forum-postI’ve been testing the new component inventory and it is working well.
.fgui-member-directory.fgui-community-sidebar.fgui-community-event7:00 PM · Online
.fgui-poll.fgui-reaction-bar.fgui-moderation-panel9 real FG UI Core component families in this group.
.fgui-course-cardLearn the core design system.
.fgui-lesson-card12 minutes · Video
.fgui-curriculum3 lessons · 42 min
5 lessons · 1h 12m
.fgui-instructor-card.fgui-quiz-card.fgui-certificate-cardAwarded to Chris Taylor
.fgui-learning-progress.fgui-resource-list.fgui-enrollment-card8 real FG UI Core component families in this group.
.fgui-article-heroA larger reusable library for common website builds.
.fgui-breaking-news.fgui-trending-list.fgui-category-nav.fgui-masthead.fgui-issue-coverComponents, accessibility and product craft.
.fgui-live-updateAll 800 FG UI icons have now passed review.
.fgui-news-gridFG UI adds website patterns.
Booking, reviews and contact patterns.
9 real FG UI Core component families in this group.
.fgui-donation-card.fgui-campaign-cardHelp provide meals for families in need.
.fgui-volunteer-cardHelp welcome visitors and organise activities.
.fgui-ministry-card.fgui-sermon-cardMatthew 14 · 32 min
.fgui-scripture-card“Let all that you do be done in love.”1 Corinthians 16:14Read chapter
.fgui-prayer-cardPlease pray for peace and guidance this week.
.fgui-impact-card.fgui-donation-form5 reusable FG UI 1.1 component families in this group.
.fgui-action-group.fgui-status-row.fgui-integration-rowConnected and responding normally.
.fgui-readiness-rowAll required details are present.
.fgui-comparison-row32 reusable FG UI 1.1 component families in this group.
.fgui-action-hub.fgui-needs-attention.fgui-upcoming-list.fgui-availability-picker.fgui-status-flow.fgui-requirement-cardAdd the missing information before continuing.
.fgui-account-accessFinish this task without creating an account.
Use saved details and history.
.fgui-identity-summary.fgui-balance-summary.fgui-price-breakdown.fgui-contextual-help.fgui-live-agent-shell.fgui-readiness-cardComplete
Passed
.fgui-secure-document-row.fgui-evidence-upload.fgui-privacy-requestRequested 29 September 2026.
.fgui-workspace-identity.fgui-schedule-agenda.fgui-resource-assignment.fgui-job-status.fgui-dashboard-emptyNew items will appear here automatically.
.fgui-metric-action.fgui-mobile-action-dock.fgui-time-context.fgui-allocation-summary.fgui-compliance-matrix.fgui-capacity-forecast.fgui-import-preview.fgui-exception-panelThis action is outside the normal rule and requires approval.
.fgui-workflow-evidence.fgui-guided-tour.fgui-metric-cardAdditive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.
.fgui-edge-nav.fgui-text-sizeReadable content responds without resizing the application chrome.
.fgui-reader-nav-mode.fgui-action-display.fgui-selection-menu.fgui-selection-actions.fgui-highlight-palette.fgui-annotation.fgui-bookmarkFG UI 1.2 theme controls plus the additive 1.3 Theme Composition foundation. FG UI 1.2 Stable contracts remain available unchanged.
.fgui-theme-switcher.fgui-theme-surfaceComponents inherit dark semantic tokens without changing the global theme.
Light can be restored inside a Dark region using the same component contracts.
.fgui-accent-pickerFG UI derives accessible Light/Dark semantic accent recipes from the chosen hue.
.fgui-theme-compatibility.fgui-preference-cardTheme, text size and navigation mode.
Additive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.
.fgui-health-findingThree legacy files can be removed safely.
.fgui-scan-bar.fgui-maintenance-checkCompare installed files with the expected package manifest.
.fgui-verification-resultInstalled files match the expected state.
.fgui-environment-status.fgui-package-status.fgui-batch-progress.fgui-lock-status.fgui-api-healthAdditive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.
.fgui-btn-alt.fgui-icon-btn-alt.fgui-card-altIndependent card treatment without changing .fgui-card.
.fgui-choice-card-alt.fgui-input-alt.fgui-textarea-alt.fgui-select-alt.fgui-custom-select-alt.fgui-search-alt.fgui-alert-altSoft semantic surface with compact message layout.
.fgui-status-alt.fgui-tabs-alt.fgui-accordion-alt.fgui-modal-alt.fgui-toast-alt.fgui-notification-altA compact inbox-style notification.
.fgui-table-alt| Item | Status |
|---|---|
| Assets | Healthy |
| API | Online |
.fgui-toolbar-alt.fgui-pagination-alt.fgui-side-nav-alt.fgui-settings-group-altControls are grouped in an inset settings panel.
.fgui-progress-alt.fgui-empty-state-altStart by creating your first item.
.fgui-danger-zone-altThis action cannot be undone.
Additive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.
.fgui-reader-settings.fgui-reading-shellA focused content width with reader-aware typography.
FG UI keeps the document readable while leaving navigation and application controls outside the reading measure.
The shell can be combined with text sizing, annotations and edge navigation.
.fgui-page-readerA page-oriented presentation for books, manuals and document readers.
.fgui-theme-card.fgui-theme-gallery.fgui-theme-previewTheme packages change semantic tokens, not component contracts.
.fgui-theme-installerValidate manifest, compatibility and token permissions before activation.
Additive 1.2 development families. Existing FG UI 1.1 contracts remain available unchanged.
.fgui-health-dashboardHealthy
Optional action available
.fgui-integrity-report.fgui-safe-repairThe file is known to be obsolete and is not referenced by the current package.
.fgui-package-dependencies.fgui-data-packageSample records for development and training.
.fgui-install-resultAll files, data migrations and health checks completed successfully.
.fgui-update-report.fgui-migration-assistant.fgui-uninstall-wizard.fgui-api-tester200 OK · 84 ms.fgui-integration-testerTest authentication, request and response handling.
.fgui-preference-manager
This is a comment.
And this is a reply.