From 62cfaada73f9aee39667a35433c51f25ff06e8c5 Mon Sep 17 00:00:00 2001
From: russkyc <jrcc1023@gmail.com>
Date: Wed, 1 Jan 2025 18:32:43 +0800
Subject: [PATCH] :sparkles: Add overview pages, improve web gallery splash,
 add installation guide, add pills documentation

---
 .github/resources/images/nuget-button.svg     |  61 +++++++++
 Directory.Packages.props                      |   3 +-
 README.md                                     |  69 ++++++++--
 .../wwwroot/app.css                           |  32 ++---
 .../wwwroot/index.html                        |  20 ++-
 .../ViewModels/MainViewModel.cs               |  30 +----
 .../Views/MainView.axaml                      |  10 +-
 .../Views/Pages/ExamplesView.axaml            |  11 ++
 .../Views/Pages/ExamplesView.axaml.cs         |  13 ++
 .../Views/Pages/InstallationView.axaml        |  58 ++++++++
 .../Views/Pages/InstallationView.axaml.cs     |  35 +++++
 .../Views/Pages/IntroductionView.axaml        |  39 ++++++
 .../Views/Pages/IntroductionView.axaml.cs     |  11 ++
 .../Views/Pages/PillView.axaml                |  62 +++++++++
 .../Views/Pages/PillView.axaml.cs             |  37 ++++++
 .../Views/Pages/ThemingView.axaml             |  11 ++
 .../Views/Pages/ThemingView.axaml.cs          |  11 ++
 .../Views/Sidebar.axaml                       | 125 ++++++++++++++++--
 Russkyc.UI.Avalonia/Base.axaml                |   5 +-
 Russkyc.UI.Avalonia/Controls.axaml            |   2 +-
 Russkyc.UI.Avalonia/Controls/Border.axaml     |  94 ++++++++++---
 Russkyc.UI.Avalonia/PackageIcon.png           | Bin 0 -> 11720 bytes
 Russkyc.UI.Avalonia/README.md                 |  44 ++++++
 .../Russkyc.UI.Avalonia.csproj                |  26 +++-
 Russkyc.UI.Avalonia/Themes/Zinc.axaml         |   1 -
 25 files changed, 704 insertions(+), 106 deletions(-)
 create mode 100644 .github/resources/images/nuget-button.svg
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/ExamplesView.axaml
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/ExamplesView.axaml.cs
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/InstallationView.axaml
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/InstallationView.axaml.cs
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/IntroductionView.axaml
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/IntroductionView.axaml.cs
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/PillView.axaml
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/PillView.axaml.cs
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/ThemingView.axaml
 create mode 100644 Russkyc.UI.Avalonia.Gallery/Views/Pages/ThemingView.axaml.cs
 create mode 100644 Russkyc.UI.Avalonia/PackageIcon.png
 create mode 100644 Russkyc.UI.Avalonia/README.md

