BetterDev.ShadcnBlazor
1.1.0
dotnet add package BetterDev.ShadcnBlazor --version 1.1.0
NuGet\Install-Package BetterDev.ShadcnBlazor -Version 1.1.0
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="BetterDev.ShadcnBlazor" Version="1.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="BetterDev.ShadcnBlazor" Version="1.1.0" />
<PackageReference Include="BetterDev.ShadcnBlazor" />
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add BetterDev.ShadcnBlazor --version 1.1.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: BetterDev.ShadcnBlazor, 1.1.0"
#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.
#:package BetterDev.ShadcnBlazor@1.1.0
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=BetterDev.ShadcnBlazor&version=1.1.0
#tool nuget:?package=BetterDev.ShadcnBlazor&version=1.1.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
BetterDev.ShadcnBlazor โฆ
Beautifully designed, accessible, copy-paste and package-ready Razor components for Blazor (.NET 8 & .NET 10) inspired by shadcn/ui.
โก Installation
Install via the .NET CLI:
dotnet add package BetterDev.ShadcnBlazor
Or via the Package Manager Console:
Install-Package BetterDev.ShadcnBlazor
๐ Quick Setup
1. Register Services
In your Program.cs:
using ShadcnBlazor;
builder.Services.AddShadcnBlazor();
2. Add Imports
In your _Imports.razor:
@using ShadcnBlazor
3. Add CSS & JS references
In your App.razor or index.html:
<link rel="stylesheet" href="_content/BetterDev.ShadcnBlazor/shadcn-blazor.css" />
<script src="_content/BetterDev.ShadcnBlazor/shadcn-blazor.js"></script>
๐จ Components Included
- Buttons & Indicators:
Button,Badge - Layout & Cards:
Card,CardHeader,CardTitle,CardDescription,CardContent,CardFooter,Separator - Modals & Overlays:
Dialog,AlertDialog,Sheet,Popover,Tooltip,DropdownMenu - Forms & Controls:
Form,FormField,Input,Textarea,Label,Checkbox,Switch,RadioGroup,Select,Slider,Calendar,DatePicker,Command,Combobox - Navigation & Feedback:
Tabs,Accordion,Breadcrumb,Pagination,Toggle,ToggleGroup,Collapsible,Table,Progress,Skeleton,Avatar,Toaster - Menus & Layout:
ContextMenu,NavigationMenu,Menubar,Carousel
๐งช Example Usage
<Card Class="w-[350px]">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy your new project in one click.</CardDescription>
</CardHeader>
<CardContent>
<div class="space-y-2">
<Label>Project Name</Label>
<Input Placeholder="my-blazor-app" />
</div>
</CardContent>
<CardFooter Class="flex justify-between">
<Button Variant="ButtonVariant.Outline">Cancel</Button>
<Button>Deploy</Button>
</CardFooter>
</Card>
๐ Full Documentation & Interactive Demos
Visit the official documentation:
๐ https://better-dev-team.github.io/shadcn-blazor/
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net10.0
- Microsoft.AspNetCore.Components.Web (>= 10.0.10)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.