GANBlazor.UI 0.3.0

.NET 10.0

dotnet add package GANBlazor.UI --version 0.3.0

NuGet\Install-Package GANBlazor.UI -Version 0.3.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="GANBlazor.UI" Version="0.3.0" />

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

<PackageVersion Include="GANBlazor.UI" Version="0.3.0" />
                    

                            Directory.Packages.props

<PackageReference Include="GANBlazor.UI" />
                    

                            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 GANBlazor.UI --version 0.3.0

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

#r "nuget: GANBlazor.UI, 0.3.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 GANBlazor.UI@0.3.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=GANBlazor.UI&version=0.3.0
                    

                            Install as a Cake Addin

#tool nuget:?package=GANBlazor.UI&version=0.3.0
                    

                            Install as a Cake Tool

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

🎨 GANBlazor.UI

A modern, minimal Blazor UI component library inspired by shadcn/ui. Build beautiful, accessible web applications with pre-styled components that integrate seamlessly with Tailwind CSS.

📦 Current Version: 0.2.0
📋 View Changelog | 📚 Component Documentation

✨ Features

🎯 15+ Components - Button, Form, Card, Alert, Badge, Modal, and more
🎨 Tailwind CSS - Built with Tailwind utility classes for easy customization
♿ Accessible - ARIA-compliant components with keyboard navigation support
🔧 Flexible - Customizable variants, sizes, and classes
🎭 Icons - Blazor.Heroicons integration for beautiful icons
📦 Lightweight - Zero JavaScript dependencies (except Tailwind)
🚀 Ready to Use - Drop in and start building immediately

🎨 Component Overview

✅ Available Components (v0.2.0)

Form & Input:

Button - Versatile button with 5 variants (Default, Outline, Ghost, Danger, Unstyled)
Form - Form wrapper with EditContext support
FormField - Field grouping with label and validation
FormInput - Styled input with validation
FormMessage - Validation messages

Layout & Structure:

Card - Container with shadow and border
CardHeader - Card header section
CardContent - Main card content
CardFooter - Card footer section

Feedback & Status:

Alert - Contextual alerts (Success, Warning, Error, Info)
Badge - Status indicators and labels (7 variants, 3 sizes)

Overlays:

Modal - Dialog component with backdrop
ModalHeader - Modal header section
ModalContent - Modal content area
ModalFooter - Modal footer with actions

📚 View Complete Component Documentation →

📦 Installation

Step 1: Install the NuGet Package

dotnet add package GANBlazor.UI

Or via Package Manager Console:

Install-Package GANBlazor.UI

Step 2: Install Tailwind CSS

GANBlazor.UI requires Tailwind CSS v4+ in your project.

Install Tailwind CSS via npm:

npm install tailwindcss @tailwindcss/cli

Create your input CSS file (e.g., wwwroot/css/input.css):

@import "tailwindcss";

Build your CSS:

npx @tailwindcss/cli -i ./wwwroot/css/input.css -o ./wwwroot/css/output.css --watch

Add both stylesheets to your App.razor:

<head>
    
    <link rel="stylesheet" href="css/output.css" />

    
    <link rel="stylesheet" href="_content/GANBlazor.UI/ganblazor-ui.min.css" />
</head>

Important: Both stylesheets are required.

Step 3: Add Imports

Add to your _Imports.razor:

@using GANBlazor.UI.Components
@using GANBlazor.UI.Components.UI
@using GANBlazor.UI.Classes.UI
@using static GANBlazor.UI.Classes.UI.ButtonTypes
@using Blazor.Heroicons

🚀 Quick Start Examples

Button Component

@page "/example"


<Button Variant="ButtonVariant.Default">Default</Button>
<Button Variant="ButtonVariant.Outline">Outline</Button>
<Button Variant="ButtonVariant.Ghost">Ghost</Button>
<Button Variant="ButtonVariant.Danger">Delete</Button>


<Button Variant="ButtonVariant.Unstyled"
        Class="bg-purple-600 hover:bg-purple-700 text-white">
    Custom
</Button>


<Button Icon="check" IconType="outline">
    Save Changes
</Button>


<Button Loading="@isLoading" OnClick="HandleSubmit">
    Submit
</Button>

@code {
    bool isLoading = false;

    async Task HandleSubmit()
    {
        isLoading = true;
        await Task.Delay(2000);
        isLoading = false;
    }
}

Card Component

<Card>
    <CardHeader>
        <h3 class="text-lg font-semibold">Card Title</h3>
    </CardHeader>
    <CardContent>
        <p>This is the card content.</p>
    </CardContent>
    <CardFooter>
        <Button>Action</Button>
    </CardFooter>
</Card>

Alert Component

<Alert Variant="AlertVariant.Success"
       Icon="check-circle"
       Title="Success!"
       Dismissible="true">
    Your changes have been saved.
</Alert>

<Alert Variant="AlertVariant.Error"
       Icon="exclamation-triangle"
       Title="Error">
    Something went wrong.
</Alert>

<Button OnClick="() => showModal = true">Open Modal</Button>

<Modal @bind-IsOpen="showModal" Size="ModalSize.Large">
    <ModalHeader>
        <h3 class="text-lg font-semibold">Confirm Action</h3>
    </ModalHeader>
    <ModalContent>
        <p>Are you sure you want to proceed?</p>
    </ModalContent>
    <ModalFooter>
        <Button Variant="ButtonVariant.Ghost" OnClick="() => showModal = false">
            Cancel
        </Button>
        <Button Variant="ButtonVariant.Danger" OnClick="HandleConfirm">
            Confirm
        </Button>
    </ModalFooter>