diff --git a/.github/resources/images/nuget-button.svg b/.github/resources/images/nuget-button.svg
new file mode 100644
index 0000000..909ab04
--- /dev/null
+++ b/.github/resources/images/nuget-button.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 67" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-2068,-552.667)">
+        <g id="Nuget-Button" serif:id="Nuget Button" transform="matrix(1.33333,0,0,1.33333,-723.683,-196.252)">
+            <rect x="2093.77" y="561.69" width="150" height="50" style="fill:none;"/>
+            <clipPath id="_clip1">
+                <rect x="2093.77" y="561.69" width="150" height="50"/>
+            </clipPath>
+            <g clip-path="url(#_clip1)">
+                <g id="button" transform="matrix(0.166667,0,0,0.166667,2093.77,561.69)">
+                    <g>
+                        <rect x="0" y="0" width="900" height="300" style="fill:none;"/>
+                        <g>
+                            <clipPath id="_clip2">
+                                <rect x="0" y="0" width="900" height="300"/>
+                            </clipPath>
+                            <g clip-path="url(#_clip2)">
+                                <g transform="matrix(4.92532,0,0,7.26209,-3684.51,-5554.98)">
+                                    <path d="M930.803,770.712C930.803,767.52 926.982,764.928 922.276,764.928L756.602,764.928C751.895,764.928 748.074,767.52 748.074,770.712L748.074,800.455C748.074,803.647 751.895,806.239 756.602,806.239L922.276,806.239C926.982,806.239 930.803,803.647 930.803,800.455L930.803,770.712Z" style="fill:white;"/>
+                                    <g transform="matrix(0.913646,-0,-0,0.619656,748.075,764.929)">
+                                    </g>
+                                    <path d="M930.803,770.712L930.803,800.455C930.803,803.647 926.982,806.239 922.276,806.239L756.602,806.239C751.895,806.239 748.074,803.647 748.074,800.455L748.074,770.712C748.074,767.52 751.895,764.928 756.602,764.928L922.276,764.928C926.982,764.928 930.803,767.52 930.803,770.712ZM928.303,770.712C928.303,768.456 925.602,766.624 922.276,766.624L756.602,766.624C753.275,766.624 750.575,768.456 750.575,770.712L750.575,800.455C750.575,802.711 753.275,804.543 756.602,804.543L922.276,804.543C925.602,804.543 928.303,802.711 928.303,800.455L928.303,770.712Z"/>
+                                </g>
+                                <g transform="matrix(1.377,0,0,1.03275,-2.87158,-15.8108)">
+                                    <g transform="matrix(0.810423,0,0,0.810423,72.5132,33.8844)">
+                                        <g transform="matrix(4.5,0,0,6,-3271.87,-4564.65)">
+                                            <path d="M784.066,777.71L782.713,779.048C781.857,778.142 780.859,777.689 779.719,777.689C778.726,777.689 777.893,778.019 777.223,778.677C776.552,779.336 776.217,780.136 776.217,781.079C776.217,782.053 776.565,782.878 777.261,783.555C777.957,784.232 778.815,784.571 779.836,784.571C780.5,784.571 781.06,784.431 781.516,784.152C781.971,783.873 782.339,783.436 782.618,782.842L779.695,782.842L779.695,781.037L784.772,781.037L784.786,781.463C784.786,782.345 784.557,783.182 784.1,783.974C783.643,784.765 783.05,785.369 782.323,785.785C781.596,786.201 780.743,786.409 779.764,786.409C778.716,786.409 777.782,786.182 776.961,785.727C776.14,785.272 775.491,784.623 775.013,783.782C774.535,782.94 774.296,782.032 774.296,781.058C774.296,779.722 774.737,778.561 775.62,777.573C776.667,776.397 778.03,775.809 779.709,775.809C780.587,775.809 781.408,775.972 782.172,776.297C782.817,776.571 783.448,777.042 784.066,777.71Z" style="fill-rule:nonzero;"/>
+                                            <path d="M793.822,782.965L787.805,782.965C787.892,783.496 788.124,783.918 788.501,784.231C788.878,784.544 789.36,784.701 789.945,784.701C790.645,784.701 791.247,784.456 791.75,783.967L793.328,784.708C792.934,785.266 792.463,785.679 791.914,785.946C791.365,786.214 790.714,786.348 789.959,786.348C788.788,786.348 787.834,785.978 787.098,785.24C786.362,784.501 785.993,783.576 785.993,782.464C785.993,781.326 786.361,780.38 787.095,779.627C787.829,778.875 788.749,778.499 789.856,778.499C791.032,778.499 791.988,778.875 792.724,779.627C793.46,780.38 793.828,781.374 793.828,782.608L793.822,782.965ZM791.949,781.49C791.825,781.074 791.581,780.735 791.217,780.475C790.852,780.214 790.43,780.084 789.949,780.084C789.426,780.084 788.968,780.23 788.574,780.523C788.327,780.706 788.098,781.028 787.887,781.49L791.949,781.49Z" style="fill-rule:nonzero;"/>
+                                            <path d="M795.564,775.94L797.437,775.94L797.437,778.691L798.549,778.691L798.549,780.303L797.437,780.303L797.437,786.155L795.564,786.155L795.564,780.303L794.604,780.303L794.604,778.691L795.564,778.691L795.564,775.94Z" style="fill-rule:nonzero;"/>
+                                            <path d="M807.758,778.499C808.462,778.499 809.124,778.675 809.744,779.027C810.364,779.379 810.848,779.857 811.195,780.461C811.543,781.065 811.717,781.717 811.717,782.416C811.717,783.121 811.542,783.779 811.192,784.392C810.842,785.005 810.365,785.484 809.761,785.83C809.158,786.175 808.492,786.348 807.765,786.348C806.695,786.348 805.781,785.967 805.024,785.205C804.267,784.444 803.889,783.519 803.889,782.43C803.889,781.264 804.316,780.292 805.172,779.514C805.922,778.837 806.784,778.499 807.758,778.499ZM807.789,780.262C807.207,780.262 806.723,780.464 806.335,780.869C805.948,781.274 805.755,781.792 805.755,782.423C805.755,783.073 805.946,783.599 806.329,784.001C806.711,784.404 807.196,784.605 807.782,784.605C808.368,784.605 808.856,784.401 809.246,783.994C809.635,783.587 809.83,783.064 809.83,782.423C809.83,781.783 809.639,781.263 809.256,780.862C808.874,780.462 808.384,780.262 807.789,780.262Z" style="fill-rule:nonzero;"/>
+                                            <path d="M813.247,778.691L815.12,778.691L815.12,779.456C815.544,779.098 815.929,778.849 816.274,778.709C816.619,778.569 816.972,778.499 817.332,778.499C818.072,778.499 818.7,778.757 819.216,779.274C819.65,779.713 819.867,780.363 819.867,781.223L819.867,786.155L818.015,786.155L818.015,782.887C818.015,781.996 817.975,781.404 817.895,781.112C817.815,780.819 817.676,780.597 817.478,780.444C817.279,780.291 817.034,780.214 816.742,780.214C816.363,780.214 816.038,780.341 815.766,780.594C815.495,780.848 815.307,781.199 815.202,781.646C815.147,781.879 815.12,782.384 815.12,783.161L815.12,786.155L813.247,786.155L813.247,778.691Z" style="fill-rule:nonzero;"/>
+                                            <path d="M826.593,776.063L828.436,776.063L832.754,782.705L832.754,776.063L834.675,776.063L834.675,786.155L832.827,786.155L828.514,779.535L828.514,786.155L826.593,786.155L826.593,776.063Z" style="fill-rule:nonzero;"/>
+                                            <path d="M836.768,778.691L838.661,778.691L838.661,782.286C838.661,782.986 838.709,783.472 838.806,783.744C838.902,784.016 839.057,784.228 839.27,784.379C839.483,784.529 839.745,784.605 840.057,784.605C840.369,784.605 840.634,784.531 840.852,784.382C841.069,784.233 841.231,784.015 841.337,783.727C841.414,783.512 841.453,783.052 841.453,782.348L841.453,778.691L843.326,778.691L843.326,781.854C843.326,783.157 843.224,784.049 843.018,784.529C842.766,785.115 842.396,785.564 841.906,785.878C841.417,786.191 840.795,786.348 840.04,786.348C839.221,786.348 838.559,786.165 838.054,785.799C837.549,785.433 837.193,784.923 836.987,784.269C836.841,783.816 836.768,782.993 836.768,781.799L836.768,778.691Z" style="fill-rule:nonzero;"/>
+                                            <path d="M850.722,778.691L852.589,778.691L852.589,785.085C852.589,786.348 852.335,787.276 851.827,787.871C851.145,788.676 850.119,789.078 848.746,789.078C848.015,789.078 847.399,788.987 846.901,788.804C846.402,788.621 845.982,788.352 845.639,787.998C845.296,787.643 845.042,787.212 844.877,786.704L846.942,786.704C847.125,786.915 847.361,787.074 847.649,787.181C847.937,787.289 848.278,787.342 848.671,787.342C849.174,787.342 849.579,787.265 849.885,787.109C850.192,786.954 850.408,786.752 850.534,786.505C850.659,786.258 850.722,785.833 850.722,785.229C850.393,785.559 850.048,785.795 849.686,785.939C849.325,786.083 848.916,786.155 848.458,786.155C847.457,786.155 846.61,785.794 845.92,785.071C845.229,784.349 844.884,783.434 844.884,782.327C844.884,781.143 845.25,780.191 845.982,779.473C846.645,778.824 847.436,778.499 848.355,778.499C848.785,778.499 849.191,778.578 849.573,778.736C849.955,778.893 850.338,779.153 850.722,779.514L850.722,778.691ZM848.781,780.248C848.191,780.248 847.704,780.446 847.319,780.842C846.935,781.237 846.743,781.735 846.743,782.334C846.743,782.956 846.94,783.466 847.333,783.864C847.727,784.262 848.22,784.461 848.815,784.461C849.396,784.461 849.875,784.266 850.252,783.878C850.63,783.489 850.818,782.979 850.818,782.348C850.818,781.726 850.629,781.22 850.249,780.832C849.869,780.443 849.38,780.248 848.781,780.248Z" style="fill-rule:nonzero;"/>
+                                            <path d="M861.96,782.965L855.943,782.965C856.03,783.496 856.262,783.918 856.64,784.231C857.017,784.544 857.499,784.701 858.084,784.701C858.784,784.701 859.385,784.456 859.888,783.967L861.466,784.708C861.073,785.266 860.602,785.679 860.053,785.946C859.504,786.214 858.852,786.348 858.098,786.348C856.927,786.348 855.973,785.978 855.237,785.24C854.5,784.501 854.132,783.576 854.132,782.464C854.132,781.326 854.499,780.38 855.233,779.627C855.967,778.875 856.888,778.499 857.995,778.499C859.17,778.499 860.126,778.875 860.863,779.627C861.599,780.38 861.967,781.374 861.967,782.608L861.96,782.965ZM860.087,781.49C859.964,781.074 859.72,780.735 859.355,780.475C858.991,780.214 858.569,780.084 858.087,780.084C857.565,780.084 857.107,780.23 856.713,780.523C856.466,780.706 856.237,781.028 856.026,781.49L860.087,781.49Z" style="fill-rule:nonzero;"/>
+                                            <path d="M863.703,775.94L865.576,775.94L865.576,778.691L866.687,778.691L866.687,780.303L865.576,780.303L865.576,786.155L863.703,786.155L863.703,780.303L862.742,780.303L862.742,778.691L863.703,778.691L863.703,775.94Z" style="fill-rule:nonzero;"/>
+                                        </g>
+                                        <g transform="matrix(3.12236,0,0,4.00765,-2204.43,-2919.29)">
+                                            <g>
+                                                <g transform="matrix(1,0,0,1,773.596,786.155)">
+                                                    <text x="0px" y="0px" style="font-family:'ArialMT', 'Arial';font-size:14.051px;">I</text>
+                                                </g>
+                                                <g transform="matrix(1,0,0,1,778.254,786.155)">
+                                                    <text x="0px" y="0px" style="font-family:'ArialMT', 'Arial';font-size:14.051px;">n<tspan x="8.569px 16.349px 21.007px 29.576px 33.452px 36.573px 42.769px 51.337px 56.016px 62.212px 73.113px 81.682px 92.583px 101.152px 105.028px 113.597px 122.166px " y="0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px 0px ">stall or Download</tspan></text>
+                                                </g>
+                                            </g>
+                                        </g>
+                                    </g>
+                                    <g transform="matrix(0.169363,0,0,0.225818,76.1301,70.2336)">
+                                        <path d="M589,721.1C515.947,721.1 455.833,660.986 455.833,587.933C455.833,514.88 515.947,454.767 589,454.767C662.053,454.767 722.167,514.88 722.167,587.933C722.167,660.986 662.053,721.1 589,721.1M323.367,415.867C277.706,415.867 240.133,378.294 240.133,332.633C240.133,286.973 277.706,249.4 323.367,249.4C369.027,249.4 406.6,286.973 406.6,332.633C406.6,378.294 369.027,415.867 323.367,415.867M594.867,156.033L372.633,156.033C260.102,156.07 167.518,248.668 167.5,361.2L167.5,583.433C167.5,695.966 260.101,788.567 372.633,788.567L594.867,788.567C707.399,788.567 800,695.966 800,583.433L800,361.2C800,248.661 707.405,156.052 594.867,156.033M133.167,77.967C133.167,114.502 103.102,144.567 66.567,144.567C30.031,144.567 -0.033,114.502 -0.033,77.967C-0.033,41.431 30.031,11.367 66.567,11.367C103.102,11.367 133.167,41.431 133.167,77.967" style="fill-rule:nonzero;"/>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/Directory.Packages.props b/Directory.Packages.props
index 4e9ac78..d79624e 100644
--- a/Directory.Packages.props
+++ b/Directory.Packages.props
@@ -7,8 +7,7 @@
     <!-- Avalonia packages -->
     <!-- Important: keep version in sync! -->
     <PackageVersion Include="Avalonia" Version="11.2.3" />
-    <PackageVersion Include="Avalonia.Svg" Version="11.2.0.2" />
-    <PackageVersion Include="Avalonia.Xaml.Behaviors" Version="11.2.0.1" />
+    <PackageVersion Include="Avalonia.Xaml.Behaviors" Version="11.2.0.2" />
     <PackageVersion Include="Avalonia.Themes.Fluent" Version="11.2.3" />
     <PackageVersion Include="Avalonia.Fonts.Inter" Version="11.2.3" />
     <PackageVersion Include="Avalonia.Diagnostics" Version="11.2.3" />
diff --git a/README.md b/README.md
index d6458fe..0d2e77f 100644
--- a/README.md
+++ b/README.md
@@ -8,12 +8,35 @@
 Russkyc.UI.Avalonia provides clean, beautifully-designed, and customizable components inspired by the design of <a href="https://ui.shadcn.com">shadcn/ui</a> for Avalonia applications.
 </p>
 
-## Installation
+## Installation (Pre-release)
 
 #### 1. Download
