A collection of cute, customizable SVG components for Blazor WebAssembly applications.
Based on the wonderful React Kawaii library by Miuki Miu, BlazorKawaii brings these adorable, expressive components to the .NET ecosystem.
- 🎨 16 Kawaii Components: Astronaut, Backpack, Browser, Cat, Chocolate, Credit Card, Cyborg, File, Folder, Ghost, HumanCat, HumanDinosaur, Ice Cream, Mug, Planet, and Speech Bubble
- 😊 7 Mood Expressions: Sad, Shocked, Happy, Blissful, Lovestruck, Excited, and Ko
- 🎯 Fully Customizable: Size, color, and mood parameters for each component
- 🚀 Blazor WebAssembly: Built specifically for Blazor WASM applications
- 📱 Responsive: SVG-based components that scale perfectly
- 🧩 Easy Integration: Simple component-based architecture
- 🌍 Internationalization: Built-in support for English, French, Spanish, and Dutch
- 🌓 Dark Mode Support: Components adapt beautifully to light and dark themes
- 📦 NuGet Package: Available as a reusable Razor Class Library
- .NET 9.0 SDK or later
- Visual Studio 2022, Visual Studio Code, or JetBrains Rider
dotnet add package BlazorKawaii- Clone the repository:
git clone https://github.com/phmatray/BlazorKawaii.git
cd BlazorKawaii- Restore dependencies:
dotnet restore- Run the demo application:
dotnet run --project Demo/Demo.csproj- Open your browser and navigate to
https://localhost:7195
@using BlazorKawaii.Components
@using BlazorKawaii.Common
<Cat Mood="Mood.Blissful" Size="200" Color="#596881" />All components share the same parameter structure:
[Parameter] public int Size { get; set; } // Component size in pixels
[Parameter] public Mood Mood { get; set; } // Expression mood
[Parameter] public string Color { get; set; } // Primary color (hex)
[Parameter] public string? Class { get; set; } // CSS class for wrapper
[Parameter] public string? Style { get; set; } // CSS style for wrapper
[Parameter] public string? SvgClass { get; set; } // CSS class for SVG element
[Parameter] public string? SvgStyle { get; set; } // CSS style for SVG element| Component | Default Size | Default Color |
|---|---|---|
| Astronaut | 240 | #A6E191 |
| Backpack | 240 | #A6E191 |
| Browser | 180 | #A6E191 |
| Cat | 320 | #A6E191 |
| Chocolate | 300 | #A6E191 |
| CreditCard | 240 | #A6E191 |
| Cyborg | 240 | #A6E191 |
| File | 200 | #A6E191 |
| Folder | 200 | #A6E191 |
| Ghost | 240 | #A6E191 |
| HumanCat | 240 | #A6E191 |
| HumanDinosaur | 240 | #A6E191 |
| IceCream | 300 | #A6E191 |
| Mug | 200 | #A6E191 |
| Planet | 190 | #A6E191 |
| SpeechBubble | 170 | #A6E191 |
public enum Mood
{
Sad,
Shocked,
Happy,
Blissful,
Lovestruck,
Excited,
Ko
}@page "/custom-demo"
@using BlazorKawaii.Components
@using BlazorKawaii.Common
@* Style your components with CSS classes *@
@foreach (var mood in Enum.GetValues<Mood>())
{
<Ghost
Mood="@mood"
Size="150"
Color="@GetColorForMood(mood)"
SvgClass="custom-ghost" />
}
@code {
private string GetColorForMood(Mood mood) => mood switch
{
Mood.Sad => "#B0C4DE",
Mood.Happy => "#98FB98",
Mood.Lovestruck => "#FFB6C1",
_ => "#E0E4E8"
};
}Each kawaii component follows a consistent pattern:
Components/
└── ComponentName/
├── ComponentName.razor # SVG markup
├── ComponentName.cs # C# partial class with parameters
└── ComponentNamePaths.cs # SVG path constants
- Face: Reusable component that renders different expressions based on mood
- Wrapper: Container component for consistent positioning
- SvgMaskHelper: Utility for generating unique IDs to prevent SVG conflicts
dotnet builddotnet watch run --project Demo/Demo.csproj- Create a new folder under
Components/[ComponentName]/ - Add
[ComponentName].cswith the standard parameters - Add
[ComponentName]Paths.cswith SVG path constants - Add
[ComponentName].razorfollowing the wrapper pattern - Ensure the Face component is positioned appropriately
Example structure:
// NewComponent.cs
public partial class NewComponent
{
[Parameter] public int Size { get; set; } = 200;
[Parameter] public Mood Mood { get; set; } = Mood.Blissful;
[Parameter] public string Color { get; set; } = "#A6E191";
[Parameter] public string? Class { get; set; }
[Parameter] public string? Style { get; set; }
[Parameter] public string? SvgClass { get; set; }
[Parameter] public string? SvgStyle { get; set; }
}Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Follow the existing component structure
- Ensure all components support the standard parameters
- Maintain consistent SVG quality and style
- Add your component to the demo page
- Update documentation
This project is licensed under the MIT License - see the LICENSE file for details.
- Original Project: React Kawaii by Miuki Miu
- This project is a faithful adaptation of React Kawaii for the Blazor ecosystem
- All original SVG designs and moods are created by Miuki Miu
- Licensed under MIT License
- Built with Blazor WebAssembly
- Adapted for .NET by Philippe Matray
This project is configured for easy deployment to GitHub Pages.
The project includes a GitHub Actions workflow that automatically deploys to GitHub Pages when you push to the main branch.
-
Enable GitHub Pages in your repository settings:
- Go to Settings > Pages
- Set Source to "Deploy from a branch"
- Select "gh-pages" branch and "/ (root)" folder
- Save the settings
-
Push your changes to the main branch:
git push origin main- The GitHub Action will automatically build and deploy your site to
https://[your-username].github.io/BlazorKawaii/
You can also deploy manually using the command line:
# Publish with GitHub Pages configuration
dotnet publish Demo/Demo.csproj -c:Release -p:GHPages=true
# The published files will be in publish/wwwrootOr use the included publish profile:
dotnet publish Demo/Demo.csproj -p:PublishProfile=GitHubPages- Create an issue for bug reports or feature requests
- Check out the live demo for examples
- Refer to the CLAUDE.md file for AI-assisted development guidelines
Made with ❤️ and Blazor