GovUK.Blazor.DesignSystem.Components 1.0.0-alpha.3

Blazor GOV.UK Design System Components

⚠️ ALPHA VERSION - This project is in early development. APIs may change, and components may have bugs or incomplete features.

A Blazor component library that implements the GOV.UK Design System for building government-style services using .NET Blazor.

Installation

dotnet add package Blazor.DesignSystem.Components

Or via Package Manager:

Install-Package Blazor.DesignSystem.Components

Getting Started

1. Add the GOV.UK Frontend CSS

Add the bundled GOV.UK Frontend CSS to your App.razor or _Host.cshtml:

<link rel="stylesheet" href="_content/GovUK.Blazor.DesignSystem.Components/css/govuk-frontend.css" />

This CSS file is bundled with the package and includes all necessary GOV.UK Design System styles, fonts, and images.

Optionally, you can also include the accessibility JavaScript helper for focus management:

<script src="_content/GovUK.Blazor.DesignSystem.Components/js/govuk-accessibility.js"></script>

2. Add the namespace

Add the namespace to your _Imports.razor:

@using Blazor.DesignSystem.Components

3. Use the components

@using Blazor.DesignSystem.Components

<GovUkButton Text="Save and continue" OnClick="HandleClick" />

<GovUkInput 
    Id="email" 
    Label="Email address" 
    Hint="We'll use this to contact you"
    @bind-Value="email" />

@code {
    private string email = "";
    
    private void HandleClick()
    {
        // Handle button click
    }
}

Available Components

All 32 GOV.UK Design System components are implemented:

• Form Components: Button, Input, Textarea, Select, Checkboxes, Radios, Date Input, Character Count, File Upload, Password Input
• Navigation: Breadcrumbs, Pagination, Header, Back Link, Skip Link, Footer
• Content: Accordion, Tabs, Details, Table, Tag, Panel, Warning Text, Inset Text, Notification Banner, Phase Banner, Cookie Banner
• Form Support: Error Message, Error Summary, Fieldset, Hint, Label, Summary List, Task List

Render Modes

Components support Blazor's render modes:

• Static SSR: Components render server-side HTML
• Interactive Server: Components use SignalR for interactivity
• Interactive WebAssembly: Components run in the browser

For interactive components (Accordion, Tabs, etc.), add @rendermode InteractiveServer or @rendermode InteractiveWebAssembly to your page.

Accessibility

All components follow GOV.UK Design System accessibility standards:

• Proper ARIA attributes and roles
• Keyboard navigation support
• Screen reader announcements for dynamic content
• Error states with proper labelling
• Focus management

Two-Way Binding

Most input components support @bind-Value:

<GovUkInput @bind-Value="myValue" />
<GovUkTextarea @bind-Value="myText" />
<GovUkSelect @bind-Value="selectedOption">...</GovUkSelect>

Attribution

This project is a derivative work based on the GOV.UK Design System and govuk-frontend created by the Government Digital Service (GDS).

License

MIT License - see LICENSE.txt for details.

Links

• GitHub Repository
• GOV.UK Design System
• govuk-frontend GitHub