https://github.com/erinnmclaughlin/headlessblazor

Headless Blazor is a style-agnostic component library for Blazor. Inspired by Headless UI.
https://github.com/erinnmclaughlin/headlessblazor

blazor component-library headlessui headlessui-blazor

Last synced: 9 months ago
JSON representation

Headless Blazor is a style-agnostic component library for Blazor. Inspired by Headless UI.

• Host: GitHub
• URL: https://github.com/erinnmclaughlin/headlessblazor
• Owner: erinnmclaughlin
• License: mit
• Created: 2024-05-14T23:10:33.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-15T16:27:38.000Z (over 1 year ago)
• Last Synced: 2025-09-08T12:06:56.002Z (9 months ago)
• Topics: blazor, component-library, headlessui, headlessui-blazor
• Language: JavaScript
• Homepage: https://headlessblazor.org
• Size: 4.26 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Headless Blazor Header Image](assets/HeadlessBlazorHeader.svg)](https://headlessblazor.org)

[Headless Blazor](https://headlessblazor.org) is a style-agnostic component library for Blazor. Inspired by [Headless UI](https://headlessui.com).

## Installation

> [!NOTE]  

> This library is very much a work-in-progress. Contributions are welcome!

### Quick Start

Install the bundle from [NuGet](https://www.nuget.org/packages/HeadlessBlazor):

```cmd

dotnet add package HeadlessBlazor

```

Then add the following to your `Program.cs`:

```csharp

builder.Services.AddHeadlessBlazor();

```

And add a using to your `_Imports.razor` file:

```razor

@using HeadlessBlazor

```

## Individual Packages

> [!TIP]

> **Looking for individual components?**

> Each component is packaged separately, so if you're only after one or two specific components, you can install those individually.

#### HeadlessBlazor.Dropdown

> A headless dropdown component.

>

> [![NuGet Version](https://img.shields.io/nuget/vpre/HeadlessBlazor.Dropdown?logo=NuGet)](https://www.nuget.org/packages/HeadlessBlazor.Dropdown)

#### HeadlessBlazor.FloatingElement

> Enables dynamic float behavior for components like popovers, tooltips, dropdowns, etc.

>

> [![NuGet Version](https://img.shields.io/nuget/vpre/HeadlessBlazor.FloatingElement?logo=NuGet)](https://www.nuget.org/packages/HeadlessBlazor.FloatingElement)

#### HeadlessBlazor.OutsideClick

> Enables handling of click events that occur outside of a component.

>

> [![NuGet Version](https://img.shields.io/nuget/vpre/HeadlessBlazor.OutsideClick?logo=NuGet)](https://www.nuget.org/packages/HeadlessBlazor.OutsideClick)