Revenue
$128.4k
+4.2% vs last period
Metrics
ReadyKPI card
kpi-card
Label, value, delta, and a quiet sparkline for dashboard tiles.
Preview & YAML →Canvas components
Copy the YAML.
Import in Studio.
A dark, editorial catalog of Power Apps canvas components. Preview the mock, copy Source Code or PaYaml, paste via Import from code. No PCF. No auth. No AI editor.
Catalog
Three ready slots. Two coming soon.
ActiveReviewBlockedDraft
Filters
ReadyStatus chips
status-chips
Compact status pills for Active, Review, Blocked, and Draft.
Preview & YAML →- Request
- Review
- Build
- Ship
Progress
ReadyTimeline stepper
timeline-stepper
Horizontal steps with a connecting rail for request-to-ship flows.
Preview & YAML →Soon
Lists
SoonData table
data-table
Dense rows, column headers, and quiet hover states — pack incoming.
Maker pack not drafted yet.
Soon
Chrome
SoonNav rail
nav-rail
Collapsed / expanded app rail with section marks — pack incoming.
Maker pack not drafted yet.
Metrics · kpi-card
KPI card
A single metric tile: muted label, large value, signed delta, and a decorative sparkline. Paste the YAML into a canvas component and bind Title / Value / Delta.
Revenue
$128.4k
+4.2% vs last period
Copy the Maker Source Code pack, then in Power Apps Studio paste via Code view or Components → Import from code. Both tabs below are the same pack (roots: kpiCard / statusChips / timelineStepper).
- kpiCard:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderColor: |-
=Coalesce(gblAppColors.GrayMedium, RGBA(55, 65, 81, 1))
BorderThickness: =1
DropShadow: =DropShadow.Light
Fill: |-
=Coalesce(gblAppColors.Primary3, RGBA(22, 27, 34, 1))
Height: =148
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =6
LayoutMinHeight: =148
LayoutMinWidth: =220
PaddingBottom: =16
PaddingLeft: =18
PaddingRight: =18
PaddingTop: =16
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =280
Children:
- kpiCard_title:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
Color: |-
=Coalesce(gblAppColors.GrayMediumLight, RGBA(148, 163, 184, 1))
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
FontWeight: =FontWeight.Semibold
Height: =20
Size: =11
Text: ="Open requests"
Wrap: =false
- kpiCard_metric:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
Color: |-
=Coalesce(gblAppColors.White, RGBA(241, 245, 249, 1))
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Font: |-
=Coalesce(gblAppFonts.Heading, Font.'Open Sans')
FontWeight: =FontWeight.Bold
Height: =40
Size: =28
Text: ="128"
Wrap: =false
- kpiCard_metaRow:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Height: =28
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =10
LayoutMinHeight: =28
LayoutMinWidth: =0
Children:
- kpiCard_deltaChip:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: =RGBA(34, 197, 94, 0.35)
BorderThickness: =1
DropShadow: =DropShadow.None
Fill: =RGBA(34, 197, 94, 0.15)
FillPortions: =0
Height: =24
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutJustifyContent: =LayoutJustifyContent.Center
LayoutMinHeight: =24
LayoutMinWidth: =0
PaddingLeft: =8
PaddingRight: =8
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =72
Children:
- kpiCard_deltaLabel:
Control: Label@2.5.1
Properties:
Align: =Align.Center
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
Color: =RGBA(74, 222, 128, 1)
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =1
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
FontWeight: =FontWeight.Semibold
Height: =20
Size: =10
Text: ="▲ 12%"
Wrap: =false
- kpiCard_subtitle:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
Color: |-
=Coalesce(gblAppColors.GrayMedium, RGBA(148, 163, 184, 1))
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =1
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
Height: =20
Size: =11
Text: ="vs last 30 days"
Wrap: =false
Filters · status-chips
Status chips
A horizontal chip row for record state. Each chip is a rounded label with a status token. Bind Items as a table of { Label, Tone }.
ActiveReviewBlockedDraft
Copy the Maker Source Code pack, then in Power Apps Studio paste via Code view or Components → Import from code. Both tabs below are the same pack (roots: kpiCard / statusChips / timelineStepper).
- statusChips:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderColor: |-
=Coalesce(gblAppColors.GrayMedium, RGBA(55, 65, 81, 1))
BorderThickness: =1
DropShadow: =DropShadow.None
Fill: |-
=Coalesce(gblAppColors.Primary3, RGBA(22, 27, 34, 1))
Height: =88
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =8
LayoutMinHeight: =72
LayoutMinWidth: =280
PaddingBottom: =12
PaddingLeft: =14
PaddingRight: =14
PaddingTop: =12
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =Parent.Width
Children:
- statusChips_heading:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
Color: |-
=Coalesce(gblAppColors.GrayMediumLight, RGBA(148, 163, 184, 1))
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
FontWeight: =FontWeight.Semibold
Height: =18
Size: =11
Text: ="Pipeline status"
Wrap: =false
- statusChips_gallery:
Control: Gallery@2.15.0
Variant: Horizontal
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
DelayItemLoading: =false
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Height: =36
Items: |-
=Table(
{Id: 1, Label: "Intake", Tone: "neutral", Active: false},
{Id: 2, Label: "Triage", Tone: "info", Active: true},
{Id: 3, Label: "Review", Tone: "warn", Active: false},
{Id: 4, Label: "Decision", Tone: "success", Active: false}
)
LayoutMinHeight: =36
LayoutMinWidth: =0
Selectable: =false
ShowScrollbar: =false
TemplateFill: =RGBA(0, 0, 0, 0)
TemplatePadding: =4
TemplateSize: =108
Width: =Parent.Width
Children:
- statusChips_item:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderColor: |-
=Switch(
ThisItem.Tone,
"info", Coalesce(gblAppColors.Blue, RGBA(59, 130, 246, 1)),
"warn", Coalesce(gblAppColors.Orange, RGBA(245, 158, 11, 1)),
"success", Coalesce(gblAppColors.Green, RGBA(34, 197, 94, 1)),
Coalesce(gblAppColors.GrayMedium, RGBA(71, 85, 105, 1))
)
BorderThickness: |-
=If(ThisItem.Active, 1, 1)
DropShadow: =DropShadow.None
Fill: |-
=If(
ThisItem.Active,
ColorFade(
Switch(
ThisItem.Tone,
"info", Coalesce(gblAppColors.Blue, RGBA(59, 130, 246, 1)),
"warn", Coalesce(gblAppColors.Orange, RGBA(245, 158, 11, 1)),
"success", Coalesce(gblAppColors.Green, RGBA(34, 197, 94, 1)),
Coalesce(gblAppColors.GrayMedium, RGBA(71, 85, 105, 1))
),
-70%
),
RGBA(30, 41, 59, 1)
)
Height: =Parent.TemplateHeight - 4
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutJustifyContent: =LayoutJustifyContent.Center
LayoutMinHeight: =0
LayoutMinWidth: =0
PaddingLeft: =10
PaddingRight: =10
RadiusBottomLeft: =14
RadiusBottomRight: =14
RadiusTopLeft: =14
RadiusTopRight: =14
Width: =Parent.TemplateWidth - 8
Children:
- statusChips_dot:
Control: Label@2.5.1
Properties:
Align: =Align.Center
BorderStyle: =BorderStyle.None
Color: |-
=Switch(
ThisItem.Tone,
"info", Coalesce(gblAppColors.Blue, RGBA(96, 165, 250, 1)),
"warn", Coalesce(gblAppColors.Yellow, RGBA(251, 191, 36, 1)),
"success", Coalesce(gblAppColors.Green, RGBA(74, 222, 128, 1)),
Coalesce(gblAppColors.GrayMediumLight, RGBA(148, 163, 184, 1))
)
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
Height: =16
Size: =10
Text: ="●"
Width: =14
Wrap: =false
- statusChips_label:
Control: Label@2.5.1
Properties:
Align: =Align.Center
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
Color: |-
=If(
ThisItem.Active,
Coalesce(gblAppColors.White, RGBA(241, 245, 249, 1)),
Coalesce(gblAppColors.GrayMediumLight, RGBA(203, 213, 225, 1))
)
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =1
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
FontWeight: |-
=If(ThisItem.Active, FontWeight.Semibold, FontWeight.Normal)
Height: =20
Size: =11
Text: |-
=ThisItem.Label
Wrap: =false
Progress · timeline-stepper
Timeline stepper
A linear stepper: completed, current, and upcoming nodes on a hairline rail. Bind Steps and CurrentIndex. Replace this placeholder with the Maker pack.
- Request
- Review
- Build
- Ship
Copy the Maker Source Code pack, then in Power Apps Studio paste via Code view or Components → Import from code. Both tabs below are the same pack (roots: kpiCard / statusChips / timelineStepper).
- timelineStepper:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderColor: |-
=Coalesce(gblAppColors.GrayMedium, RGBA(55, 65, 81, 1))
BorderThickness: =1
DropShadow: =DropShadow.None
Fill: |-
=Coalesce(gblAppColors.Primary3, RGBA(22, 27, 34, 1))
Height: =320
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =8
LayoutMinHeight: =280
LayoutMinWidth: =260
PaddingBottom: =14
PaddingLeft: =14
PaddingRight: =14
PaddingTop: =14
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Width: =320
Children:
- timelineStepper_heading:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
Color: |-
=Coalesce(gblAppColors.GrayMediumLight, RGBA(148, 163, 184, 1))
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
FontWeight: =FontWeight.Semibold
Height: =18
Size: =11
Text: ="Progress"
Wrap: =false
- timelineStepper_gallery:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
DelayItemLoading: =false
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =1
Height: =260
Items: |-
=Table(
{Order: 1, Title: "Submit request", Detail: "Intake complete", State: "done"},
{Order: 2, Title: "Triage & classify", Detail: "Risk and owners set", State: "done"},
{Order: 3, Title: "Compliance review", Detail: "In progress", State: "current"},
{Order: 4, Title: "Decision", Detail: "Awaiting outcome", State: "upcoming"},
{Order: 5, Title: "Pilot / deploy", Detail: "Not started", State: "upcoming"}
)
LayoutMinHeight: =0
LayoutMinWidth: =0
Selectable: =false
ShowScrollbar: =false
TemplateFill: =RGBA(0, 0, 0, 0)
TemplatePadding: =0
TemplateSize: =52
Width: =Parent.Width
Children:
- timelineStepper_row:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
Height: =Parent.TemplateHeight
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =12
LayoutMinHeight: =0
LayoutMinWidth: =0
Width: =Parent.TemplateWidth
Children:
- timelineStepper_rail:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Vertical
LayoutJustifyContent: =LayoutJustifyContent.Center
LayoutMinHeight: =0
LayoutMinWidth: =28
Width: =28
Children:
- timelineStepper_marker:
Control: Classic/Button@2.2.0
Properties:
AlignInContainer: =AlignInContainer.Center
BorderColor: |-
=Switch(
ThisItem.State,
"done", Coalesce(gblAppColors.Green, RGBA(34, 197, 94, 1)),
"current", Coalesce(gblAppColors.Blue, RGBA(59, 130, 246, 1)),
Coalesce(gblAppColors.GrayMedium, RGBA(71, 85, 105, 1))
)
BorderThickness: =1
Color: |-
=Coalesce(gblAppColors.White, RGBA(241, 245, 249, 1))
DisplayMode: =DisplayMode.View
Fill: |-
=Switch(
ThisItem.State,
"done", Coalesce(gblAppColors.Green, RGBA(34, 197, 94, 1)),
"current", Coalesce(gblAppColors.Blue, RGBA(59, 130, 246, 1)),
RGBA(30, 41, 59, 1)
)
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
FontWeight: =FontWeight.Semibold
Height: =24
HoverBorderColor: |-
=Self.BorderColor
HoverColor: |-
=Self.Color
HoverFill: |-
=Self.Fill
PressedBorderColor: |-
=Self.BorderColor
PressedColor: |-
=Self.Color
PressedFill: |-
=Self.Fill
RadiusBottomLeft: =12
RadiusBottomRight: =12
RadiusTopLeft: =12
RadiusTopRight: =12
Size: =10
Text: |-
=If(ThisItem.State = "done", "✓", Text(ThisItem.Order))
Width: =24
- timelineStepper_connector:
Control: Label@2.5.1
Properties:
Align: =Align.Center
AlignInContainer: =AlignInContainer.Center
BorderStyle: =BorderStyle.None
Color: |-
=If(
ThisItem.State = "done",
Coalesce(gblAppColors.Green, RGBA(34, 197, 94, 1)),
Coalesce(gblAppColors.GrayMedium, RGBA(71, 85, 105, 1))
)
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
Height: =20
Size: =10
Text: ="│"
Visible: |-
=ThisItem.Order < 5
Width: =24
Wrap: =false
- timelineStepper_copy:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
DropShadow: =DropShadow.None
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =1
LayoutAlignItems: =LayoutAlignItems.Stretch
LayoutDirection: =LayoutDirection.Vertical
LayoutGap: =2
LayoutJustifyContent: =LayoutJustifyContent.Center
LayoutMinHeight: =0
LayoutMinWidth: =0
PaddingBottom: =4
PaddingTop: =4
Children:
- timelineStepper_title:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
Color: |-
=Switch(
ThisItem.State,
"upcoming", Coalesce(gblAppColors.GrayMedium, RGBA(148, 163, 184, 1)),
Coalesce(gblAppColors.White, RGBA(241, 245, 249, 1))
)
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
FontWeight: |-
=If(ThisItem.State = "current", FontWeight.Semibold, FontWeight.Normal)
Height: =18
Size: =12
Text: |-
=ThisItem.Title
Wrap: =false
- timelineStepper_detail:
Control: Label@2.5.1
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.None
Color: |-
=Coalesce(gblAppColors.GrayMedium, RGBA(100, 116, 139, 1))
Fill: =RGBA(0, 0, 0, 0)
FillPortions: =0
Font: |-
=Coalesce(gblAppFonts.Body, Font.'Open Sans')
Height: =16
Size: =10
Text: |-
=ThisItem.Detail
Wrap: =false