Examples

Real-World Examples

Explore complete, production-ready applications built with Nimbus. Copy the code and start building.

Jump to

1. Calculator

A fully functional calculator demonstrating basic layout, variable manipulation, and logic handling.

calculate

Key Concepts

Grid Layout, Click Handlers, Mathematical Logic, String Manipulation.

Calculator.xml 
<App Name="Calculator" Width="320" Height="480" Theme="Dark">
    <UI>
        <Grid Background="#202020">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- Display -->
            <Border Grid.Row="0" Background="#303030" Padding="20">
                <TextBlock Name="display" Text="0" FontSize="48" 
                           Foreground="White" HorizontalAlignment="Right" 
                           VerticalAlignment="Bottom"/>
            </Border>

            <!-- Keypad -->
            <Grid Grid.Row="1" Margin="10">
                <Grid.ColumnDefinitions>*,*,*,*</Grid.ColumnDefinitions>
                <Grid.RowDefinitions>*,*,*,*,*</Grid.RowDefinitions>

                <!-- Row 1 -->
                <Button Content="C" Grid.Row="0" Grid.Column="0" Background="#d9534f" onClick="Clear"/>
                <Button Content="/" Grid.Row="0" Grid.Column="3" Background="#f0ad4e" onClick="OpDiv"/>

                <!-- Row 2 -->
                <Button Content="7" Grid.Row="1" Grid.Column="0" onClick="Num7"/>
                <Button Content="8" Grid.Row="1" Grid.Column="1" onClick="Num8"/>
                <Button Content="9" Grid.Row="1" Grid.Column="2" onClick="Num9"/>
                <Button Content="*" Grid.Row="1" Grid.Column="3" Background="#f0ad4e" onClick="OpMul"/>

                <!-- Row 3 -->
                <Button Content="4" Grid.Row="2" Grid.Column="0" onClick="Num4"/>
                <Button Content="5" Grid.Row="2" Grid.Column="1" onClick="Num5"/>
                <Button Content="6" Grid.Row="2" Grid.Column="2" onClick="Num6"/>
                <Button Content="-" Grid.Row="2" Grid.Column="3" Background="#f0ad4e" onClick="OpSub"/>

                <!-- Row 4 -->
                <Button Content="1" Grid.Row="3" Grid.Column="0" onClick="Num1"/>
                <Button Content="2" Grid.Row="3" Grid.Column="1" onClick="Num2"/>
                <Button Content="3" Grid.Row="3" Grid.Column="2" onClick="Num3"/>
                <Button Content="+" Grid.Row="3" Grid.Column="3" Background="#f0ad4e" onClick="OpAdd"/>

                <!-- Row 5 -->
                <Button Content="0" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" onClick="Num0"/>
                <Button Content="." Grid.Row="4" Grid.Column="2" onClick="NumDot"/>
                <Button Content="=" Grid.Row="4" Grid.Column="3" Background="#5cb85c" onClick="Calculate"/>
            </Grid>
        </Grid>
    </UI>

    <Logic>
        <Var Name="current" Value="0" Type="string"/>
        
        <Handler Name="Num1">
            <Set Var="current" Value="{current}1"/>
            <Set Target="display" Property="Text" Value="{current}"/>
        </Handler>
        
        <!-- Add handlers for other numbers... -->

        <Handler Name="Clear">
            <Set Var="current" Value="0"/>
            <Set Target="display" Property="Text" Value="0"/>
        </Handler>
    </Logic>
</App>

2. Todo List

A productivity app demonstrating dynamic lists, input handling, and toast notifications.

checklist

Key Concepts

AddItem, RemoveItem, ClearText, Toast Notifications, ScrollViewer.

