EL AYYACHI Said
"Passionate Power Platform developer focused on creating high-performance, reusable UI components that empower citizen developers."
Published Components
Classic Badge
Four badge variants (Default, Secondary, Destructive, and Outline) as pill-shaped Label controls. Paste all four and keep whichever variants you need. Inspired by the shadcn/ui Badge component.
Alert Destructive
A bordered error alert with a red circle-alert icon. Use it to communicate critical failures that require immediate user attention.
Dropdown Menu
A customizable dropdown menu that allows users to select an item from a list, displaying the selection in the button text.
Choice Card
A radio-selectable list of bordered choice cards: a legend + description header, then options each shown with a title, description, and radio indicator, with a highlighted border on the selected card. Inspired by the shadcn/ui Field/FieldSet Choice Card composition.
Date Picker
A fully custom date picker built from raw PA controls, not the native DatePicker control. Matches the shadcn/ui DatePicker design: trigger button with calendar icon + chevron flip animation, inline calendar panel with month navigation, 42-cell grid gallery. Variables: varDPOpen, varDPViewDate, varDPSelectedDate, varDPFirstDay. Initialize on Screen.OnVisible.
Sidebar
A collapsible left navigation sidebar: header with a toggle, a grouped icon-led menu with one nested sub-menu, and a footer user row. Inspired by the shadcn/ui Sidebar composition.
Line Chart - Linear
A sharp-edged linear line chart with straight segments between data points, powered by a Power Apps collection.
Area Chart
A smooth curved area chart powered by a Power Apps collection. Uses cubic bezier curves between data points.
Pie Chart - Donut with Text
A donut chart with the total value and a caption rendered in the center hole, a clock-sweep animation, and click-to-reveal tooltips via the legend. Powered by a Power Apps collection. Inspired by the shadcn/ui Pie Chart - Donut with Text.
Line Chart - Label
A smooth curved line chart with dots and value labels above each data point, powered by a Power Apps collection. Inspired by the shadcn/ui Line Chart - Label.
Radial Chart - Stacked
An animated upper-semicircle radial chart with two stacked arc segments sharing the same ring. Both segments grow together, filling 180° proportionally. The total is displayed at the center. Powered by a Power Apps Image control. Inspired by the shadcn/ui Radial Chart - Stacked.
Alert Warning
A bordered warning alert with a triangle icon in amber. Use it to flag non-critical issues that require user attention.
Popover
A button that opens a floating popover panel with a title and description: a simple info/settings card revealed on click. Inspired by the shadcn/ui PopoverBasic composition.
Checkbox
A checkbox component with six selectable variants: Default, With Description, Disabled, Invalid, Group, and Table (row selection with select-all). Inspired by the shadcn/ui Checkbox component. Pick a variant on the Settings tab; the preview and copyable YAML update together.
Bar Chart
A vertical bar chart powered by a Power Apps collection. Inspired by the shadcn/ui Bar Chart.
Drawer
A bottom-sheet overlay that slides up from the bottom of the screen: trigger button, dimmed backdrop (click to close), title, description, body text, and Confirm/Cancel actions. Built entirely from Horizontal/Vertical AutoLayout containers so it reflows responsively to whatever screen width it's pasted into. Inspired by the shadcn/ui Drawer component.
Bar Chart - Stacked + Legend
A stacked vertical bar chart with two data series (Category 1 + Category 2) and a centered SVG legend. Bars are stacked on a single axis with blue (Category 1) as the base and purple (Category 2) on top. Inspired by the shadcn/ui Bar Chart - Stacked.
Badges with Icons
18 badge variants across all four styles (Default, Secondary, Destructive, Outline), each paired with a Power Apps Classic icon on the left or right. Covers the most common real-world badge use cases: Verified, Saved, Featured, Alert, Beta, Pending, New, Active, Critical, Pro, Draft, Rejected, Approved, Review, Info, Locked, Expired, Shared.
Avatar Dropdown
A circular avatar button that opens a dropdown menu (Profile, Billing, Settings, and a destructive Log out action), using Power Apps' modern Avatar control for the avatar itself. Inspired by the shadcn/ui AvatarDropdown composition.
Radar Chart - Grid None
An animated radar (spider) chart with no background grid: only the filled polygon, dots at each vertex, axis labels, and a grow-from-center animation. Click-to-reveal tooltips via the legend. Powered by a Power Apps collection. Inspired by the shadcn/ui Radar Chart - Grid None.
Drawer Right Panel
A right-anchored side panel with a radio-selectable list: pick one option (with an optional badge and description per row), then confirm. Built with Horizontal/Vertical AutoLayout sections and a full-height, screen-responsive panel. Inspired by the shadcn/ui Drawer (right direction) component.
Button Group
A row of merged button clusters (a back-icon button, an Archive/Report pair, and a Snooze/More pair), each cluster's adjacent buttons sharing a continuous border with only the outer corners rounded. Inspired by the shadcn/ui ButtonGroup composition.
Radial Chart - Shape
An animated radial chart with a bold thick arc (28px ring, 100° sweep) that gives it a distinctive shape character. Features a center numeric value and label, animated grow effect, and a short arc track. Powered by a Power Apps Image control. Inspired by the shadcn/ui Radial Chart - Shape.
Simple Pagination
A single row of 5 numbered pagination links, one shown active. No Previous/Next arrows or ellipsis. Inspired by the shadcn/ui PaginationSimple composition.
Button Spinner
A disabled, secondary-style button showing a loading ring next to text: a loading/busy state indicator. Inspired by the shadcn/ui ButtonLoading composition.
Advanced Navigation
Previous/Next arrows plus 3 numbered page links and an ellipsis, one page shown active. Inspired by the shadcn/ui PaginationDemo composition.
Bar Chart - Horizontal
A horizontal bar chart powered by a Power Apps collection. Inspired by the shadcn/ui Horizontal Bar Chart.
Pie Chart
A solid pie chart with 5 color-coded slices, a clock-sweep animation, and click-to-reveal tooltips via the legend. Powered by a Power Apps collection. Inspired by the shadcn/ui Pie Chart.
Combobox Custom Labels
A single-select dropdown with rich two-line rows: a bold title plus a smaller muted description underneath each option. Click to browse, click a row to select. Options are fully configurable from the Settings tab. Inspired by the shadcn/ui Combobox (with custom items) component.
Popover with Form
A wider popover panel with a title, description, and a small 4-row form (Host/Port/Timeout/Retries): an editable settings card revealed on click. Inspired by the shadcn/ui PopoverDemo composition.
Area Chart Linear - Legend
A stacked area chart with two data series and sharp linear points. Inspired by the shadcn/ui Area Chart with Legend.
Button Search
A search input paired with an outline "Search" button, merged into one visually-connected group with a label above. Inspired by the shadcn/ui InputButtonGroup (Field + ButtonGroup) composition.
Area Chart - Linear
A sharp-line area chart powered by a Power Apps collection. Inspired by the shadcn/ui Area Chart: card layout with header, animated SVG area with L-path commands, and footer trend indicator.
Bar Chart - Multiple
A grouped bar chart with two series (Category 1 + Category 2) powered by a Power Apps collection. Inspired by the shadcn/ui Bar Chart - Multiple.
Button with Icon
An outline button pairing an icon with text, with the icon chosen from a curated set of Power Apps built-in icons. Inspired by the shadcn/ui ButtonWithIcon composition.
Classic Alert Dialog
A modal confirmation dialog triggered by a button. Uses a semi-transparent overlay to block interaction, with Cancel and Continue actions. Inspired by the shadcn/ui AlertDialog component.
Carousel
A dynamic card carousel with circular Previous and Next navigation buttons and a smooth 300 ms crossfade transition. Slide count adapts automatically to however many items are listed in galCarouselItems, no formula edits needed. The current slide number is stored in varCarouselIndex and displayed in a centered card. Inspired by the shadcn/ui Carousel component.
Collapsible Side Navigation
A responsive side navigation menu that expands and collapses, displaying icons or icons with text, and shows the current user's profile.
File Tree
A collapsible file/folder explorer with expandable directories and file/folder icons, under a simple "Explorer" header. Fully configurable from the Settings tab: add, remove, and re-parent items without touching PA formulas. Inspired by the shadcn/ui CollapsibleFileTree component.
Configurable Form Card
A customizable card component with a title, subtitle, and dynamic input fields, along with primary and secondary action buttons, designed for data collection.
Navigation Menu
A horizontal navigation bar with 3 toggle-dropdown menus (a simple list, a 2-column grid, and an icon-led list) plus one plain link item. Inspired by the shadcn/ui NavigationMenuDemo composition.
DropDown Multiple
A multi-select dropdown: click to toggle several options on/off, with a text summary of what's picked shown on the closed trigger. Options are fully configurable from the Settings tab. Inspired by the shadcn/ui Combobox (multiple) component.
Pie Chart - Label List
A pie chart with category labels rendered inside each slice, a clock-sweep animation, and click-to-reveal tooltips via the legend. Powered by a Power Apps collection. Inspired by the shadcn/ui Pie Chart - Label List.
Line Chart - Multiple
A smooth curved line chart with two data series (Category 1 + Category 2), powered by a Power Apps collection. Inspired by the shadcn/ui Line Chart - Multiple.
Spinners
A single loading spinner, chosen from 5 predefined animated styles (Spin, Ring, Dots, Bars, Pulse) with a custom color. Each animated natively via SVG, no Power Apps Timer needed. Inspired by the shadcn/ui Spinner composition.
Line Chart - Dots
A smooth curved line chart with filled dots at each data point, powered by a Power Apps collection. Inspired by the shadcn/ui Line Chart - Dots.
Pie Chart - Donut
A donut chart with a clock-sweep animation and click-to-reveal tooltips via the legend. The donut hole is rendered via an SVG circle overlay. Powered by a Power Apps collection. Inspired by the shadcn/ui Pie Chart - Donut.
Animated FAQ Accordion
Displays a list of questions and answers in an accordion style, with an animated arrow icon indicating the open/closed state of each item.
Radar Chart
An animated radar (spider) chart with a grow-from-center animation, axis labels, and click-to-reveal tooltips via the legend. Powered by a Power Apps collection. Inspired by the shadcn/ui Radar Chart.
Area Chart - Legend
A stacked area chart with two smooth data series and a legend. Inspired by the shadcn/ui Area Chart with Legend.
DropDown
A dropdown select with a searchable list: click to browse options, click again to select. Options are fully configurable from the Settings tab. Inspired by the shadcn/ui Combobox component.
Bar Chart - Label
A vertical bar chart that renders a numeric value label above each bar, powered by a Power Apps collection. Inspired by the shadcn/ui Bar Chart - Label.
Alert Success
A simple bordered alert box with an icon, title, and description. Directly inspired by the shadcn/ui Alert component.
Data Table
A full-featured data table: sortable columns, a search box, pagination, row-selection checkboxes, a column-visibility toggle, and per-row actions. Options are fully configurable from the Settings tab. Inspired by the shadcn/ui Data Table component.
Alert Destructive Animated
An animated error alert: slides in on appear and shows a red progress bar sweeping left to right. Powered by two PA Timer controls inside the group.
Radial Chart - Text
An animated radial (arc) chart with a center value and label, a grow animation from 0 to the target value, and a thin progress ring track. Powered by a Power Apps Image control. Inspired by the shadcn/ui Radial Chart - Text.
Payment Info
A checkout form: card details, an expiry/CVV grid, a billing-address checkbox, comments, and Submit/Cancel actions. Built entirely from nested Horizontal/Vertical AutoLayout sections. Inspired by the shadcn/ui Field/FieldSet checkout form example.
Line Chart
A smooth curved line chart powered by a Power Apps collection. Inspired by the shadcn/ui Line Chart.
Modern Tabs
A 4-tab switcher: a pill-style TabsList (a single Gallery of triggers) above a Card panel (Title/Description/Content) that swaps per tab. Inspired by the shadcn/ui Tabs composition.
Modern Questionnaire Form
A 3-step questionnaire wizard (a progress bar, single-select cards with descriptions, multi-select checkboxes, and a plain single-select list) with Previous/Skip/Next/Save actions. Inspired by the shadcn/ui QuestionnaireDemo composition.
Modern Info Card
A clean, versatile card container with a title, description, body content, and a two-button footer. Directly inspired by the shadcn/ui Card component structure.
Alert Success Animated
An animated success alert: slides in on appear and shows a green progress bar sweeping left to right. Powered by two PA Timer controls inside the group.
Radar Chart - Dots
An animated radar (spider) chart with filled dots at each data-point vertex, a grow-from-center animation, and click-to-reveal tooltips via the legend. Powered by a Power Apps collection. Inspired by the shadcn/ui Radar Chart - Dots.
Command
A search box paired with a grouped, icon-led command list: two headed groups, a separator, and one disabled item. Inspired by the shadcn/ui CommandDemo composition.