Library
41 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.
Something went wrong
Check your connection and try again.
Try againError State
A clear “something went wrong” block: red icon, message and a retry action. Pair it with IfError / Connection.Connected to keep failures friendly.
statesLoading Skeleton
A card-shaped loading placeholder made of muted bars — the modern alternative to a spinner. Show it while your OnVisible collections load.
statesNo records yet
Create your first record to get started.
+ Create recordEmpty State
A friendly “no data yet” placeholder: icon, title, helper text and a primary action. Drop it over any gallery with Visible bound to IsEmpty(yourSource).
statesInfo Banner
A dismissible full-width banner for announcements and warnings: icon, message and a close button, toggled by a variable. Visible on paste.
statesTooltip
A small text bubble with a pointer, shown via a variable on hover or press. Position it next to the element it explains.
overlayToast / Snackbar
A bottom notification with an icon dot, message and optional action button, toggled by a variable. Add a Timer for auto-dismiss.
feedbackTabs
A horizontal tab bar with an active underline, driven by a variable. Read varTab to show or hide the matching panel.
navigationToggle
A labeled on/off row built on the native toggle control, in a styled card. Read ToggleInput.Value anywhere.
formsTop App Bar
An app header bar with a menu icon, title and action icons (search + avatar). Sits at the top of any screen.
navigationDrag files here or browse
PDF, PNG or DOCX — up to 10 MB
Browse filesFile Upload
A polished file-upload card (drop-zone look, icon, hint and Browse button). A styled shell to pair with the native Attachments or Add picture control for the actual file picking.
formsSelect a date
Selected: 30 Jun 2026
Date Picker
A styled date field built on the native Power Apps date picker, with a label and a formatted, localized read-out of the selected date. Restyle via the group; read DpInput.SelectedDate anywhere.
formsStepper
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.
navigationcolors · spacing · radius · type
Design System Kit
A complete copy-paste Power Apps design system as named formulas: theme-aware colors (light/dark), spacing scale, radius and typography tokens. Paste once in App.Formulas and reference everywhere.
themingData Table
An enterprise-grade Power Apps data table built on a vertical Gallery: sticky header, zebra striping, colour-coded status cell and clickable rows. Binds to any data source and is ready to sort with SortByColumns.
tablesSVG Bar List
A ranked horizontal bar list (top categories) rendered as a pure Power Fx SVG Image, with a track, value bar, label and value per row. No premium connectors or PCF.
chartsTrend
SVG Line Chart
A smooth, auto-scaling line chart rendered as a pure Power Fx SVG Image, with data points and axis labels from a Label/Value collection. No premium connectors or PCF.
chartsSVG Donut Chart
A donut (or pie) chart rendered as a pure Power Fx SVG Image using stroke-dasharray segments, driven by a collection with Value and Color per slice. No premium connectors or PCF.
chartsSVG Heatmap
A grid heatmap (activity / intensity) rendered as a pure Power Fx SVG Image, with cell opacity scaled to value, driven by a flat Col/Row/Value collection. No premium connectors or PCF.
chartsMonthly revenue
SVG Bar Chart
An auto-scaling bar chart rendered as a pure Power Fx SVG Image — labelled bars, value tops and a title, driven by a Label/Value collection. No premium connectors or PCF required.
chartsFilter Chips
A horizontal gallery of filter chips for status-based filtering. Items default to ["Tous", "Complet", "Incomplet", "Non Traité"]. The selected chip gets a colored background. Bind the Selected.Value to your gallery Items filter.
formsToggle Visibility Button
A compact icon button that toggles between a "show" (eye open) and "hide" (eye closed) state. Uses UpdateContext to flip a boolean variable. Drop it next to a gallery or list to let users show or hide inactive records.
buttonsGallery List Row
A clickable card row for use inside a Gallery. Features a colored icon badge on the left, a conditional status indicator (red/orange/green SVG, controlled by a status variable), a bold title, an optional subtitle, and a full-width transparent overlay button for navigation. Swap Fill, Icon and OnSelect to match your data source.
listsProgression des sujets
20 éléments — 9 complets / 6 incomplets / 5 non traités
Progress Bar (3 Segments)
A horizontal progress bar split into three colored segments: green for complete items, orange for incomplete, and red (remaining space) for untreated. Widths are driven by CountIf formulas on a collection. Includes a summary label. Adapt the CountIf conditions to your own status field.
chartsSearch Bar (Pill)
A clean pill-shaped search bar with a white background, drop shadow, search icon on the left, and a borderless text input. The Clear property is enabled. Adapt HintText and OnChange to your use case.
formsProjet
Créez ou accédez à vos projets
Clients
Gérez votre portefeuille
Action Card
A clickable card with a colored icon block on the left, a bold title, and a short description. A transparent button overlay handles navigation. Ideal for home screens and dashboards.
cardsCréer un client
Remplissez les informations ci-dessous.
Nom *
Description
Form Modal
An overlay modal dialog with a darkened backdrop, title, subtitle, two labeled text inputs, a close button, and Cancel / Save buttons. Uses a varShowFormModal boolean to toggle visibility.
modalsJean 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.
navigationAccueil / Section / Page actuelle
Titre de la page
Sous-titre ou description de la section.
Page Header
A lightweight page header with a breadcrumb trail, a bold page title, and a muted subtitle. Drop it at the top of any content area for consistent screen-level navigation context.
layoutPrimary Button
A bold, filled blue button with rounded corners for primary call-to-action use. Features a clean label centered on a solid blue background.
buttonsSecondary Button
An outlined button with a transparent background for secondary actions. Uses a subtle border and muted label to complement primary actions.
buttonsNav Menu Horizontal
A top horizontal navigation bar with multiple items and an active state indicator. Uses a blue underline to highlight the selected route.
navigationIcon Button
A compact square button displaying a centered icon, ideal for toolbars and action menus. Built with a rounded container and a Power Apps icon.
buttonsSimple Dropdown
A clean, minimal single-select dropdown for forms. Styled with a dark background and subtle border to match a modern UI.
formsSearch Bar
A text input field with a magnifier icon for search interactions. Combines a styled text input and icon in a rounded container.
formsSidebar 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.
navigationData List
A structured list component displaying rows of data with alternating background colors for readability. Ideal for tabular data without a full grid.
tablesTotal Revenue
$48,250
Stats Card
A KPI card displaying a key metric, its label, and a trend indicator with color-coded direction. Ideal for dashboard summary sections.
cardsBadge / Tag
A small, pill-shaped status badge for labeling items with a color-coded state such as Active, Inactive, or Pending. Lightweight and composable.
buttonsDelete record?
This action cannot be undone. The record will be permanently deleted.
Confirmation Modal
A confirmation dialog with a title, a customisable message and two action buttons. Use it to guard destructive or irreversible actions before they run.
modalsInformation
Your changes have been saved successfully.
Info Modal
An information dialog with an icon, title and message. Ideal for success feedback, notifications and inline help, shown over a dimmed backdrop.
modals