Basic
Button + card + status
Small pieces stay reusable and predictable.
Getting started
Start building with FG UI in a few lines.
FG UI is intentionally simple to integrate. Copy the local assets, load the stylesheet and JavaScript, add the fgui class to your page wrapper, then use components.
This preview site is running FG UI 1.2.0.
Use the normal documentation for stable integration guidance, and see What’s new in 1.2 for the 64 additive families and new theme/reader namespaces.
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.
Never built a website before?
Start with the beginner guide.
You do not need to understand frameworks, package managers or build tools. The beginner guide explains folders, HTML, CSS and FG UI in plain English, then walks through a real page from start to finish.
01
Quick start
The stable package does not require a build tool, package manager or external framework.
<link rel="stylesheet" href="assets/css/fgui.css?v=1.2.0">
<body class="fgui">
<button class="fgui-btn fgui-btn--primary">
Save changes
</button>
<script src="assets/js/fgui.js?v=1.2.0"></script>
</body>Use the
fgui wrapper.FG UI scopes its interface system through the FG UI wrapper so component typography and box sizing are applied consistently.
02
Runtime files
assets/css/fgui.css
RequiredComplete stylesheet, tokens, layout primitives and all component styling.
assets/js/fgui.js
RequiredInteractive components and the public JavaScript API.
assets/icons/fgui-icons.svg
AssetLocal SVG sprite containing the 800 stable icon IDs.
assets/fonts/manrope/variable/
AssetSix local WOFF2 subsets used by the default FG UI font stack.
03
Use components directly
The Basic layer contains reusable primitives. The Combined layer composes those primitives into larger product patterns.
Combined pattern
Use larger patterns when you need complete application or website sections quickly.
04
Use local icons
<svg class="fgui-icon" aria-hidden="true">
<use href="assets/icons/fgui-icons.svg?v=1.2.0#fgui-icon-search"></use>
</svg>The icon sprite is local, so the interface does not wait for a third-party icon network request.
05
Public JavaScript API
FG UI exposes a deliberately small public API for integration and dynamic content.
FGUI.init(root)
Initialise supported interactions inside a root.
FGUI.open()
Open a supported controlled surface.
FGUI.close()
Close a supported controlled surface.
FGUI.toggle()
Toggle supported component state.
FGUI.toast()
Trigger FG UI toast feedback.
FGUI.icon()
Work with the local icon system.
FGUI.configure()
Configure supported runtime options.
FGUI.getLocale()
Read the current FG UI locale state.
FGUI.t()
Resolve runtime localisation strings.
06
Integration principles
1
Use the core first
Prefer existing tokens, utilities and components before adding project-specific styling.
2
Compose instead of duplicating
Use Basic components to build unique screens and Combined patterns to accelerate common product structures.
3
Keep assets local
The stable package is designed so your interface can run without a CDN or external UI service.
07
Web documentation reference
Component reference
All 457 Stable families, root classes, release status, hooks, modifiers and accessibility attributes.
Accessibility
Core expectations, advanced controls, automated gates and manual release checks.
Browser support
Supported browsers, modern platform features and fallback policy.
Versioning
Stable release and compatibility policy for future updates.
Next step
See the system in action.
Move from setup into the visual component showcase, then review the testing and stability work behind the release.