Todo.xml 
<App Name="Todo App" Width="400" Height="600" Theme="Dark">
    <UI>
        <Grid Background="#1E1E1E">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!-- Header -->
            <Border Background="#252526" Padding="20">
                <TextBlock Text="My Tasks" FontSize="24" FontWeight="Bold"/>
            </Border>

            <!-- List -->
            <ScrollViewer Grid.Row="1" Padding="10">
                <StackPanel Name="todoList"/>
            </ScrollViewer>

            <!-- Input -->
            <Border Grid.Row="2" Background="#252526" Padding="15">
                <Grid>
                    <Grid.ColumnDefinitions>*,Auto</Grid.ColumnDefinitions>
                    <TextBox Name="txtInput" Placeholder="Add a new task..."/>
                    <Button Grid.Column="1" Content="Add" Background="#0078D4" 
                            Margin="10,0,0,0" onClick="AddTodo"/>
                </Grid>
            </Border>
        </Grid>
    </UI>

    <Logic>
        <Handler Name="AddTodo">
            <Get Control="txtInput" Property="Text" ToState="task"/>
            
            <If Condition="{task} != ''">
                <AddItem Container="todoList" Type="card" Text="{task}" Background="#333"/>
                <ClearText Control="txtInput"/>
                <Toast Message="Task added!" Type="success" Position="BottomCenter"/>
            <Else>
                <Alert Message="Please enter a task name." Title="Error" Icon="warning"/>
            </Else>
            </If>
        </Handler>
    </Logic>
</App>

3. Admin Dashboard

A professional dashboard showcasing custom components like GlassCard, StatCard, and Charts.

analytics

Key Concepts

Custom Components, Nested Layouts, Navigation, Modern UI Styling.

Dashboard.xml 
<App Name="Admin Dashboard" Width="1000" Height="700" Theme="Dark">
    <UI>
        <Grid Background="#121212">
            <Grid.ColumnDefinitions>250,*</Grid.ColumnDefinitions>

            <!-- Sidebar -->
            <Border Grid.Column="0" Background="#1E1E1E" BorderBrush="#333" BorderThickness="0,0,1,0">
                <StackPanel Margin="20">
                    <TextBlock Text="NIMBUS" FontSize="24" FontWeight="Bold" 
                               Foreground="#0078D4" Margin="0,0,0,40"/>
                    
                    <NavItem Icon="home" Label="Dashboard" Active="true"/>
                    <NavItem Icon="analytics" Label="Analytics"/>
                    <NavItem Icon="people" Label="Customers"/>
                    <NavItem Icon="settings" Label="Settings"/>
                </StackPanel>
            </Border>

            <!-- Main Content -->
            <ScrollViewer Grid.Column="1" Padding="30">
                <StackPanel>
                    <TextBlock Text="Overview" FontSize="32" FontWeight="Bold" Margin="0,0,0,20"/>

                    <!-- Stats Row -->
                    <Grid>
                        <Grid.ColumnDefinitions>*,*,*,*</Grid.ColumnDefinitions>
                        
                        <StatCard Grid.Column="0" Icon="attach_money" Value="$45,231" 
                                  Label="Total Revenue" AccentColor="#2ECC71"/>
                        <StatCard Grid.Column="1" Icon="shopping_cart" Value="1,203" 
                                  Label="Total Orders" AccentColor="#3498DB"/>
                        <StatCard Grid.Column="2" Icon="group" Value="8,540" 
                                  Label="New Users" AccentColor="#9B59B6"/>
                        <StatCard Grid.Column="3" Icon="visibility" Value="124K" 
                                  Label="Page Views" AccentColor="#F1C40F"/>
                    </Grid>

                    <!-- Charts Section -->
                    <GlassCard Margin="0,30,0,0" Padding="20">
                        <TextBlock Text="Recent Activity" FontSize="20" FontWeight="SemiBold" Margin="0,0,0,15"/>
                        <!-- Placeholder for chart -->
                        <Border Height="200" Background="#252526" CornerRadius="8">
                            <TextBlock Text="[Chart Visualization Area]" VerticalAlignment="Center" 
                                       HorizontalAlignment="Center" Foreground="#555"/>
                        </Border>
                    </GlassCard>

                </StackPanel>
            </ScrollViewer>
        </Grid>
    </UI>
</App>