byrone/CleanUI
byrone/CleanUI
1
0
Fork 0
Code Issues Pull requests Projects Releases 4 Packages Wiki Activity Actions
A modern, clean and elegant UI library for Blazor/Razor.
38 commits 1 branch 7 tags 531 KiB
  • C# 50.6%
  • HTML 24.4%
  • SCSS 20.1%
  • TypeScript 2.6%
  • JavaScript 1.2%
  • Other 1.1%
Find a file
Exact
Byrone 4db1bb6567
All checks were successful
Publish package / publish (push) Successful in 2m33s
Details
Add .input-group class for grouping elements together.
2026-07-12 14:32:44 +02:00
.forgejo/workflows Fixing workflow 2026-03-30 21:11:50 +02:00
.idea/.idea.CleanUI/.idea Add missing utility classes for color body, add missing .js file documentation to README.md. 2026-07-09 20:18:42 +02:00
CleanUI Add .input-group class for grouping elements together. 2026-07-12 14:32:44 +02:00
CleanUI.Docs Add .input-group class for grouping elements together. 2026-07-12 14:32:44 +02:00
CleanUI.SourceGenerator.Icons Package publishing 2026-03-22 19:47:57 +01:00
.gitignore Multiple changes 2026-03-08 21:19:12 +01:00
CleanUI.slnx Fixing workflow 2026-03-30 21:11:50 +02:00
Directory.Build.props Package publishing 2026-03-22 19:47:57 +01:00
icon.png Package publishing 2026-03-22 19:47:57 +01:00
icon.svg Package publishing 2026-03-22 19:47:57 +01:00
LICENSE.md Added project license 2026-03-22 19:54:33 +01:00
README.md Add missing utility classes for color body, add missing .js file documentation to README.md. 2026-07-09 20:18:42 +02:00

README.md

CleanUI icon

CleanUI

A modern, clean and elegant UI library for Blazor/Razor.

Usage

  1. Add the CleanUI package:
dotnet add package CleanUI

or

<ItemGroup>
	<PackageVersion Include="CleanUI" Version="0.1.0"/>
</ItemGroup>
  1. Add the following lines to your App.razor (order is important!):
<!-- CSS variables (required) (can be overwritten) -->
<link rel="stylesheet" href="@(Assets["_content/CleanUI/theme.css"])"/>
<!-- Reset styling (html, body, etc.) (optional but recommended) -->
<link rel="stylesheet" href="@(Assets["_content/CleanUI/base.css"])"/>
<!-- Styles for all components (required if you don't want to style the components yourself) -->
<link rel="stylesheet" href="@(Assets["_content/CleanUI/components.css"])"/>
<!-- Utility classes like `d-flex` (optional) -->
<link rel="stylesheet" href="@(Assets["_content/CleanUI/utilities.css"])"/>
  1. Import the .js file(s) for the interactive components you want to choose:
<script src="@(Assets["_content/CleanUI/modal.js"])"></script>
<script src="@(Assets["_content/CleanUI/toast.js"])"></script>
<script src="@(Assets["_content/CleanUI/tooltip.js"])"></script>
  1. Use the components:
<CleanUI.CleanButton>
	Click me!
</CleanUI.CleanButton>

or

@using CleanUI

<CleanButton>
	Click me!
</CleanButton>