# Getting Started
This guide walks you through adding **Enciphered.Blazor.UIComponents** to a new or existing Blazor Web App and building a fully static SSR application with htmx-powered form validation.
---
## Prerequisites
| Tool | Version |
|---|---|
| .NET SDK | 9.0+ |
| Node.js | 18+ (for Tailwind CSS CLI) |
---
## 1. Create a Blazor Web App
```bash
dotnet new blazor -n MyApp --interactivity None
cd MyApp
```
> The `--interactivity None` flag creates a pure static SSR app — no SignalR or WebAssembly.
---
## 2. Install the Library
```bash
dotnet add reference path/to/Enciphered.Blazor.UIComponents.csproj
```
Or, if published as a NuGet package:
```bash
dotnet add package Enciphered.Blazor.UIComponents
```
---
## 3. Install Tailwind CSS v4
From your solution root, initialize npm and install Tailwind:
```bash
npm init -y
npm install tailwindcss @tailwindcss/cli
```
Create `Styles/app.css` in your app project:
```css
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
```
Add the library's design tokens by importing or copying the token definitions from `Enciphered.Blazor.UIComponents/Styles/app.css`. At minimum you need the `:root` and `.dark` token blocks and the `@theme` mapping.
Add a build step to your `.csproj`:
```xml
```
---
## 4. Configure `App.razor`
Your root `App.razor` needs three things:
1. **Stylesheet references** — the library CSS and your app CSS
2. **htmx CDN** — loaded after `blazor.web.js`
3. **JS module imports** — initialize the library's interactive modules
```razor
```
> **Note**: Only import the modules you need. If you don't use the sidebar, skip `initSidebar()`. If you don't use forms, skip `initForms()`. If you don't need dark mode, skip `initDarkMode()` and the bootstrap script.
---
## 5. Configure `Program.cs`
Register Razor Components and map the library assembly:
```csharp
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents();
builder.Services.AddAntiforgery();
var app = builder.Build();
app.UseHttpsRedirection();
app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents()
.AddAdditionalAssemblies(
typeof(Enciphered.Blazor.UIComponents.SidebarProvider).Assembly);
app.Run();
```
> The `AddAdditionalAssemblies` call registers the library's components for routing discovery.
---
## 6. Add `_Imports.razor`
In your app's `Components/_Imports.razor`, add:
```razor
@using Enciphered.Blazor.UIComponents
```
This makes all library components available without per-file `@using` directives.
---
## 7. Verify the Setup
Create a simple page to test:
```razor
@page "/test"
It Works!The library is installed correctly.
If you can see this styled card, everything is set up.
```
Run the app:
```bash
dotnet run
```
You should see a styled card with a button. If the styles aren't applied, verify:
- The Tailwind build step ran (check `wwwroot/css/app.css` exists)
- The stylesheet links in `App.razor` are correct
- The design tokens are present in your `Styles/app.css`
---
## Next Steps
- [Set up a sidebar layout →](components/sidebar.md)
- [Add form validation with htmx →](forms/validation.md)
- [Browse all components →](components/button.md)