Introduction

shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.

I'm sure you're well aware of the problems of typical component libraries: you install a package from NuGet, configure your project, and then use the components in your app. This approach works until you need to modify the source code of your system to fit the requirements of your app. For example, you may need to expose the internal state of a component, or you need finer control over the styling. Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.

ShadcnBlazor solves this by copying component source code directly into your project—you own the code. There's no black box: components live in your codebase, so you can read, modify, and extend them however you need. Components are built with Tailwind CSS v4 and semantic CSS variables for theming. They're accessible, customizable, and designed to fit naturally into Blazor apps without fighting the framework.

Installation

First, make sure you have the shadcnblazor CLI tool installed. If you don't have it yet, you can install it globally using the command provided below:

dotnet tool install --global ShadcnBlazor.Cli

From New Project

Create New Project Use the new command to scaffold a Blazor project from a template. Specify --wasm for WebAssembly standalone or --server for Blazor Server with global interactivity.

shadcnblazor new --wasm --proj MyApp

Use -o or --out to specify an output directory. By default, the project is created in ./{proj}.

shadcnblazor new --server --proj MyApp -o ./projects

Add Components Navigate into the project directory and add components.

shadcnblazor component add button

If you wish to add all components at once (doesn't include samples), you can do that like so:

shadcnblazor component add --all

From Existing Project

Tailwind Configuration

This library ships a precompiled tailwind file, meaning the components should render properly out of the box. However, if you would like to use custom tailwind utilities, please note that adding components DOES NOT provide a tailwind configuration or compilation mechanism.

You must configure Tailwind CSS compilation yourself. We recommend installing Tailwind.MSBuild or downloading the standalone Tailwind CLI executable to compile input.css to app.css.

Bootstrap Conflicts

Blazor templates include Bootstrap by default, which conflicts with Tailwind CSS and will break component styling. You must resolve these css conflicts manually, or remove Bootstrap from your project:

Remove this line from wwwroot/index.html or Components/App.razor:

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

Add Components Navigate into your existing Blazor project directory and run component add. Setup (Shared folder, CSS/JS assets, TailwindMerge) runs automatically on first add.

shadcnblazor component add button

If you wish to add all components at once (doesn't include samples), you can do that like so:

shadcnblazor component add --all