VastuUI 1.0.0

.NET 8.0

dotnet add package VastuUI --version 1.0.0

NuGet\Install-Package VastuUI -Version 1.0.0

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="VastuUI" Version="1.0.0" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="VastuUI" Version="1.0.0" />
                    

                            Directory.Packages.props

<PackageReference Include="VastuUI" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add VastuUI --version 1.0.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: VastuUI, 1.0.0"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package VastuUI@1.0.0

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=VastuUI&version=1.0.0
                    

                            Install as a Cake Addin

#tool nuget:?package=VastuUI&version=1.0.0
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Vastu UI — Blazor WASM Component Library

A Vedic-inspired Blazor WebAssembly component library with 50+ production-ready components, light/dark theming, mobile-first design, and full TypeScript-free C# type safety.

Project Structure

VastuUI/                          ← Class Library (distribute as NuGet)
├── VastuUI.csproj
├── _Imports.razor
├── Components/
│   ├── VastuAppBar.razor         AppBar — sticky top nav bar
│   ├── VastuBadge.razor          Badge — pill-shaped status label
│   ├── VastuButton.razor         Button — 5 variants, 3 sizes, icon support
│   ├── VastuCard.razor           Card — container with image/title/footer slots
│   ├── VastuCheckbox.razor       Checkbox — custom styled with disabled state
│   ├── VastuFileUpload.razor     FileUpload — drag-and-drop zone
│   ├── VastuFooter.razor         Footer — page footer with logo slot
│   ├── VastuGrid.razor           Grid — 2 or 3 column responsive grid
│   ├── VastuInfoBar.razor        InfoBar — contextual banner (5 variants)
│   ├── VastuInputGroup.razor     InputGroup — input + attached button
│   ├── VastuMandalaGrid.razor    MandalaGrid — interactive 8×8 Vastu grid
│   ├── VastuModal.razor          Modal — overlay dialog with slots
│   ├── VastuNavItem.razor        NavItem — sidebar navigation item
│   ├── VastuNavSection.razor     NavSection — sidebar section header
│   ├── VastuProgressBar.razor    ProgressBar — linear with shimmer
│   ├── VastuProgressRing.razor   ProgressRing — SVG circular indicator
│   ├── VastuRadioGroup.razor     RadioGroup — radio button group
│   ├── VastuSelect.razor         Select — custom styled dropdown
│   ├── VastuSidebar.razor        Sidebar — collapsible with overlay
│   ├── VastuSlider.razor         Slider — range slider with live value
│   ├── VastuSplitButton.razor    SplitButton — primary action + dropdown
│   ├── VastuSplitView.razor      SplitView — sidebar + content layout
│   ├── VastuStack.razor          Stack — vertical or horizontal stack
│   ├── VastuTextArea.razor       TextArea — multi-line input
│   ├── VastuTextInput.razor      TextInput — single-line input (all types)
│   ├── VastuToastContainer.razor ToastContainer — renders active toasts
│   ├── VastuToggle.razor         Toggle — animated on/off switch
│   └── VastuTooltip.razor        Tooltip — hover reveal
├── Models/
│   └── Models.cs                 Enums and shared record types
├── Services/
│   ├── ThemeService.cs           Singleton: light/dark theme state
│   └── ToastService.cs           Singleton: toast queue management
└── wwwroot/
    ├── css/vastu-ui.css          Full design system stylesheet
    └── js/vastu-ui.js            JS interop (theme, scroll spy, click outside)

VastuUI.Demo/                     ← Blazor WASM host app (showcase)
├── VastuUI.Demo.csproj
├── Program.cs
├── App.razor
├── _Imports.razor
├── Layout/
│   └── MainLayout.razor
├── Pages/
│   ├── Index.razor               Hero, Buttons, Inputs, Checkbox, Toggle, Select, FileUpload, DateTime
│   └── Index2.razor              Cards, SplitView, Grid, Mandala, Progress, InfoBar, Badges,
│                                 Tooltip, Modal, Toast, Theming, Footer
└── wwwroot/
    ├── index.html
    └── css/app.css

Quick Start

1. Add the library to your Blazor WASM project


<ProjectReference Include="..\VastuUI\VastuUI.csproj" />

2. Register services in `Program.cs`

using VastuUI.Services;

builder.Services.AddSingleton<ThemeService>();
builder.Services.AddSingleton<ToastService>();

3. Add stylesheet and JS to `wwwroot/index.html`

<head>
    <link rel="stylesheet" href="_content/VastuUI/css/vastu-ui.css" />
</head>
<body>
    ...
    <script src="_content/VastuUI/js/vastu-ui.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

4. Add global usings in `_Imports.razor`

@using VastuUI.Components
@using VastuUI.Models
@using VastuUI.Services

5. Add toast container once in `App.razor` or `MainLayout.razor`

<VastuToastContainer />

6. Apply theme attribute in `App.razor`