+The package can be downloaded installed by the Nuget package manager UI,
+Package Reference, Nuget CLI, Package manager, and other Nuget supported
+channels.
 
-> [!WARNING]  
-> Russkyc.UI.Avalonia is in early development stage and currently has no available nuget packages
+<div align="center">
+    <br/>
+    <a href="https://www.nuget.org/packages/Russkyc.UI.Avalonia">
+        <img src=".github/resources/images/nuget-button.svg" style="width:200px" alt="Nuget">
+    </a>
+    <br/>
+</div>
+
+PackageReference
+```
+<PackageReference Include="Russkyc.UI.Avalonia" Version="0.1.0-pre" />
+```
+
+Nuget CLI
+```
+dotnet add package Russkyc.UI.Avalonia --version 0.1.0-pre
+```
+
+Package Manager
+```
+NuGet\Install-Package Russkyc.UI.Avalonia -Version 0.1.0-pre
+```
 
 #### 2. Configuration
 
@@ -60,25 +83,26 @@ All components use the defaults and theme provided in this template.
 ```xaml
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!-- Defaults -->
+    <!--  Defaults  -->
     <CornerRadius x:Key="Radius">5</CornerRadius>
     <Thickness x:Key="BorderThickness">1</Thickness>
-    <Thickness x:Key="ActiveBorderThickness">2</Thickness>
+    <Thickness x:Key="ActiveBorderThickness">1</Thickness>
     <Thickness x:Key="Padding">12,7</Thickness>
-    <!-- Theme -->
+    <x:Double x:Key="ControlMinHeight">36</x:Double>
+    <!--  Theme  -->
     <ResourceDictionary.ThemeDictionaries>
-        <!-- Light -->
+        <!--  Light  -->
         <ResourceDictionary x:Key="Light">
-            <!-- Colors -->
+            <!--  Colors  -->
             <Color x:Key="Background">#FFFFFF</Color>
             <Color x:Key="Foreground">#000000</Color>
             <Color x:Key="Card">#FFFFFF</Color>
             <Color x:Key="CardForeground">#000000</Color>
             <Color x:Key="Popover">#FFFFFF</Color>
             <Color x:Key="PopoverForeground">#000000</Color>
-            <Color x:Key="Primary">	#18181b</Color>
+            <Color x:Key="Primary">#18181b</Color>
             <Color x:Key="PrimaryForeground">#FAFAFA</Color>
-            <Color x:Key="Secondary">	#f4f4f5</Color>
+            <Color x:Key="Secondary">#f4f4f5</Color>
             <Color x:Key="SecondaryForeground">#18181B</Color>
             <Color x:Key="Muted">#F4F4F5</Color>
             <Color x:Key="MutedForeground">#71717A</Color>
@@ -95,18 +119,18 @@ All components use the defaults and theme provided in this template.
             <Color x:Key="SurfaceOverlay">#06000000</Color>
             <Color x:Key="SurfaceOverlayDeepen">#12000000</Color>
         </ResourceDictionary>
-        <!-- Dark -->
+        <!--  Dark  -->
         <ResourceDictionary x:Key="Dark">
-            <!-- Colors -->
+            <!--  Colors  -->
             <Color x:Key="Background">#09090B</Color>
             <Color x:Key="Foreground">#FAFAFA</Color>
             <Color x:Key="Card">#09090B</Color>
             <Color x:Key="CardForeground">#FAFAFA</Color>
             <Color x:Key="Popover">#09090B</Color>
             <Color x:Key="PopoverForeground">#FAFAFA</Color>
-            <Color x:Key="Primary">	#FAFAFA</Color>
+            <Color x:Key="Primary">#FAFAFA</Color>
             <Color x:Key="PrimaryForeground">#18181B</Color>
-            <Color x:Key="Secondary">	#27272A</Color>
+            <Color x:Key="Secondary">#27272A</Color>
             <Color x:Key="SecondaryForeground">#FAFAFA</Color>
             <Color x:Key="Muted">#27272A</Color>
             <Color x:Key="MutedForeground">#A1A1AA</Color>
@@ -127,6 +151,23 @@ All components use the defaults and theme provided in this template.
 </ResourceDictionary>
 ```
 
+Which will now replace the default theme in `App.axaml`
+
+```xaml
+<Application.Resources>
+    <ResourceDictionary>
+        <ResourceDictionary.MergedDictionaries>
+            <!-- Theme (Replace with new theme) -->
+            <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Themes/Zinc.axaml" />
+            <!-- Base (Required) -->
+            <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Base.axaml" />
+            <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls.axaml" />
+        </ResourceDictionary.MergedDictionaries>
+    </ResourceDictionary>
+</Application.Resources>
+```
+
+
 ## License
 
 This project is licensed under the [MIT License](LICENSE.md)
diff --git a/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/app.css b/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/app.css
index 01f9851..75f0036 100644
--- a/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/app.css
+++ b/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/app.css
@@ -10,24 +10,24 @@
     pointer-events: none;
 }
 
