Custom Components

Custom Components

Nimbus includes a suite of high-quality, pre-styled components inspired by Windows 11 Fluent Design.

Jump to

1. GlassCard

A container with a frosted glass effect (Acrylic/Blur). Perfect for modern UI layouts.

Glass Effect

This card has a beautiful blur background and border.

App.xml 
<GlassCard 
    Background="#2D2D2D" 
    CornerRadius="12" 
    Padding="20"
    BorderColor="#FFFFFF1A">
    
    <TextBlock Text="Glass Effect" FontSize="18" FontWeight="Bold"/>
    <TextBlock Text="This card has a beautiful blur..."/>
    
</GlassCard>

2. StatCard

A ready-made card for displaying statistics, commonly used in dashboards.

👥
2,543
Total Users
💰
$45K
Revenue
<StatCard 
    Icon="👥" 
    Value="2,543" 
    Label="Total Users" 
    AccentColor="#0078D4"/>

<StatCard 
    Icon="💰" 
    Value="$45K" 
    Label="Revenue" 
    AccentColor="#107C10"/>

A styled input field with icon and optional action button.

🔍 ➤ 
<SearchBar 
    Placeholder="Search..." 
    Icon="🔍" 
    ShowButton="true" 
    AccentColor="#0078D4"/>

4. Avatar & Badge

Profile pictures and notification counters.

👤
AB
New
5
<Avatar Icon="👤" Size="48" Background="#3D3D3D"/>

<Avatar Text="AB" Size="48" CornerRadius="8"/>

<Badge Text="New" Background="#F44336"/>

<Badge Count="5" Background="#0078D4"/>

Sidebar navigation item with icon and label. Supports active state.

🏠 Home
⚙️ Settings 
<NavItem 
    Icon="🏠" 
    Label="Home" 
    Active="true" 
    AccentColor="#0078D4"/>

<NavItem 
    Icon="⚙️" 
    Label="Settings"/>