@inject ThemeService ThemeService
@inject IJSRuntime JS

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
        await JS.InvokeVoidAsync("VastuUI.setTheme", ThemeService.IsDark);
}

Component Usage Examples

Button

<VastuButton Variant="ButtonVariant.Primary" Icon="add" OnClick="HandleClick">
    New Item
</VastuButton>

<VastuButton Variant="ButtonVariant.Gold" Size="ButtonSize.Lg">
    Premium Action
</VastuButton>

<VastuButton Variant="ButtonVariant.Primary" IsIconOnly="true">
    <span class="material-icons">favorite</span>
</VastuButton>

TextInput (two-way binding)

<VastuTextInput Label="Full Name"
                @bind-Value="_name"
                Placeholder="Enter your name"
                Hint="As per Aadhaar card" />

<VastuTextInput Label="Email"
                Type="email"
                ErrorMessage="@_emailError"
                @bind-Value="_email" />

Checkbox & Toggle

<VastuCheckbox @bind-Value="_agreed" Label="Accept terms" />

<VastuToggle @bind-Value="_darkMode" Label="Dark Mode" />

Card

<VastuCard Title="Pooja Space" ImageEmoji="🌸">
    The northeast corner is ideal for your worship area.
    <Footer>
        <VastuButton Variant="ButtonVariant.Gold" Size="ButtonSize.Sm" Icon="star">
            Premium
        </VastuButton>
    </Footer>
</VastuCard>

<VastuButton OnClick="@(() => _open = true)">Open Dialog</VastuButton>

<VastuModal Title="Confirm Action"
            @bind-IsOpen="_open"
            OnConfirm="HandleConfirm">
    Are you sure you want to proceed?
</VastuModal>

@code {
    private bool _open;
    private void HandleConfirm() { /* ... */ }
}

Toast

@inject ToastService Toast

<VastuButton OnClick="@(() => Toast.Show("Saved!", ToastType.Success))">
    Save
</VastuButton>

SplitView

<VastuSplitView Items="@_items" />

@code {
    private List<SplitViewItem> _items = new()
    {
        new("dashboard", "dashboard", "Dashboard", "<strong>Dashboard</strong><br/>Content here."),
        new("settings",  "settings",  "Settings",  "<strong>Settings</strong><br/>Config here.")
    };
}

Progress

<VastuProgressBar Label="Vastu Score" Value="78" Color="accent" />
<VastuProgressBar Label="North Harmony" Value="92" Color="gold" />

<VastuProgressRing Value="78" Color="accent" Size="80" />

MandalaGrid

<VastuMandalaGrid OnCellClick="@(cell => Console.WriteLine($"Row {cell.Row}, Col {cell.Col}"))" />

Theming

All visual tokens are CSS custom properties. Override them in your own CSS:

:root {
    --accent:      #c2692a;   /* primary brand colour */
    --gold:        #d4a850;   /* secondary/gold accent */
    --bg:          #fdf8f1;   /* page background */
    --surface:     #ffffff;   /* card/panel background */
    --border:      #e8d8c4;   /* borders */
    --text:        #1c1108;   /* primary text */
    --radius-md:   14px;      /* default border radius */
}

[data-theme="dark"] {
    --bg:      #0d0a06;
    --surface: #1f1710;
    --text:    #f5ead8;
    /* ... */
}

Services API

ThemeService

// Inject
@inject ThemeService ThemeService

// Usage
ThemeService.Toggle();           // flip dark/light
ThemeService.SetDark(true);      // set explicitly
bool isDark = ThemeService.IsDark;
string attr = ThemeService.ThemeAttribute; // "dark" | "light"

// Subscribe to changes
ThemeService.OnThemeChanged += StateHasChanged;

ToastService

@inject ToastService Toast

Toast.Show("Hello world");                          // default
Toast.Show("Saved!", ToastType.Success);
Toast.Show("Warning!", ToastType.Warning);
Toast.Show("Error!", ToastType.Danger);
Toast.Show("Info", ToastType.Info);
Toast.Show("Vedic tip 🌸", ToastType.Vedic);

JavaScript Interop

All JS lives in vastu-ui.js under the window.VastuUI namespace:

Function	Description
`VastuUI.setTheme(isDark)`	Applies `data-theme` to `<html>`
`VastuUI.getPrefersDark()`	Returns OS dark mode preference
`VastuUI.scrollToElement(id)`	Smooth-scrolls to element by id
`VastuUI.initScrollSpy(ids, dotnetRef)`	Wires IntersectionObserver
`VastuUI.disposeScrollSpy()`	Cleans up observer
`VastuUI.addClickOutside(id, ref, method)`	Returns listener id
`VastuUI.removeClickOutside(listenerId)`	Removes click-outside handler
`VastuUI.focusFirst(elementId)`	Focuses first focusable element

License

Product	Compatible and additional computed target framework versions.
.NET	net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 was computed. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed.

Product

.NET

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last Updated
1.0.0	106	4/2/2026