-@media (prefers-color-scheme: light) {
-    html, body {
-        background: white;
-    }
-    .avalonia-splash {
-        background: white;
-        color: black;
-    }
+html, body {
+    background: white;
 }
 
-@media (prefers-color-scheme: dark) {
-    html, body {
-        background: black;
-    }
-    .avalonia-splash {
-        background: black;
-        color: white;
-    }
+.avalonia-splash a {
+    color: #101010;
+}
+
+.avalonia-splash h4 {
+    font-weight: 400;
+}
+
+.avalonia-splash {
+    background: white;
+    color: black;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
 }
 
 .avalonia-splash.splash-close {
diff --git a/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/index.html b/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/index.html
index 9625cc0..5cb515a 100644
--- a/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/index.html
+++ b/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/index.html
@@ -11,9 +11,23 @@
 <body style="margin: 0; overflow: hidden">
 <div id="out">
     <div class="avalonia-splash">
-        <h2>
-            Powered by Russkyc.UI.Avalonia
-        </h2>
+        <a href="https://www.avaloniaui.net/" target="_blank">
+            <svg width="266" height="52" viewBox="0 0 266 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M55.8592 47.3941C54.9035 47.3941 54.1184 47.1723 53.504 46.7285C52.9237 46.2848 52.5483 45.6875 52.3776 44.9365C52.2411 44.1856 52.3947 43.3493 52.8384 42.4277L65.9456 13.7045C66.4917 12.544 67.1403 11.7077 67.8912 11.1957C68.6421 10.6496 69.5125 10.3765 70.5024 10.3765C71.4923 10.3765 72.3627 10.6496 73.1136 11.1957C73.8645 11.7077 74.496 12.544 75.008 13.7045L88.2176 42.4277C88.6613 43.3493 88.8149 44.2027 88.6784 44.9877C88.576 45.7387 88.2347 46.336 87.6544 46.7797C87.0741 47.1893 86.3232 47.3941 85.4016 47.3941C84.2411 47.3941 83.3365 47.1211 82.688 46.5749C82.0736 46.0288 81.5275 45.1755 81.0496 44.0149L78.9279 39.0997H62.0415L59.9552 44.0149C59.4432 45.2096 58.8971 46.08 58.3168 46.6261C57.7707 47.1381 56.9515 47.3941 55.8592 47.3941ZM70.4 19.2853L64.6844 32.9045H76.2627L70.5024 19.2853H70.4Z" fill="currentColor"/>
+                <path d="M101.869 47.3941C100.879 47.3941 100.009 47.1381 99.258 46.6261C98.5071 46.08 97.9096 45.2779 97.4659 44.2197L89.7348 26.4021C89.3593 25.5147 89.2228 24.6955 89.3252 23.9445C89.4276 23.1595 89.786 22.5451 90.4004 22.1013C91.0489 21.6235 91.9364 21.3845 93.0628 21.3845C93.9844 21.3845 94.7353 21.6064 95.3156 22.0501C95.8959 22.4597 96.4079 23.2619 96.8516 24.4565L102.018 37.95L107.552 24.4053C108.03 23.2448 108.559 22.4597 109.14 22.0501C109.72 21.6064 110.522 21.3845 111.546 21.3845C112.433 21.3845 113.133 21.6235 113.645 22.1013C114.191 22.5451 114.516 23.1424 114.618 23.8933C114.755 24.6443 114.618 25.4635 114.208 26.3509L106.324 44.2197C105.88 45.312 105.283 46.1141 104.532 46.6261C103.815 47.1381 102.927 47.3941 101.869 47.3941Z" fill="currentColor"/>
+                <path d="M126.569 47.4965C124.726 47.4965 123.07 47.1381 121.602 46.4213C120.135 45.7045 118.991 44.7317 118.172 43.5029C117.353 42.2741 116.943 40.8917 116.943 39.3557C116.943 37.5125 117.421 36.0619 118.377 35.0037C119.333 33.9115 120.886 33.1435 123.036 32.6997C125.186 32.2219 128.037 31.9829 131.586 31.9829H133.43V35.9765H131.638C129.897 35.9765 128.48 36.0789 127.388 36.2837C126.33 36.4544 125.562 36.7616 125.084 37.2053C124.64 37.6491 124.418 38.2635 124.418 39.0485C124.418 40.0043 124.743 40.7893 125.391 41.4037C126.074 42.0181 127.047 42.3253 128.31 42.3253C129.299 42.3253 130.17 42.1035 130.921 41.6597C131.706 41.1819 132.32 40.5504 132.764 39.7653C133.208 38.9461 133.43 38.0245 133.43 37.0005V31.1125C133.43 29.6107 133.088 28.5525 132.406 27.9381C131.723 27.2896 130.562 26.9653 128.924 26.9653C128.002 26.9653 126.995 27.0848 125.903 27.3237C124.845 27.5285 123.667 27.8869 122.37 28.3989C121.619 28.7403 120.954 28.8256 120.374 28.6549C119.793 28.4501 119.35 28.1088 119.042 27.6309C118.735 27.1189 118.582 26.5728 118.582 25.9925C118.582 25.3781 118.752 24.7979 119.094 24.2517C119.435 23.6715 119.998 23.2448 120.783 22.9717C122.387 22.3232 123.889 21.8795 125.289 21.6405C126.722 21.4016 128.037 21.2821 129.231 21.2821C131.859 21.2821 134.01 21.6747 135.682 22.4597C137.389 23.2107 138.669 24.3883 139.522 25.9925C140.376 27.5627 140.802 29.5936 140.802 32.0853V43.4517C140.802 44.7147 140.495 45.6875 139.881 46.3701C139.266 47.0528 138.379 47.3941 137.218 47.3941C136.058 47.3941 135.153 47.0528 134.505 46.3701C133.89 45.6875 133.583 44.7147 133.583 43.4517L133.594 43.15C133.594 43.15 133.293 44.032 132.61 44.8853C131.962 45.7045 131.126 46.3531 130.102 46.8309C129.078 47.2747 127.9 47.4965 126.569 47.4965Z" fill="currentColor"/>
+                <path d="M155.632 47.4965C152.594 47.4965 150.324 46.6603 148.822 44.9877C147.321 43.2811 146.57 40.7552 146.57 37.4101V14.3189C146.57 13.0219 146.894 12.0491 147.542 11.4005C148.225 10.7179 149.198 10.3765 150.461 10.3765C151.69 10.3765 152.628 10.7179 153.277 11.4005C153.959 12.0491 154.301 13.0219 154.301 14.3189V37.1029C154.301 38.5024 154.591 39.5435 155.171 40.2261C155.786 40.8747 156.588 41.1989 157.578 41.1989C157.851 41.1989 158.107 41.1819 158.346 41.1477C158.585 41.1136 158.841 41.0965 159.114 41.0965C159.66 41.0283 160.035 41.1989 160.24 41.6085C160.479 41.984 160.598 42.752 160.598 43.9125C160.598 44.9365 160.394 45.7216 159.984 46.2677C159.574 46.7797 158.943 47.1211 158.09 47.2917C157.748 47.3259 157.356 47.36 156.912 47.3941C156.468 47.4624 156.042 47.4965 155.632 47.4965Z" fill="currentColor"/>
+                <path d="M175.453 47.4965C172.756 47.4965 170.401 46.9675 168.387 45.9093C166.407 44.8512 164.871 43.3323 163.779 41.3525C162.687 39.3728 162.141 37.0347 162.141 34.3381C162.141 32.3243 162.448 30.5152 163.062 28.9109C163.677 27.3067 164.564 25.9413 165.725 24.8149C166.919 23.6544 168.336 22.784 169.974 22.2037C171.613 21.5893 173.439 21.2821 175.453 21.2821C178.149 21.2821 180.487 21.8112 182.467 22.8693C184.481 23.9275 186.034 25.4293 187.126 27.3749C188.253 29.3205 188.816 31.6416 188.816 34.3381C188.816 36.3861 188.492 38.2123 187.843 39.8165C187.229 41.4208 186.341 42.8032 185.181 43.9637C184.02 45.1243 182.604 46.0117 180.931 46.6261C179.293 47.2064 177.467 47.4965 175.453 47.4965ZM175.453 41.7109C176.579 41.7109 177.552 41.4379 178.371 40.8917C179.19 40.3456 179.839 39.5435 180.317 38.4853C180.795 37.3931 181.034 36.0107 181.034 34.3381C181.034 31.8464 180.522 30.0203 179.498 28.8597C178.474 27.6651 177.125 27.0677 175.453 27.0677C174.361 27.0677 173.388 27.3237 172.534 27.8357C171.715 28.3477 171.067 29.1499 170.589 30.2421C170.145 31.3003 169.923 32.6656 169.923 34.3381C169.923 36.8299 170.435 38.6901 171.459 39.9189C172.483 41.1136 173.814 41.7109 175.453 41.7109Z" fill="currentColor"/>
+                <path d="M197.411 47.3941C196.148 47.3941 195.175 47.0528 194.492 46.3701C193.844 45.6875 193.52 44.7147 193.52 43.4517V25.2757C193.52 24.0128 193.844 23.0571 194.492 22.4085C195.175 21.7259 196.114 21.3845 197.308 21.3845C198.537 21.3845 199.476 21.7259 200.124 22.4085C200.773 23.0571 201.112 24.1871 201.112 25.45C201.141 25.3955 202.48 23.552 204.016 22.6645C205.586 21.7429 207.361 21.2821 209.34 21.2821C211.354 21.2821 213.01 21.6747 214.307 22.4597C215.604 23.2107 216.577 24.3712 217.225 25.9413C217.874 27.4773 218.198 29.44 218.198 31.8293V43.4517C218.198 44.7147 217.857 45.6875 217.174 46.3701C216.525 47.0528 215.57 47.3941 214.307 47.3941C213.078 47.3941 212.122 47.0528 211.44 46.3701C210.791 45.6875 210.467 44.7147 210.467 43.4517V32.1877C210.467 30.4469 210.143 29.2011 209.494 28.4501C208.88 27.6651 207.924 27.2725 206.627 27.2725C204.988 27.2725 203.674 27.7845 202.684 28.8085C201.729 29.8325 201.251 31.1979 201.251 32.9045V43.4517C201.251 46.08 199.971 47.3941 197.411 47.3941Z" fill="currentColor"/>
+                <path d="M227.861 47.3429C226.598 47.3429 225.625 46.9845 224.942 46.2677C224.294 45.5168 223.97 44.4757 223.97 43.1445V25.6341C223.97 24.2688 224.294 23.2277 224.942 22.5109C225.625 21.76 226.598 21.3845 227.861 21.3845C229.09 21.3845 230.028 21.76 230.677 22.5109C231.359 23.2277 231.701 24.2688 231.701 25.6341V43.1445C231.701 44.4757 231.377 45.5168 230.728 46.2677C230.079 46.9845 229.124 47.3429 227.861 47.3429ZM227.861 17.1861C226.427 17.1861 225.318 16.8619 224.533 16.2133C223.782 15.5307 223.406 14.5749 223.406 13.3461C223.406 12.0832 223.782 11.1275 224.533 10.4789C225.318 9.79629 226.427 9.45496 227.861 9.45496C229.294 9.45496 230.387 9.79629 231.138 10.4789C231.889 11.1275 232.264 12.0832 232.264 13.3461C232.264 14.5749 231.889 15.5307 231.138 16.2133C230.387 16.8619 229.294 17.1861 227.861 17.1861Z" fill="currentColor"/>
+                <path d="M246.169 47.4965C244.326 47.4965 242.67 47.1381 241.202 46.4213C239.735 45.7045 238.591 44.7317 237.772 43.5029C236.953 42.2741 236.543 40.8917 236.543 39.3557C236.543 37.5125 237.021 36.0619 237.977 35.0037C238.933 33.9115 240.486 33.1435 242.636 32.6997C244.786 32.2219 247.637 31.9829 251.186 31.9829H253.03V35.9765H251.238C249.497 35.9765 248.08 36.0789 246.988 36.2837C245.93 36.4544 245.162 36.7616 244.684 37.2053C244.24 37.6491 244.018 38.2635 244.018 39.0485C244.018 40.0043 244.343 40.7893 244.991 41.4037C245.674 42.0181 246.647 42.3253 247.91 42.3253C248.899 42.3253 249.77 42.1035 250.521 41.6597C251.306 41.1819 251.92 40.5504 252.364 39.7653C252.808 38.9461 253.03 38.0245 253.03 37.0005V31.1125C253.03 29.6107 252.688 28.5525 252.006 27.9381C251.323 27.2896 250.162 26.9653 248.524 26.9653C247.602 26.9653 246.595 27.0848 245.503 27.3237C244.445 27.5285 243.267 27.8869 241.97 28.3989C241.219 28.7403 240.554 28.8256 239.974 28.6549C239.393 28.4501 238.95 28.1088 238.642 27.6309C238.335 27.1189 238.182 26.5728 238.182 25.9925C238.182 25.3781 238.352 24.7979 238.694 24.2517C239.035 23.6715 239.598 23.2448 240.383 22.9717C241.987 22.3232 243.489 21.8795 244.889 21.6405C246.322 21.4016 247.637 21.2821 248.831 21.2821C251.459 21.2821 253.61 21.6747 255.282 22.4597C256.989 23.2107 258.269 24.3883 259.122 25.9925C259.976 27.5627 260.402 29.5936 260.402 32.0853V43.4517C260.402 44.7147 260.095 45.6875 259.481 46.3701C258.866 47.0528 257.979 47.3941 256.818 47.3941C255.658 47.3941 254.753 47.0528 254.105 46.3701C253.49 45.6875 253.183 44.7147 253.183 43.4517V43.1789C253.183 43.3144 252.893 44.032 252.21 44.8853C251.562 45.7045 250.726 46.3531 249.702 46.8309C248.678 47.2747 247.5 47.4965 246.169 47.4965Z" fill="currentColor"/>
+                <path d="M22.3444 20.9916C18.7895 20.9916 15.9077 24.0073 15.9077 27.7274C15.9077 31.4475 18.7895 34.4632 22.3444 34.4632C25.8993 34.4632 28.7811 31.4475 28.7811 27.7274C28.7811 24.0073 25.8993 20.9916 22.3444 20.9916Z" fill="currentColor"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M37.6937 49.0667H21.9271C10.8346 48.8653 1.90173 39.3893 1.90173 27.7333C1.90173 15.9513 11.0289 6.40002 22.2878 6.40002C33.3638 6.40002 42.3768 15.6435 42.6667 27.161L42.6314 44.4824C42.338 47.0679 40.2434 49.0667 37.6937 49.0667ZM9.22617 24.667C10.5612 18.3725 15.9275 13.6656 22.3444 13.6656C29.7657 13.6656 35.7818 19.9613 35.7818 27.7274C35.7818 27.7857 35.7825 27.8488 35.7831 27.9136C35.7846 28.0483 35.7861 28.1901 35.7818 28.3103V41.6939H28.7907V40.0685C26.877 41.1655 24.6803 41.7892 22.3444 41.7892C15.9275 41.7892 10.5612 37.0823 9.22617 30.7878C10.5043 30.4129 11.4416 29.1847 11.4416 27.7274C11.4416 26.2701 10.5043 25.0419 9.22617 24.667ZM8.33937 29.9683C9.52696 29.9683 10.4897 28.9609 10.4897 27.7181C10.4897 26.4753 9.52696 25.4678 8.33937 25.4678C7.15178 25.4678 6.18904 26.4753 6.18904 27.7181C6.18904 28.9609 7.15178 29.9683 8.33937 29.9683Z" fill="currentColor"/>
+            </svg>
+        </a>
+        <h4>
+            Powered by Avalonia, Styled by Russkyc.UI.Avalonia
+        </h4>
     </div>
 </div>
 <script type='module' src="./main.js"></script>
diff --git a/Russkyc.UI.Avalonia.Gallery/ViewModels/MainViewModel.cs b/Russkyc.UI.Avalonia.Gallery/ViewModels/MainViewModel.cs
index b74c82a..39661bf 100644
--- a/Russkyc.UI.Avalonia.Gallery/ViewModels/MainViewModel.cs
+++ b/Russkyc.UI.Avalonia.Gallery/ViewModels/MainViewModel.cs
@@ -1,40 +1,16 @@
-using System.Collections.Generic;
-using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
-using Russkyc.UI.Avalonia.Gallery.Views.Pages;
 
 namespace Russkyc.UI.Avalonia.Gallery.ViewModels;
 
 public partial class MainViewModel : ViewModelBase
 {
-    private List<object> _pages;
-
-    [ObservableProperty]
-    private int _activePageIndex;
-
     [ObservableProperty]
     private object _activePage;
 
-    public MainViewModel()
-    {
-        _pages = [
-            new ButtonView(),
-            new ToggleButtonView(),
-            new ToggleSwitchView(),
-            new RadioButtonView(),
-            new TextBoxView(),
-            new ComboBoxView(),
-            new CardView()
-        ];
-        
-        ActivePageIndex = 0;
-        ActivePage = _pages[0];
-    }
-
     [RelayCommand]
-    void OpenPage(int pageIndex)
+    void OpenPage(object page)
     {
-        ActivePage = _pages[pageIndex];
-        ActivePageIndex = pageIndex;
+        ActivePage = page;
     }
 }
\ No newline at end of file
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/MainView.axaml b/Russkyc.UI.Avalonia.Gallery/Views/MainView.axaml
index 1dc67be..6e018c9 100644
--- a/Russkyc.UI.Avalonia.Gallery/Views/MainView.axaml
+++ b/Russkyc.UI.Avalonia.Gallery/Views/MainView.axaml
@@ -13,19 +13,15 @@
     <Design.DataContext>
         <vm:MainViewModel />
     </Design.DataContext>
-    <UserControl.Styles>
-        <Style Selector="RadioButton.Navigation">
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
-            <Setter Property="HorizontalContentAlignment" Value="Left" />
-        </Style>
-    </UserControl.Styles>
     <Border BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,1,0,0">
         <Grid ColumnDefinitions="250,*">
             <Border
                 Grid.Column="0"
                 BorderBrush="{DynamicResource BorderBrush}"
                 BorderThickness="0,0,1,0">
-                <views:Sidebar DataContext="{Binding}" />
+                <ScrollViewer>
+                    <views:Sidebar DataContext="{Binding}" />
+                </ScrollViewer>
             </Border>
             <ScrollViewer Grid.Column="1">
                 <ContentControl Content="{Binding ActivePage}" />
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/ExamplesView.axaml b/Russkyc.UI.Avalonia.Gallery/Views/Pages/ExamplesView.axaml
new file mode 100644
index 0000000..2f1224c
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/ExamplesView.axaml
@@ -0,0 +1,11 @@
+<UserControl
+    x:Class="Russkyc.UI.Avalonia.Gallery.Views.Pages.ExamplesView"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    Welcome to Avalonia!
+</UserControl>
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/ExamplesView.axaml.cs b/Russkyc.UI.Avalonia.Gallery/Views/Pages/ExamplesView.axaml.cs
new file mode 100644
index 0000000..9055033
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/ExamplesView.axaml.cs
@@ -0,0 +1,13 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Russkyc.UI.Avalonia.Gallery.Views.Pages;
+
+public partial class ExamplesView : UserControl
+{
+    public ExamplesView()
+    {
+        InitializeComponent();
+    }
+}
\ No newline at end of file
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/InstallationView.axaml b/Russkyc.UI.Avalonia.Gallery/Views/Pages/InstallationView.axaml
new file mode 100644
index 0000000..99dd1f5
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/InstallationView.axaml
@@ -0,0 +1,58 @@
+<UserControl
+    x:Class="Russkyc.UI.Avalonia.Gallery.Views.Pages.InstallationView"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="24" Spacing="24">
+        <StackPanel Spacing="-2">
+            <StackPanel Orientation="Horizontal" Spacing="12">
+                <TextBlock
+                    FontSize="24"
+                    FontWeight="Bold"
+                    Text="Installation" />
+                <Border VerticalAlignment="Center" Classes="Pill">
+                    <TextBlock Text="Pre-release v0.1.0" />
+                </Border>
+            </StackPanel>
+            <TextBlock Text="Quick start and configuration guide." />
+        </StackPanel>
+        <StackPanel Spacing="8">
+            <TextBlock
+                FontSize="16"
+                FontWeight="SemiBold"
+                Text="Nuget Installation" />
+            <TextBlock Text="The package can be installed using the Nuget CLI, Package Manager, or other supported Nuget platforms" TextWrapping="Wrap" />
+            <TextBlock FontWeight="SemiBold" Text="CLI Installation" />
+            <TextBox
+                Padding="12"
+                CornerRadius="12"
+                FontSize="16"
+                IsReadOnly="True"
+                Text="dotnet add package Russkyc.UI.Avalonia --version 0.1.0-pre" />
+            <TextBlock FontWeight="SemiBold" Text="Package Manager Installation" />
+            <TextBox
+                Padding="12"
+                CornerRadius="12"
+                FontSize="16"
+                IsReadOnly="True"
+                Text="NuGet\Install-Package Russkyc.UI.Avalonia -Version 0.1.0-pre" />
+        </StackPanel>
+        <StackPanel Spacing="8">
+            <TextBlock
+                FontSize="16"
+                FontWeight="SemiBold"
+                Text="Configuration" />
+            <TextBlock Text="After installation, update App.axaml with the required resources" TextWrapping="Wrap" />
+            <TextBlock FontWeight="SemiBold" Text="App.Axaml" />
+            <TextBox
+                x:Name="ConfigurationBlock"
+                Padding="12"
+                CornerRadius="12"
+                FontSize="16"
+                IsReadOnly="True" />
+        </StackPanel>
+    </StackPanel>
+</UserControl>
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/InstallationView.axaml.cs b/Russkyc.UI.Avalonia.Gallery/Views/Pages/InstallationView.axaml.cs
new file mode 100644
index 0000000..7bed42c
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/InstallationView.axaml.cs
@@ -0,0 +1,35 @@
+using Avalonia.Controls;
+
+namespace Russkyc.UI.Avalonia.Gallery.Views.Pages;
+
+public partial class InstallationView : UserControl
+{
+    public InstallationView()
+    {
+        InitializeComponent();
+        ConfigurationBlock.Text = """
+                                  <Application
+                                      x:Class="Russkyc.UI.Avalonia.Gallery.App"
+                                      xmlns="https://github.com/avaloniaui"
+                                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                                      RequestedThemeVariant="Light">
+                                      <!--  RequestedThemeVariant="Default" ThemeVariant follows system theme variant.  -->
+                                      <!--  "Dark" or "Light" are other available options.  -->
+                                      <Application.Styles>
+                                          <FluentTheme />
+                                      </Application.Styles>
+                                      <Application.Resources>
+                                          <ResourceDictionary>
+                                              <ResourceDictionary.MergedDictionaries>
+                                                  <!--  Theme (Customizable)  -->
+                                                  <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Themes/Zinc.axaml" />
+                                                  <!--  Base (Required)  -->
+                                                  <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Base.axaml" />
+                                                  <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls.axaml" />
+                                              </ResourceDictionary.MergedDictionaries>
+                                          </ResourceDictionary>
+                                      </Application.Resources>
+                                  </Application>
+                                  """;
+    }
+}
\ No newline at end of file
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/IntroductionView.axaml b/Russkyc.UI.Avalonia.Gallery/Views/Pages/IntroductionView.axaml
new file mode 100644
index 0000000..b933572
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/IntroductionView.axaml
@@ -0,0 +1,39 @@
+<UserControl
+    x:Class="Russkyc.UI.Avalonia.Gallery.Views.Pages.IntroductionView"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="24" Spacing="24">
+        <StackPanel Spacing="-2">
+            <TextBlock
+                FontSize="24"
+                FontWeight="Bold"
+                Text="Russkyc.UI.Avalonia" />
+            <TextBlock Text="Clean, beautifully-designed, and customizable components for Avalonia Applications." />
+        </StackPanel>
+        <StackPanel Spacing="8">
+            <TextBlock
+                FontSize="16"
+                FontWeight="SemiBold"
+                Text="Why create a theme inspired by web design principles for a native platform?" />
+            <TextBlock Text="Creating a theme inspired by web design principles, particularly the way shadcn is designed, ensures a consistent, modern, and user-friendly experience across different platforms. Leveraging the consistent visual appeal from a widely known design language." TextWrapping="Wrap" />
+        </StackPanel>
+        <StackPanel Spacing="8">
+            <TextBlock
+                FontSize="16"
+                FontWeight="SemiBold"
+                Text="Is this themeable? What about customization?" />
+            <TextBlock Text="Yes! Russkyc.UI.Avalonia is themeable and easily customizable. We want to minimize the difficulty in templating and styling controls, all colors, values, and defaults, are defined in a single resource dictionary with support for both light and dark variants." TextWrapping="Wrap" />
+        </StackPanel>
+        <StackPanel Spacing="8">
+            <TextBlock
+                FontSize="16"
+                FontWeight="SemiBold"
+                Text="How can I get started?" />
+            <TextBlock Text="Installation and initial configuration information can be found in the Installation page." TextWrapping="Wrap" />
+        </StackPanel>
+    </StackPanel>
+</UserControl>
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/IntroductionView.axaml.cs b/Russkyc.UI.Avalonia.Gallery/Views/Pages/IntroductionView.axaml.cs
new file mode 100644
index 0000000..a832a02
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/IntroductionView.axaml.cs
@@ -0,0 +1,11 @@
+using Avalonia.Controls;
+
+namespace Russkyc.UI.Avalonia.Gallery.Views.Pages;
+
+public partial class IntroductionView : UserControl
+{
+    public IntroductionView()
+    {
+        InitializeComponent();
+    }
+}
\ No newline at end of file
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/PillView.axaml b/Russkyc.UI.Avalonia.Gallery/Views/Pages/PillView.axaml
new file mode 100644
index 0000000..3acc413
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/PillView.axaml
@@ -0,0 +1,62 @@
+<UserControl
+    x:Class="Russkyc.UI.Avalonia.Gallery.Views.Pages.PillView"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="24" Spacing="24">
+        <StackPanel Spacing="-2">
+            <TextBlock
+                FontSize="24"
+                FontWeight="Bold"
+                Text="Pill" />
+            <TextBlock Text="Displays a pill shaped control." />
+        </StackPanel>
+        <StackPanel Spacing="8">
+            <TextBlock
+                FontSize="16"
+                FontWeight="SemiBold"
+                Text="Pill Variants Preview" />
+            <Border Classes="Card">
+                <WrapPanel
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Orientation="Horizontal">
+                    <WrapPanel.Styles>
+                        <Style Selector="Border">
+                            <Setter Property="Margin" Value="4" />
+                        </Style>
+                    </WrapPanel.Styles>
+                    <Border Classes="Pill">
+                        <TextBlock Text="Standard Pill" />
+                    </Border>
+                    <Border Classes="Pill Primary">
+                        <TextBlock Text="Primary Pill" />
+                    </Border>
+                    <Border Classes="Pill Secondary">
+                        <TextBlock Text="Secondary Pill" />
+                    </Border>
+                    <Border Classes="Pill Destructive">
+                        <TextBlock Text="Destructive Pill" />
+                    </Border>
+                </WrapPanel>
+            </Border>
+        </StackPanel>
+        <StackPanel Spacing="8">
+            <TextBlock
+                FontSize="16"
+                FontWeight="SemiBold"
+                Text="Code" />
+            <ThemeVariantScope RequestedThemeVariant="Dark">
+                <TextBox
+                    Name="CodeBlock"
+                    Padding="12"
+                    CornerRadius="12"
+                    FontSize="16"
+                    IsReadOnly="True" />
+            </ThemeVariantScope>
+        </StackPanel>
+    </StackPanel>
+</UserControl>
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/PillView.axaml.cs b/Russkyc.UI.Avalonia.Gallery/Views/Pages/PillView.axaml.cs
new file mode 100644
index 0000000..2d3c8c9
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/PillView.axaml.cs
@@ -0,0 +1,37 @@
+using Avalonia.Controls;
+
+namespace Russkyc.UI.Avalonia.Gallery.Views.Pages;
+
+public partial class PillView : UserControl
+{
+    public PillView()
+    {
+        InitializeComponent();
+        CodeBlock.Text = """
+                         <Border Classes="Card">
+                             <WrapPanel
+                                 HorizontalAlignment="Center"
+                                 VerticalAlignment="Center"
+                                 Orientation="Horizontal">
+                                 <WrapPanel.Styles>
+                                     <Style Selector="Border">
+                                         <Setter Property="Margin" Value="4" />
+                                     </Style>
+                                 </WrapPanel.Styles>
+                                 <Border Classes="Pill">
+                                     <TextBlock Text="Standard Pill" />
+                                 </Border>
+                                 <Border Classes="Pill Primary">
+                                     <TextBlock Text="Primary Pill" />
+                                 </Border>
+                                 <Border Classes="Pill Secondary">
+                                     <TextBlock Text="Secondary Pill" />
+                                 </Border>
+                                 <Border Classes="Pill Destructive">
+                                     <TextBlock Text="Destructive Pill" />
+                                 </Border>
+                             </WrapPanel>
+                         </Border>
+                         """;
+    }
+}
\ No newline at end of file
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/ThemingView.axaml b/Russkyc.UI.Avalonia.Gallery/Views/Pages/ThemingView.axaml
new file mode 100644
index 0000000..979052f
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/ThemingView.axaml
@@ -0,0 +1,11 @@
+<UserControl
+    x:Class="Russkyc.UI.Avalonia.Gallery.Views.Pages.ThemingView"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    Welcome to Avalonia!
+</UserControl>
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Pages/ThemingView.axaml.cs b/Russkyc.UI.Avalonia.Gallery/Views/Pages/ThemingView.axaml.cs
new file mode 100644
index 0000000..b254960
--- /dev/null
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Pages/ThemingView.axaml.cs
@@ -0,0 +1,11 @@
+using Avalonia.Controls;
+
+namespace Russkyc.UI.Avalonia.Gallery.Views.Pages;
+
+public partial class ThemingView : UserControl
+{
+    public ThemingView()
+    {
+        InitializeComponent();
+    }
+}
\ No newline at end of file
diff --git a/Russkyc.UI.Avalonia.Gallery/Views/Sidebar.axaml b/Russkyc.UI.Avalonia.Gallery/Views/Sidebar.axaml
index b3f9c62..9199b71 100644
--- a/Russkyc.UI.Avalonia.Gallery/Views/Sidebar.axaml
+++ b/Russkyc.UI.Avalonia.Gallery/Views/Sidebar.axaml
@@ -4,23 +4,108 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:pages="clr-namespace:Russkyc.UI.Avalonia.Gallery.Views.Pages"
     xmlns:viewModels="clr-namespace:Russkyc.UI.Avalonia.Gallery.ViewModels"
+    x:Name="SidebarView"
     d:DesignWidth="250"
     x:DataType="viewModels:MainViewModel"
     mc:Ignorable="d">
-    <StackPanel Margin="12" Spacing="7">
+    <UserControl.Styles>
+        <Style Selector="RadioButton.Navigation">
+            <Setter Property="FontWeight" Value="Normal" />
+            <Setter Property="HorizontalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalContentAlignment" Value="Left" />
+        </Style>
+    </UserControl.Styles>
+    <Interaction.Behaviors>
+        <EventTriggerBehavior EventName="Loaded" SourceObject="SidebarView">
+            <InvokeCommandAction Command="{Binding OpenPageCommand}">
+                <InvokeCommandAction.CommandParameter>
+                    <pages:IntroductionView />
+                </InvokeCommandAction.CommandParameter>
+            </InvokeCommandAction>
+            <ChangePropertyAction
+                PropertyName="IsChecked"
+                TargetObject="IndexNav"
+                Value="True" />
+        </EventTriggerBehavior>
+    </Interaction.Behaviors>
+    <StackPanel Margin="12" Spacing="4">
         <TextBlock
-            Margin="0,0,0,8"
-            FontSize="18"
+            Margin="0,8"
+            FontSize="16"
+            FontWeight="SemiBold"
+            Text="Overview" />
+        <RadioButton
+            x:Name="IndexNav"
+            Classes="Toggle Navigation"
+            Command="{Binding OpenPageCommand}"
+            Content="Introduction">
+            <RadioButton.CommandParameter>
+                <pages:IntroductionView />
+            </RadioButton.CommandParameter>
+        </RadioButton>
+        <RadioButton
+            HorizontalContentAlignment="Stretch"
+            Classes="Toggle Navigation"
+            Command="{Binding OpenPageCommand}">
+            <RadioButton.Content>
+                <Grid>
+                    <TextBlock Text="Installation" />
+                    <Border HorizontalAlignment="Right" Classes="Pill">
+                        <TextBlock Text="v0.1.0-pre" />
+                    </Border>
+                </Grid>
+            </RadioButton.Content>
+            <RadioButton.CommandParameter>
+                <pages:InstallationView />
+            </RadioButton.CommandParameter>
+        </RadioButton>
+        <RadioButton
+            HorizontalContentAlignment="Stretch"
+            Classes="Toggle Navigation"
+            Command="{Binding OpenPageCommand}"
+            IsEnabled="False">
+            <RadioButton.CommandParameter>
+                <pages:ThemingView />
+            </RadioButton.CommandParameter>
+            <RadioButton.Content>
+                <Grid>
+                    <TextBlock Text="Theming" />
+                    <Border HorizontalAlignment="Right" Classes="Pill Secondary">
+                        <TextBlock Text="Soon" />
+                    </Border>
+                </Grid>
+            </RadioButton.Content>
+        </RadioButton>
+        <RadioButton
+            HorizontalContentAlignment="Stretch"
+            Classes="Toggle Navigation"
+            Command="{Binding OpenPageCommand}"
+            IsEnabled="False">
+            <RadioButton.CommandParameter>
+                <pages:ExamplesView />
+            </RadioButton.CommandParameter>
+            <RadioButton.Content>
+                <Grid>
+                    <TextBlock Text="Examples" />
+                    <Border HorizontalAlignment="Right" Classes="Pill Secondary">
+                        <TextBlock Text="Soon" />
+                    </Border>
+                </Grid>
+            </RadioButton.Content>
+        </RadioButton>
+        <TextBlock
+            Margin="0,8"
+            FontSize="16"
             FontWeight="SemiBold"
             Text="Components" />
         <RadioButton
             Classes="Toggle Navigation"
             Command="{Binding OpenPageCommand}"
-            Content="Button"
-            IsChecked="True">
+            Content="Button">
             <RadioButton.CommandParameter>
-                <x:Int32>0</x:Int32>
+                <pages:ButtonView />
             </RadioButton.CommandParameter>
         </RadioButton>
         <RadioButton
@@ -28,7 +113,7 @@
             Command="{Binding OpenPageCommand}"
             Content="ToggleButton">
             <RadioButton.CommandParameter>
-                <x:Int32>1</x:Int32>
+                <pages:ToggleButtonView />
             </RadioButton.CommandParameter>
         </RadioButton>
         <RadioButton
@@ -36,7 +121,7 @@
             Command="{Binding OpenPageCommand}"
             Content="ToggleSwitch">
             <RadioButton.CommandParameter>
-                <x:Int32>2</x:Int32>
+                <pages:ToggleSwitchView />
             </RadioButton.CommandParameter>
         </RadioButton>
         <RadioButton
@@ -44,7 +129,7 @@
             Command="{Binding OpenPageCommand}"
             Content="RadioButton">
             <RadioButton.CommandParameter>
-                <x:Int32>3</x:Int32>
+                <pages:RadioButtonView />
             </RadioButton.CommandParameter>
         </RadioButton>
         <RadioButton
@@ -52,7 +137,7 @@
             Command="{Binding OpenPageCommand}"
             Content="Textbox">
             <RadioButton.CommandParameter>
-                <x:Int32>4</x:Int32>
+                <pages:TextBoxView />
             </RadioButton.CommandParameter>
         </RadioButton>
         <RadioButton
@@ -60,7 +145,7 @@
             Command="{Binding OpenPageCommand}"
             Content="ComboBox">
             <RadioButton.CommandParameter>
-                <x:Int32>5</x:Int32>
+                <pages:ComboBoxView />
             </RadioButton.CommandParameter>
         </RadioButton>
         <RadioButton
@@ -68,7 +153,23 @@
             Command="{Binding OpenPageCommand}"
             Content="Card">
             <RadioButton.CommandParameter>
-                <x:Int32>6</x:Int32>
+                <pages:CardView />
+            </RadioButton.CommandParameter>
+        </RadioButton>
+        <RadioButton
+            HorizontalContentAlignment="Stretch"
+            Classes="Toggle Navigation"
+            Command="{Binding OpenPageCommand}">
+            <RadioButton.Content>
+                <Grid>
+                    <TextBlock Text="Pill" />
+                    <Border HorizontalAlignment="Right" Classes="Pill Primary">
+                        <TextBlock Text="New" />
+                    </Border>
+                </Grid>
+            </RadioButton.Content>
+            <RadioButton.CommandParameter>
+                <pages:PillView />
             </RadioButton.CommandParameter>
         </RadioButton>
     </StackPanel>
diff --git a/Russkyc.UI.Avalonia/Base.axaml b/Russkyc.UI.Avalonia/Base.axaml
index 6953af6..9299da9 100644
--- a/Russkyc.UI.Avalonia/Base.axaml
+++ b/Russkyc.UI.Avalonia/Base.axaml
@@ -1,6 +1,5 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!-- Base -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Base  -->
     <SolidColorBrush x:Key="BackgroundBrush" Color="{DynamicResource Background}" />
     <SolidColorBrush x:Key="ForegroundBrush" Color="{DynamicResource Foreground}" />
     <SolidColorBrush x:Key="CardBrush" Color="{DynamicResource Card}" />
diff --git a/Russkyc.UI.Avalonia/Controls.axaml b/Russkyc.UI.Avalonia/Controls.axaml
index f6275a9..d9b79f8 100644
--- a/Russkyc.UI.Avalonia/Controls.axaml
+++ b/Russkyc.UI.Avalonia/Controls.axaml
@@ -7,8 +7,8 @@
                 <Setter Property="FontSize" Value="14" />
             </ControlTheme>
         </ResourceDictionary>
-        <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls/Button.axaml" />
         <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls/Border.axaml" />
+        <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls/Button.axaml" />
         <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls/RadioButton.axaml" />
         <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls/ToggleButton.axaml" />
         <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls/ToggleSwitch.axaml" />
diff --git a/Russkyc.UI.Avalonia/Controls/Border.axaml b/Russkyc.UI.Avalonia/Controls/Border.axaml
index 8e104bb..c6e0b12 100644
--- a/Russkyc.UI.Avalonia/Controls/Border.axaml
+++ b/Russkyc.UI.Avalonia/Controls/Border.axaml
@@ -1,27 +1,89 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!-- Design Preview -->
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Design Preview  -->
     <Design.PreviewWith>
-        <Border Classes="Card"
+        <StackPanel Spacing="12">
+            <Border
                 Width="350"
                 Margin="80"
-                Background="{DynamicResource BackgroundBrush}">
-            <StackPanel Spacing="7">
-                <StackPanel Margin="0,0,0,16">
-                    <TextBlock Text="Login" FontSize="24" FontWeight="Bold"/>
-                    <TextBlock FontSize="16" Foreground="#3F3F3F" Text="Login or sign-up to an account"/>
+                Background="{DynamicResource BackgroundBrush}"
+                Classes="Card">
+                <StackPanel Spacing="7">
+                    <StackPanel Margin="0,0,0,16">
+                        <TextBlock
+                            FontSize="24"
+                            FontWeight="Bold"
+                            Text="Login" />
+                        <TextBlock
+                            FontSize="16"
+                            Foreground="#3F3F3F"
+                            Text="Login or sign-up to an account" />
+                    </StackPanel>
+                    <TextBox Watermark="Username" />
+                    <TextBox
+                        Classes="ShowHide"
+                        PasswordChar="●"
+                        Watermark="Password">
+                        Password
+                    </TextBox>
+                    <Button
+                        Margin="0,16,0,0"
+                        HorizontalAlignment="Stretch"
+                        Content="Login" />
+                    <Button
+                        HorizontalAlignment="Stretch"
+                        Classes="Ghost"
+                        Content="Create Account" />
                 </StackPanel>
-                <TextBox Watermark="Username"/>
-                <TextBox Watermark="Password" PasswordChar="●" Classes="ShowHide">Password</TextBox>
-                <Button Margin="0,16,0,0" HorizontalAlignment="Stretch" Content="Login" />
-                <Button HorizontalAlignment="Stretch" Classes="Ghost" Content="Create Account" />
+            </Border>
+            <StackPanel
+                Margin="0,0,0,20"
+                HorizontalAlignment="Center"
+                Orientation="Horizontal"
+                Spacing="12">
+                <Border Classes="Pill">
+                    <TextBlock Text="Standard Pill" />
+                </Border>
+                <Border Classes="Pill Primary">
+                    <TextBlock Text="Primary Pill" />
+                </Border>
+                <Border Classes="Pill Secondary">
+                    <TextBlock Text="Secondary Pill" />
+                </Border>
+                <Border Classes="Pill Destructive">
+                    <TextBlock Text="Destructive Pill" />
+                </Border>
             </StackPanel>
-        </Border>
+        </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type Border}" TargetType="Border">
+        <Style Selector="^.Pill">
+            <Setter Property="TextBlock.FontSize" Value="10" />
+            <Setter Property="TextBlock.FontWeight" Value="SemiBold" />
+            <Setter Property="Padding" Value="8,2" />
+            <Setter Property="Background" Value="{DynamicResource BackgroundBrush}" />
+            <Setter Property="TextBlock.Foreground" Value="{DynamicResource ForegroundBrush}" />
+            <Setter Property="CornerRadius" Value="12" />
+            <Setter Property="BorderThickness" Value="{DynamicResource BorderThickness}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}" />
+            <Style Selector="^.Primary">
+                <Setter Property="Background" Value="{DynamicResource PrimaryBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}" />
+                <Setter Property="TextBlock.Foreground" Value="{DynamicResource PrimaryForegroundBrush}" />
+            </Style>
+            <Style Selector="^.Secondary">
+                <Setter Property="Background" Value="{DynamicResource SecondaryBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource SecondaryBrush}" />
+                <Setter Property="TextBlock.Foreground" Value="{DynamicResource SecondaryForegroundBrush}" />
+            </Style>
+            <Style Selector="^.Destructive">
+                <Setter Property="Background" Value="{DynamicResource DestructiveBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DestructiveBrush}" />
+                <Setter Property="TextBlock.Foreground" Value="{DynamicResource DestructiveForegroundBrush}" />
+            </Style>
+        </Style>
         <Style Selector="^.Card">
-            <Setter Property="Padding" Value="28"/>
-            <Setter Property="Background" Value="{DynamicResource Background}"/>
+            <Setter Property="Padding" Value="28" />
+            <Setter Property="Background" Value="{DynamicResource Background}" />
             <Setter Property="CornerRadius" Value="12" />
             <Setter Property="BorderThickness" Value="{DynamicResource BorderThickness}" />
             <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}" />
diff --git a/Russkyc.UI.Avalonia/PackageIcon.png b/Russkyc.UI.Avalonia/PackageIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..a14e17b2220c0a63de1405c2fc0e849eb86623d4
GIT binary patch
literal 11720
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

literal 0
HcmV?d00001

diff --git a/Russkyc.UI.Avalonia/README.md b/Russkyc.UI.Avalonia/README.md
new file mode 100644
index 0000000..c332e57
--- /dev/null
+++ b/Russkyc.UI.Avalonia/README.md
@@ -0,0 +1,44 @@
+## Russkyc.UI.Avalonia - Create Beautiful UI's for Avalonia
+
+Russkyc.UI.Avalonia provides clean, beautifully-designed, and customizable components inspired by the design of [shadcn/ui](https://ui.shadcn.com) for Avalonia applications.
+
+## Configuration
+
+Update Resources in App.axaml
+
+```xaml
+<Application.Resources>
+    <ResourceDictionary>
+        <ResourceDictionary.MergedDictionaries>
+            <!-- Theme (Customizable) -->
+            <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Themes/Zinc.axaml" />
+            <!-- Base (Required) -->
+            <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Base.axaml" />
+            <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls.axaml" />
+        </ResourceDictionary.MergedDictionaries>
+    </ResourceDictionary>
+</Application.Resources>
+```
+
+All theme colors and defaults (including radius, border thickness, and more) can be customized. Please see [Theme and Styling](#theme-and-styling)
+
+## Usage
+
+```xaml
+<!-- Button Sampler -->
+<StackPanel Orientation="Horizontal" Spacing="7">
+    <Button Content="Primary" />
+    <Button Content="Destructive" Classes="Destructive" />
+    <Button Content="Outline" Classes="Outline" />
+    <Button Content="Ghost" Classes="Ghost" />
+    <Button Content="Link" Classes="Link" />
+    <Button Content="Disabled" IsEnabled="False" />
+</StackPanel>
+```
+Components are built on top of the existing Avalonia controls.
+No fancy namespace imports needed, all supported controls are
+automatically themed and changed using supported class variants.
+
+## Theming and More Information
+
+[Github Repository](https://github.com/russkyc/russkyc-ui-avalonia)
\ No newline at end of file
diff --git a/Russkyc.UI.Avalonia/Russkyc.UI.Avalonia.csproj b/Russkyc.UI.Avalonia/Russkyc.UI.Avalonia.csproj
index 0f880dc..baa2e39 100644
--- a/Russkyc.UI.Avalonia/Russkyc.UI.Avalonia.csproj
+++ b/Russkyc.UI.Avalonia/Russkyc.UI.Avalonia.csproj
@@ -1,20 +1,38 @@
 <Project Sdk="Microsoft.NET.Sdk">
     <PropertyGroup>
-        <TargetFramework>net8.0</TargetFramework>
+        <TargetFramework>netstandard2.0</TargetFramework>
         <Nullable>enable</Nullable>
         <SuppressTrimAnalysisWarnings>false</SuppressTrimAnalysisWarnings>
         <EnableTrimAnalyzer>true</EnableTrimAnalyzer>
         <TrimmerSingleWarn>false</TrimmerSingleWarn>
         <IsTrimmable>true</IsTrimmable>
         <AvaloniaXamlC>true</AvaloniaXamlC>
+        <LangVersion>latestmajor</LangVersion>
     </PropertyGroup>
-
+    
+    <PropertyGroup>
+        <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
+        <Title>Russkyc.UI.Avalonia</Title>
+        <Authors>russkyc</Authors>
+        <Description>Clean, beautifully-designed, and customizable components for Avalonia applications</Description>
+        <Copyright>russkyc 2025</Copyright>
+        <PackageTags>avalonia shadcn ui controls theme avalonia-ui components</PackageTags>
+        <PackageProjectUrl>https://github.com/russkyc/russkyc-ui-avalonia</PackageProjectUrl>
+        <RepositoryUrl>https://github.com/russkyc/russkyc-ui-avalonia</RepositoryUrl>
+        <Version>0.1.0-pre</Version>
+        <PackageLicenseExpression>MIT</PackageLicenseExpression>
+        <IsPackable>true</IsPackable>
+        <PackageIcon>PackageIcon.png</PackageIcon>
+        <PackageReadmeFile>README.md</PackageReadmeFile>
+    </PropertyGroup>
+    
     <ItemGroup>
         <PackageReference Include="Avalonia"/>
-        <PackageReference Include="Avalonia.Svg" />
     </ItemGroup>
 
     <ItemGroup>
-      <Folder Include="Fonts\" />
+        <Resource Include="PackageIcon.png" Pack="true" PackagePath="" />
+        <None Include="README.md" Pack="true" PackagePath="\"/>
     </ItemGroup>
+    
 </Project>
diff --git a/Russkyc.UI.Avalonia/Themes/Zinc.axaml b/Russkyc.UI.Avalonia/Themes/Zinc.axaml
index d687b66..b3ea4bd 100644
--- a/Russkyc.UI.Avalonia/Themes/Zinc.axaml
+++ b/Russkyc.UI.Avalonia/Themes/Zinc.axaml
@@ -5,7 +5,6 @@
     <Thickness x:Key="ActiveBorderThickness">1</Thickness>
     <Thickness x:Key="Padding">12,7</Thickness>
     <x:Double x:Key="ControlMinHeight">36</x:Double>
-
     <!--  Theme  -->
     <ResourceDictionary.ThemeDictionaries>
         <!--  Light  -->