{"id":28948839,"url":"https://github.com/phmatray/blazorkawaii","last_synced_at":"2026-01-20T17:37:11.027Z","repository":{"id":300468955,"uuid":"691174976","full_name":"phmatray/BlazorKawaii","owner":"phmatray","description":"A collection of cute, customizable SVG components for Blazor WebAssembly applications. Features 16 kawaii components with 7 different moods.","archived":false,"fork":false,"pushed_at":"2025-06-21T22:18:41.000Z","size":10843,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-21T22:18:55.668Z","etag":null,"topics":["blazor","blazor-components","blazor-webassembly","component-library","csharp","cute","dark-mode","dotnet","illustrations","kawaii","localization","mit-license","multi-language","nuget","svg","svg-components","ui-components"],"latest_commit_sha":null,"homepage":"https://phmatray.github.io/BlazorKawaii/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phmatray.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"phmatray"}},"created_at":"2023-09-13T16:41:27.000Z","updated_at":"2025-06-21T22:18:18.000Z","dependencies_parsed_at":"2025-06-21T22:29:17.090Z","dependency_job_id":null,"html_url":"https://github.com/phmatray/BlazorKawaii","commit_stats":null,"previous_names":["phmatray/blazorkawaii"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/phmatray/BlazorKawaii","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorKawaii","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorKawaii/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorKawaii/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorKawaii/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phmatray","download_url":"https://codeload.github.com/phmatray/BlazorKawaii/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phmatray%2FBlazorKawaii/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261466645,"owners_count":23162558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-components","blazor-webassembly","component-library","csharp","cute","dark-mode","dotnet","illustrations","kawaii","localization","mit-license","multi-language","nuget","svg","svg-components","ui-components"],"created_at":"2025-06-23T11:05:50.416Z","updated_at":"2026-01-20T17:37:11.022Z","avatar_url":"https://github.com/phmatray.png","language":"C#","funding_links":["https://github.com/sponsors/phmatray"],"categories":[],"sub_categories":[],"readme":"# 🌸 BlazorKawaii\n\n![BlazorKawaii Logo](https://raw.githubusercontent.com/phmatray/BlazorKawaii/main/logo.png)\n\nA collection of cute, customizable SVG components for Blazor WebAssembly applications.\n\nBased on the wonderful [React Kawaii](https://react-kawaii.vercel.app/) library by [Miuki Miu](https://github.com/miukimiu), BlazorKawaii brings these adorable, expressive components to the .NET ecosystem.\n\n![Blazor Kawaii Demo](https://img.shields.io/badge/blazor-kawaii-ff69b4?style=for-the-badge)\n![.NET](https://img.shields.io/badge/.NET-9.0-512BD4?style=for-the-badge\u0026logo=.net)\n![License](https://img.shields.io/badge/license-MIT-green?style=for-the-badge)\n[![NuGet](https://img.shields.io/nuget/v/BlazorKawaii.svg?style=for-the-badge)](https://www.nuget.org/packages/BlazorKawaii/)\n\n## ✨ Features\n\n- 🎨 **16 Kawaii Components**: Astronaut, Backpack, Browser, Cat, Chocolate, Credit Card, Cyborg, File, Folder, Ghost, HumanCat, HumanDinosaur, Ice Cream, Mug, Planet, and Speech Bubble\n- 😊 **7 Mood Expressions**: Sad, Shocked, Happy, Blissful, Lovestruck, Excited, and Ko\n- 🎯 **Fully Customizable**: Size, color, and mood parameters for each component\n- 🚀 **Blazor WebAssembly**: Built specifically for Blazor WASM applications\n- 📱 **Responsive**: SVG-based components that scale perfectly\n- 🧩 **Easy Integration**: Simple component-based architecture\n- 🌍 **Internationalization**: Built-in support for English, French, Spanish, and Dutch\n- 🌓 **Dark Mode Support**: Components adapt beautifully to light and dark themes\n- 📦 **NuGet Package**: Available as a reusable Razor Class Library\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- .NET 10.0 SDK or later\n- Visual Studio 2026, Visual Studio Code, or JetBrains Rider\n\n### Installation\n\n#### Option 1: Install from NuGet (Recommended)\n\n```bash\ndotnet add package BlazorKawaii\n```\n\n#### Option 2: Clone and Run Demo\n\n1. Clone the repository:\n```bash\ngit clone https://github.com/phmatray/BlazorKawaii.git\ncd BlazorKawaii\n```\n\n2. Restore dependencies:\n```bash\ndotnet restore\n```\n\n3. Run the demo application:\n```bash\ndotnet run --project Demo/Demo.csproj\n```\n\n4. Open your browser and navigate to `https://localhost:7195`\n\n## 📖 Usage\n\n### Basic Usage\n\n```razor\n@using BlazorKawaii.Components\n@using BlazorKawaii.Common\n\n\u003cCat Mood=\"Mood.Blissful\" Size=\"200\" Color=\"#596881\" /\u003e\n```\n\n### Available Components\n\nAll components share the same parameter structure:\n\n```csharp\n[Parameter] public int Size { get; set; }        // Component size in pixels\n[Parameter] public Mood Mood { get; set; }       // Expression mood\n[Parameter] public string Color { get; set; }    // Primary color (hex)\n[Parameter] public string? Class { get; set; }     // CSS class for wrapper\n[Parameter] public string? Style { get; set; }     // CSS style for wrapper\n[Parameter] public string? SvgClass { get; set; }  // CSS class for SVG element\n[Parameter] public string? SvgStyle { get; set; }  // CSS style for SVG element\n```\n\n#### Component List\n\n| Component     | Default Size | Default Color |\n|---------------|--------------|---------------|\n| Astronaut     | 240          | #A6E191       |\n| Backpack      | 240          | #A6E191       |\n| Browser       | 180          | #A6E191       |\n| Cat           | 320          | #A6E191       |\n| Chocolate     | 300          | #A6E191       |\n| CreditCard    | 240          | #A6E191       |\n| Cyborg        | 240          | #A6E191       |\n| File          | 200          | #A6E191       |\n| Folder        | 200          | #A6E191       |\n| Ghost         | 240          | #A6E191       |\n| HumanCat      | 240          | #A6E191       |\n| HumanDinosaur | 240          | #A6E191       |\n| IceCream      | 300          | #A6E191       |\n| Mug           | 200          | #A6E191       |\n| Planet        | 190          | #A6E191       |\n| SpeechBubble  | 170          | #A6E191       |\n\n### Mood Expressions\n\n```csharp\npublic enum Mood\n{\n    Sad,\n    Shocked,\n    Happy,\n    Blissful,\n    Lovestruck,\n    Excited,\n    Ko\n}\n```\n\n### Advanced Example\n\n```razor\n@page \"/custom-demo\"\n@using BlazorKawaii.Components\n@using BlazorKawaii.Common\n\n@* Style your components with CSS classes *@\n@foreach (var mood in Enum.GetValues\u003cMood\u003e())\n{\n    \u003cGhost \n        Mood=\"@mood\" \n        Size=\"150\" \n        Color=\"@GetColorForMood(mood)\" \n        SvgClass=\"custom-ghost\" /\u003e\n}\n\n@code {\n    private string GetColorForMood(Mood mood) =\u003e mood switch\n    {\n        Mood.Sad =\u003e \"#B0C4DE\",\n        Mood.Happy =\u003e \"#98FB98\",\n        Mood.Lovestruck =\u003e \"#FFB6C1\",\n        _ =\u003e \"#E0E4E8\"\n    };\n}\n```\n\n## 🏗️ Architecture\n\n### Component Structure\n\nEach kawaii component follows a consistent pattern:\n\n```\nComponents/\n└── ComponentName/\n    ├── ComponentName.razor      # SVG markup\n    ├── ComponentName.cs         # C# partial class with parameters\n    └── ComponentNamePaths.cs    # SVG path constants\n```\n\n### Shared Components\n\n- **Face**: Reusable component that renders different expressions based on mood\n- **Wrapper**: Container component for consistent positioning\n- **SvgMaskHelper**: Utility for generating unique IDs to prevent SVG conflicts\n\n## 🛠️ Development\n\n### Building the Project\n\n```bash\ndotnet build\n```\n\n### Running in Development Mode\n\n```bash\ndotnet watch run --project Demo/Demo.csproj\n```\n\n### Creating a New Component\n\n1. Create a new folder under `Components/[ComponentName]/`\n2. Add `[ComponentName].cs` with the standard parameters\n3. Add `[ComponentName]Paths.cs` with SVG path constants\n4. Add `[ComponentName].razor` following the wrapper pattern\n5. Ensure the Face component is positioned appropriately\n\nExample structure:\n```csharp\n// NewComponent.cs\npublic partial class NewComponent\n{\n    [Parameter] public int Size { get; set; } = 200;\n    [Parameter] public Mood Mood { get; set; } = Mood.Blissful;\n    [Parameter] public string Color { get; set; } = \"#A6E191\";\n    [Parameter] public string? Class { get; set; }\n    [Parameter] public string? Style { get; set; }\n    [Parameter] public string? SvgClass { get; set; }\n    [Parameter] public string? SvgStyle { get; set; }\n}\n```\n\n## 🤝 Contributing\n\nContributions 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.\n\n### Guidelines\n\n1. Follow the existing component structure\n2. Ensure all components support the standard parameters\n3. Maintain consistent SVG quality and style\n4. Add your component to the demo page\n5. Update documentation\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- **Original Project**: [React Kawaii](https://react-kawaii.vercel.app/) by [Miuki Miu](https://github.com/miukimiu)\n  - This project is a faithful adaptation of React Kawaii for the Blazor ecosystem\n  - All original SVG designs and moods are created by Miuki Miu\n  - Licensed under MIT License\n- Built with [Blazor WebAssembly](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor)\n- Adapted for .NET by [Philippe Matray](https://github.com/phmatray)\n\n## 🚀 GitHub Pages Deployment\n\nThis project is configured for easy deployment to GitHub Pages.\n\n### Automatic Deployment\n\nThe project includes a GitHub Actions workflow that automatically deploys to GitHub Pages when you push to the main branch.\n\n1. Enable GitHub Pages in your repository settings:\n   - Go to Settings \u003e Pages\n   - Set Source to \"Deploy from a branch\"\n   - Select \"gh-pages\" branch and \"/ (root)\" folder\n   - Save the settings\n\n2. Push your changes to the main branch:\n```bash\ngit push origin main\n```\n\n3. The GitHub Action will automatically build and deploy your site to `https://[your-username].github.io/BlazorKawaii/`\n\n### Manual Deployment\n\nYou can also deploy manually using the command line:\n\n```bash\n# Publish with GitHub Pages configuration\ndotnet publish Demo/Demo.csproj -c:Release -p:GHPages=true\n\n# The published files will be in publish/wwwroot\n```\n\nOr use the included publish profile:\n```bash\ndotnet publish Demo/Demo.csproj -p:PublishProfile=GitHubPages\n```\n\n## 📞 Support\n\n- Create an issue for bug reports or feature requests\n- Check out the [live demo](https://phmatray.github.io/BlazorKawaii/) for examples\n- Refer to the CLAUDE.md file for AI-assisted development guidelines\n\n---\n\nMade with ❤️ and Blazor\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphmatray%2Fblazorkawaii","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphmatray%2Fblazorkawaii","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphmatray%2Fblazorkawaii/lists"}