/* ============================================================ F2 UI — Overview page (group: Overview, page:true) ============================================================ */ (function () { const F2 = window.F2; const { Icon } = F2; function Principle({ icon, title, body }) { return (
{title}
{body}
); } function CatRow({ icon, name, items, count }) { return (
{name} {count}
{items}
); } window.story({ id: 'overview', group: 'Overview', name: 'Introduction', page: true, render: function () { const total = window.F2Stories.filter((s) => !s.page).length; return (
{/* hero */}
F2 Technologies · Component Library

A shared library, engineered to fit.

Every building block for F2 marketing sites and client panels — built on the F2 design tokens, themeable dark and light, documented with live controls, code, and accessibility notes. Reuse across projects without rebuilding.

{[['Components', total], ['Categories', 8], ['Themes', 2], ['Tokens', '3-layer']].map(([k, v]) => (
{v}
{k}
))}
{/* principles */}

Principles

{/* categories */}

What's inside

Tips. Press / to search. Use the viewport and theme toggles (top-right) to preview any component responsively in dark or light. Every component ships a copy-paste snippet and a props table.
); }, }); })();