PureBlazor.Components 0.10.0-preview1

.NET 8.0
This is a prerelease version of PureBlazor.Components.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package PureBlazor.Components --version 0.10.0-preview1
NuGet\Install-Package PureBlazor.Components -Version 0.10.0-preview1
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="PureBlazor.Components" Version="0.10.0-preview1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add PureBlazor.Components --version 0.10.0-preview1
#r "nuget: PureBlazor.Components, 0.10.0-preview1"
#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. 
// Install PureBlazor.Components as a Cake Addin
#addin nuget:?package=PureBlazor.Components&version=0.10.0-preview1&prerelease

// Install PureBlazor.Components as a Cake Tool
#tool nuget:?package=PureBlazor.Components&version=0.10.0-preview1&prerelease

GitHub Actions Workflow Status GitHub last commit NuGet Version Discord PureBlazor

PureBlazor Components

[!NOTE] This component library is pre-release software.

Native Blazor UI components. Free to use for any Blazor project.

Works seamlessly with PureBlazor CMS.

Features

  • Native Blazor - We want components built for Blazor, not a wrapper around a JavaScript library.
  • Blazing Fast - We want components that are fast on every platform.
  • Headless Mode - Fully customizable UI components. Disable all styles with a single property.
  • Tailwind Compatible - Automatically merge your Tailwind classes with built-in styles.

Explore Components

Benchmarks

[!NOTE] This documentation is incomplete. Not all components are documented yet.

Please feel free to ask questions in the Discord, open an issue, or create a pull request.

Getting started

Installation

InteractiveWebAssembly / SSR

Install the PureBlazor.Components NuGet package to your Client project.

dotnet add package PureBlazor.Components

Register the components and services to your Program.cs file.

builder.AddPureBlazorComponents();

InteractiveServer / InteractiveAuto

You'll need to add the ASP.NET Core integration package to your Server project and update your Program.cs file, in addition to the Client Project.

dotnet add package PureBlazor.Components.AspNetCore

Theming

PureBlazor components use Tailwind CSS and are designed to be customizable with Tailwind or any custom CSS.

Additionally, there are more extensibility points for customizing the components with C#. Documentation will come as this is further solidified.

Use the default styles

Include pureblazor.css in your App.Razor file, in the <head> tag.

<link rel="stylesheet" href="_content/PureBlazor.Components/pureblazor.css" />

To customize further on top of these default styles with TailwindCSS, see tailwind.md.

Ad-hoc customization

All components have a Styles parameter that accepts a string of CSS classes. If you are using Tailwind, the classes will be merged with the default styles. The Styles parameter is parsed and evaluated for conflicts; conflicting styles passed in here will supersede default classes.

For example, to change the shade of red for the Danger accent, which is bg-red-900 by default:

<PureButton Accent="Accent.Danger" Styles="bg-red-600">Default button</PureButton>

Customizing with C#

You can override the default theme in C# by creating a PureStyles object and passing it to a CascadingValue. The PureStyles object has properties for each component style.

<CascadingValue Value="styles">
    <PureButton Accent="Accent.Danger">Default button</PureButton>
</CascadingValue>

@code {
    PureStyles styles = new();
}

[!IMPORTANT] Not all components have C# customization available yet.

Headless Mode

Headless mode turns the UI components into completely unstyled, accessible components. Fully customizable.

Enable headless mode by setting the Theme property to Off using a CascadingValue. You can do this for individual components or wrap your entire application in a CascadingValue.

<CascadingValue Value="Theme.Off">
    <PureButton>Unstyled button</PureButton>
</CascadingValue>

FAQ

Why not use xx library?

Our features section is a good place to start to understand our goals.

In addition, our components are built to work seamlessly with the PureBlazor CMS.

Is this library free to use?

  • Yes! This library is free to use for any Blazor project.

Can I use this library with .NET MAUI Blazor projects?

  • This library should work with .NET MAUI, but we have not tested it yet. Please let us know if you have any issues.

Can I use this library with Blazor WebAssembly / Blazor Server / InteractiveAuto?

  • Yes. This library supports all Blazor hosting models.

Is this library production-ready?

  • No. This library is still in development.

Do you accept contributions?

  • Yes! We accept contributions. Please see the CONTRIBUTING.md file for more information.

How do I report a bug?

  • Please open an issue on the GitHub repository.
  • Please include as much information as possible, including the version of the library you are using, the browser you are using, and any steps to reproduce the issue.
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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on PureBlazor.Components:

Package Downloads
PureBlazor.Components.AspNetCore

ASP.NET Core integration package for PureBlazor UI components.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.19.0 0 4/29/2024
0.18.0 71 4/26/2024
0.17.0 40 4/26/2024
0.16.0 42 4/26/2024
0.15.0 42 4/26/2024
0.14.0 39 4/26/2024
0.13.0 44 4/26/2024
0.12.0 35 4/26/2024
0.11.0 34 4/26/2024
0.10.0-preview1 74 4/9/2024
0.9.2 80 4/4/2024
0.9.1 71 4/4/2024
0.9.0 73 4/4/2024
0.8.0 74 4/4/2024
0.7.0 88 4/4/2024
0.6.0 78 4/3/2024
0.5.0 93 4/2/2024
0.4.0 77 4/2/2024
0.3.0 79 4/2/2024
0.2.0 89 4/1/2024
0.2.0-preview 32 4/26/2024
0.1.0 89 3/21/2024
0.1.0-alpha.1 83 2/2/2024
0.0.9 86 3/21/2024

Add pureblazor.css