Library
7 components available— Unlock all with Pro
Design System Kit powers the nf tokens mode
Paste it once in App.Formulas, then copy any component with nf* tokens — rebrand or switch light/dark in one place.
Tabs
A horizontal tab bar with an active underline, driven by a variable. Read varTab to show or hide the matching panel.
navigationTop App Bar
An app header bar with a menu icon, title and action icons (search + avatar). Sits at the top of any screen.
navigationStepper
A horizontal progress stepper rendered as a pure Power Fx SVG Image: numbered circles, connectors and labels driven by a collection and a current-step variable. No PCF.
navigationJean Dupont
jean.dupont@company.com
Sidebar Navigation with User (Dark)
Full-height dark sidebar featuring a circular user avatar (User().Image), full name, email address, a subtle divider, and three nav buttons with icons. Fits a standard 1366×768 canvas layout.
navigationJean Dupont
jean.dupont@company.com
Sidebar Navigation with User (Accent)
Full-height sidebar with an accent background color, circular user avatar, name, email, and nav buttons with white icons. Swap the Fill color to match your brand.
navigationNav Menu Horizontal
A top horizontal navigation bar with multiple items and an active state indicator. Uses a blue underline to highlight the selected route.
navigationSidebar Nav
A vertical left-side navigation panel with icons and labels for each menu item. Supports an active highlight state using a blue background strip.
navigation