Ready
Popular
Free
Dashboard Template
Projects
Documentation
Community
Support
+ New project
All projects
P
Planetaria
planetaria.app
P
Protocol
protocol.dev
T
Tailwind Labs
tailwindlabs.com
C
Commerce API
api.commerce.dev
Recent activity
Deployment completed
2m
New project created
15m
Deployment failed
1h
Domain updated
3h
4 components
Dark theme
Responsive
Sample data
Projects Dashboard
Complete project management dashboard with sidebar, header, and activity feed
A fully functional project management dashboard template for Power Apps. Features a dark sidebar navigation, modern header with search and actions, a projects list with status indicators, and a real-time activity feed. Perfect for project management, team collaboration, and workspace apps.
Dark sidebar navigation
Project list with status
Activity feed
Sample data included
Header with search
Responsive layout
Required Components
Requires Modern controls enabled. Go to Settings → Updates → Preview → Modern controls and themes.
Template YAML
Copy-paste readyScreens:
Projects:
Properties:
LoadingSpinnerColor: =RGBA(56, 96, 178, 1)
Children:
- Container4:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Fill: =RGBA(27, 39, 57, 1)
Height: =Parent.Height
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Width: =Parent.Width
Children:
- DarkSidebarNavigation_1:
Control: CanvasComponent
ComponentName: DarkSidebarNavigation
Properties:
AccentColor: =RGBA(99, 102, 241, 1)
Fill: =DarkSidebarNavigation_1.SidebarColor
Height: =App.Height
LogoText: =""
MenuItems: |-
=Table(
{
ID: 1,
Title: "Projects",
IconName: "folder",
Section: "Navigation"
},
{
ID: 2,
Title: "Deployments",
IconName: "deploy",
Section: "Navigation"
},
{
ID: 3,
Title: "Activity",
IconName: "activity",
Section: "Navigation"
},
{
ID: 4,
Title: "Domains",
IconName: "globe",
Section: "Navigation"
},
{
ID: 5,
Title: "Usage",
IconName: "chart",
Section: "Navigation"
},
{
ID: 6,
Title: "Settings",
IconName: "settings",
Section: "Navigation"
}
)
OnMenuSelect: =false
SectionTitle: ="Navigation"
SelectedMenuID: =1
SidebarColor: =RGBA(20, 31, 48, 1)
Width: =238
- Container5:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
DropShadow: =DropShadow.None
Height: =Parent.Height
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Vertical
LayoutMinHeight: =0
LayoutMinWidth: =0
RadiusBottomLeft: =0
RadiusBottomRight: =0
RadiusTopLeft: =0
RadiusTopRight: =0
Children:
- DarkHeader_1:
Control: CanvasComponent
ComponentName: DarkHeader
Properties:
AccentColor: =RGBA(99, 102, 241, 1)
BackgroundColor: =RGBA(20, 31, 48, 1)
BorderColor: =RGBA(42, 55, 73, 1)
Fill: =DarkHeader_1.BackgroundColor
Height: =60
Links: |-
=Table(
{ID: 1, Title: "Documentation"},
{ID: 2, Title: "Community"},
{ID: 3, Title: "Support"}
)
OnLinkSelect: =false
OnPrimarySelect: =false
PrimaryButtonText: ="+ New project"
SearchPlaceholder: ="Search projects..."
Width: =Parent.Width
- Container6:
Control: GroupContainer@1.5.0
Variant: AutoLayout
Properties:
LayoutAlignItems: =LayoutAlignItems.Center
LayoutDirection: =LayoutDirection.Horizontal
LayoutMinHeight: =0
LayoutMinWidth: =0
PaddingBottom: =8
PaddingTop: =8
Width: =Parent.Width
Children:
- AllProjects_1:
Control: CanvasComponent
ComponentName: AllProjects
Properties:
BackgroundColor: =RGBA(27, 39, 57, 1)
BorderColor: =RGBA(42, 55, 73, 1)
Data: |-
=Table(
{
ID: 1,
Name: "Planetaria",
Domain: "planetaria.app",
LastDeployed: "2 minutes ago",
Branch: "main",
Status: "Ready",
IconText: "P",
IconColor: RGBA(99, 102, 241, 1)
},
{
ID: 2,
Name: "Protocol",
Domain: "protocol.dev",
LastDeployed: "18 minutes ago",
Branch: "main",
Status: "Ready",
IconText: "P",
IconColor: RGBA(16, 185, 129, 1)
},
{
ID: 3,
Name: "Tailwind Labs",
Domain: "tailwindlabs.com",
LastDeployed: "1 hour ago",
Branch: "main",
Status: "Building",
IconText: "T",
IconColor: RGBA(14, 165, 233, 1)
},
{
ID: 4,
Name: "Commerce API",
Domain: "api.commerce.dev",
LastDeployed: "3 hours ago",
Branch: "production",
Status: "Error",
IconText: "C",
IconColor: RGBA(245, 158, 11, 1)
}
)
Fill: =AllProjects_1.BackgroundColor
Height: =Parent.Height
OnProjectSelect: =Set(varPop, true)
OnViewAll: =false
RowColor: =RGBA(27, 39, 57, 1)
Title: ="All projects"
ViewAllText: ="View all"
Width: =760
- ActivityFeed_1:
Control: CanvasComponent
ComponentName: ActivityFeed
Properties:
BackgroundColor: =RGBA(20, 31, 48, 1)
BorderColor: =RGBA(42, 55, 73, 1)
Data: |-
=Table(
{
ID: 1,
Title: "Deployment completed",
Description: "Production deployment completed successfully.",
Time: "2 minutes ago",
UserName: "Qiyamuddin Ahmadzai",
Initials: "QA",
IconName: "deploy",
Status: "success"
},
{
ID: 2,
Title: "New project created",
Description: "A new project was added to the workspace.",
Time: "15 minutes ago",
UserName: "Ahmad Khan",
Initials: "AK",
IconName: "folder",
Status: "info"
},
{
ID: 3,
Title: "Deployment failed",
Description: "Production build failed during deployment.",
Time: "1 hour ago",
UserName: "Sara Ali",
Initials: "SA",
IconName: "error",
Status: "error"
},
{
ID: 4,
Title: "Domain updated",
Description: "Custom domain settings were successfully changed.",
Time: "3 hours ago",
UserName: "Admin User",
Initials: "AU",
IconName: "globe",
Status: "warning"
}
)
Fill: =Color.Transparent
Height: =Parent.Height
OnActivitySelect: =false
OnViewAll: =false
ShowViewAll: =true
Subtitle: ="Latest updates across your projects"
Title: ="Recent activity"
Width: =Parent.Width/2