Component system

457 component families in the current 1.2 Stable release.

FG UI 1.2.0 combines 223 Basic components with 234 Combined patterns. The 393-family FG UI 1.1.0 contract remains the compatibility baseline and is preserved in full.

1.2.0 Stable

The catalogue now reaches 457 families.

FG UI 1.2 adds 64 families across reader tools, themes, health/maintenance, integrations and an explicit ALT collection. The 393-family 1.1 compatibility contract remains preserved.

See all 64 additions
223 Basic234 Combined393-family 1.1 baseline64 new 1.2 additions
Built entirely with FG UI.

Every layout, component, interaction, icon and interface pattern on this website is powered by FG UI itself. No Bootstrap, Tailwind or external UI framework is used.

223Basic families
234Combined families
457Stable families
800icon IDs
New in FG UI 1.1.0

Reusable patterns proven in real product work.

1.1.0 adds 47 new families across navigation, authentication, data/value presentation, operations, portals and workflow interfaces.

47 NEW13 UPDATED
NEW

Navigation count link

Icon, label and an optional accessible count in one reusable navigation link.

Messages3
NEW

Metric card

A compact reusable KPI for money, counts, usage, attendance and other key values.

Expected today
£3,840£1,210 already paid
Basic layer

Small, reusable building blocks.

These are the pieces you reach for constantly. They stay visually consistent and compose into larger patterns without locking you into a page builder.

Actions

Buttons & status

ReadyReviewErrorTag
Forms

Native-first fields

Feedback

Progress & messages

Everything belongs to the same system.

States, spacing, typography and controls share the same token layer.

Stable 1.1.0Local
Application UI

Patterns that look like a product, not a component demo.

The Combined layer reduces repetitive assembly work for dashboards, settings, data-heavy views and system screens.

LiveDashboard

Product metrics

24.8kactive users
98.7%successful jobs
42msUI response
0external dependencies
Navigation

Tabs & disclosure

FG UI synchronises interaction state and accessibility relationships for the components that need JavaScript enhancement.
Marketing & websites

Ready-made patterns for polished public sites.

FG UI includes website patterns for navigation, heroes, features, content, CTAs, FAQs, contact areas and footers.

Launch sections

Heroes, value propositions, CTAs and responsive layout patterns that can be assembled quickly.

Content patterns

Featured posts, tables of contents, metadata, article structures and content-oriented components.

Conversion patterns

Newsletter, contact, lead and action sections that share the same visual foundation.

Authentication

Account flows that feel like part of the same product.

Secure

Sign in to your workspace

Authentication cards and shells use the same form, button and status language as the rest of FG UI.

Security state

Clear system feedback

Two-step verification available

Security and system patterns are part of the Combined library, not an afterthought.

  • Consistent controls
  • Clear focus states
  • Accessible labels
  • Responsive account layouts
Pricing & commerce

Commerce components without importing a second design language.

Starter pattern

Product card

Use the pricing and commerce layer to keep purchase flows consistent with the rest of your interface.

  • Feature lists
  • Clear actions
  • Responsive cards
FG UICombined pattern

Ready to compose

Pricing, order and product components sit on top of the same tokens and controls as your application UI.

  • Same typography
  • Same spacing
  • Same interaction language
Combined component showcase

Build whole product areas, not just individual controls.

The Combined layer packages common real-world structures so you can start much closer to a finished screen.

215 Combined families
Admin dashboard

Workspace overview

Combine the hero, statistics, alerts and actions into one coherent admin surface.

All systems normal
Users
24.8k
+12% this month
Jobs
98.7%
Successful
Response
42ms
Median UI response
Dependencies
0
Runtime frameworks
To do2
Build settings pageCombined admin pattern
Add billing flowCommerce components
In progress2
Responsive QATesting
Accessibility passReview
Done2
Navigation systemComplete
Design tokensComplete
Notification centreA complete Combined pattern
New release available

FG UI 1.1.0 Stable is ready.

QA complete

Browser and device validation passed.

Project setup3 of 4 steps complete
FG

FG UI Community

Public12,480 members

Order summary

FG UI licenceExample
UpdatesIncluded
TotalSet by your plan
Interactive components

Try the interactive components.

These examples are powered by the same stable FG UI JavaScript file used by the rest of the site.

Live interactions
FG
Combined

Build complete product areas

Use larger patterns for dashboards, authentication, content, community and commerce.

457
System

Compose 457 current Stable families

Mix Basic primitives with Combined patterns while keeping one visual language.

800
Local assets

Use 800 stable icon IDs

The icon sprite stays local to your product and uses the same API across components.

Explore icons
Accordion

Common questions

Keyboard-aware disclosure with ARIA state handled by FG UI.

No. FG UI is framework-independent and has zero runtime framework dependencies.
Yes. The Combined layer is designed to accelerate complete screens and product patterns.
Live actions

Modal, toast and tabs

Small JavaScript behaviours stay inside the same runtime.

Full reference

Go beyond the guided showcase.

Browse the full web reference covering all 457 current Stable families — the 393-family Stable baseline plus 64 additive 1.2 Stable families — with roots, runtime profile, hooks, child classes, modifiers and accessibility attributes.

Open component referenceIntegration guide