</Modal>

@code {
    bool showModal = false;

    void HandleConfirm()
    {
        showModal = false;
        // Handle action
    }
}

Form Component

<Form Model="@model" OnSubmit="HandleSubmit">
    <FormField Label="Email" Required="true">
        <FormInput @bind-Value="model.Email" Type="email" />
        <MessageSlot>
            <ValidationMessage For="@(() => model.Email)" />
        </MessageSlot>
    </FormField>

    <FormField Label="Password" Required="true">
        <FormInput @bind-Value="model.Password" Type="password" />
        <MessageSlot>
            <ValidationMessage For="@(() => model.Password)" />
        </MessageSlot>
    </FormField>

    <Button Type="submit">Login</Button>
</Form>

@code {
    LoginModel model = new();

    void HandleSubmit(EditContext context)
    {
        if (context.Validate())
        {
            // Process form
        }
    }

    public class LoginModel
    {
        [Required]
        [EmailAddress]
        public string Email { get; set; }

        [Required]
        public string Password { get; set; }
    }
}

📚 Documentation

Component Documentation - Complete API reference with examples
Changelog - Version history and release notes

🎨 Customization

Using the Unstyled Variant

For complete style control, use the Unstyled variant:

<Button Variant="ButtonVariant.Unstyled"
        Class="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white px-4 py-2 rounded-lg">
    Gradient Button
</Button>

Overriding Component Styles

Use the Class parameter with Tailwind's important modifier:

<Card Class="!bg-gradient-to-br from-blue-50 to-indigo-50">
    <CardContent>Custom background</CardContent>
</Card>

<Alert Variant="AlertVariant.Info" Class="!border-2 !border-blue-500">
    Custom border
</Alert>

🎯 What's New in v0.2.0

Major Component Library Expansion!

✅ 4 New Component Families - Card, Alert, Badge, Modal
✅ 10 New Components Total - CardHeader, CardContent, CardFooter, ModalHeader, ModalContent, ModalFooter, and more
✅ New Documentation Structure - Separate files for changelog and component docs
✅ Enhanced Customization - More variants, sizes, and options

View Full Changelog →

🌟 Example: Complete Dashboard Page

@page "/dashboard"

<div class="container mx-auto p-6 space-y-6">
    
    <Alert Variant="AlertVariant.Success"
           Icon="check-circle"
           Title="Welcome back!"
           Dismissible="true">
        You have 3 new notifications.
    </Alert>

    
    <div class="grid md:grid-cols-3 gap-4">
        <Card>
            <CardHeader>
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold">Total Users</h3>
                    <Badge Variant="BadgeVariant.Success">+12%</Badge>
                </div>
            </CardHeader>
            <CardContent>
                <p class="text-3xl font-bold">1,234</p>
            </CardContent>
        </Card>

        <Card>
            <CardHeader>
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold">Revenue</h3>
                    <Badge Variant="BadgeVariant.Primary">+8%</Badge>
                </div>
            </CardHeader>
            <CardContent>
                <p class="text-3xl font-bold">$45,231</p>
            </CardContent>
        </Card>

        <Card>
            <CardHeader>
                <div class="flex justify-between items-center">
                    <h3 class="text-lg font-semibold">Active Projects</h3>
                    <Badge Variant="BadgeVariant.Warning">3</Badge>
                </div>
            </CardHeader>
            <CardContent>
                <p class="text-3xl font-bold">12</p>
            </CardContent>
        </Card>
    </div>

    
    <Card>
        <CardHeader>
            <h3 class="text-lg font-semibold">Recent Activity</h3>
        </CardHeader>
        <CardContent>
            <div class="space-y-2">
                <div class="flex justify-between items-center">
                    <span>New user registration</span>
                    <Badge Variant="BadgeVariant.Info" Size="BadgeSize.Small">2m ago</Badge>
                </div>
                <div class="flex justify-between items-center">
                    <span>Payment received</span>
                    <Badge Variant="BadgeVariant.Success" Size="BadgeSize.Small">1h ago</Badge>
                </div>
            </div>
        </CardContent>
        <CardFooter>
            <Button OnClick="() => showDetailsModal = true">
                View All Activity
            </Button>
        </CardFooter>
    </Card>
</div>


<Modal @bind-IsOpen="showDetailsModal" Size="ModalSize.Large">
    <ModalHeader>
        <h3 class="text-lg font-semibold">Activity Details</h3>
    </ModalHeader>
    <ModalContent>
        <p>Detailed activity information goes here...</p>
    </ModalContent>
    <ModalFooter>
        <Button Variant="ButtonVariant.Ghost" OnClick="() => showDetailsModal = false">
            Close
        </Button>
    </ModalFooter>
</Modal>

@code {
    bool showDetailsModal = false;
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

Inspired by shadcn/ui
Built with Blazor
Styled with Tailwind CSS
Icons by Heroicons

📞 Support

Made with ❤️ by GAN

Product	Compatible and additional computed target framework versions.
.NET	net10.0 is compatible. 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.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net10.0
- Blazor.Heroicons (>= 2.2.0)
- Microsoft.AspNetCore.Components.Web (>= 10.0.2)

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
0.3.0	102	1/29/2026
0.2.1	102	1/28/2026
0.2.0	97	1/28/2026
0.1.8	99	1/28/2026
0.1.7	94	1/27/2026
0.1.6	95	1/27/2026
0.1.5	97	1/27/2026
0.1.4	92	1/27/2026
0.1.3	94	1/27/2026
0.1.2	99	1/27/2026
0.1.1	94	1/26/2026
0.1.0	96	1/26/2026