--- title: Blazor Tailwind Components --- ServiceStack.Blazor high-productivity components enable rapid development in Blazor Server and WASM Apps:
[![](/img/pages/blazor/gallery-splash.png)](https://blazor-gallery.servicestack.net) As our components support both hosting models we're maintaining identical Gallery sites running on both **Blazor Server** and **WASM**:
Blazor Server
Blazor WASM
For a closer look at ServiceStack.Blazor Components in action, download & run them to see how good they'll run in your Environment:
NetCoreApps/BlazorGallery NetCoreApps/BlazorGalleryWasm

Dark Mode

All ServiceStack.Blazor components take advantage of Tailwind DarkMode support to include full support for Dark Mode. ![](/img/pages/blazor/dark-and-light-mode.png) [Tailwind](https://tailwindcss.com) has revolutionized how we style our Web Apps with its [mobile first](https://tailwindcss.com/#mobile-first) design system that's dramatically simplified creating maintainable responsive Web Apps. It also excels at adding support for [Dark Mode](https://tailwindcss.com/#dark-mode) with its first-class **dark:** modifier allowing the use of standard tailwind classes to specify what elements should look like when viewed in **Dark Mode**, e.g:

Light mode

Writes Upside-Down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

Dark mode

Writes Upside-Down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

```html

Writes Upside-Down

The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.

``` ### View ServiceStack.Blazor in Dark Mode We're happy to announce that Dark Mode support is included in **all ServiceStack.Blazor components** and all Blazor Tailwind project templates where you'll be able to toggle on/off Dark Mode with the new `` component. Checkout this video to see how beautiful Dark Mode looks like in the latest ServiceStack.Blazor Components and Tailwind project templates:
For a more interactive view, use the right Dark Mode toggle to turn on/off Dark Mode in the embedded [Blazor Gallery Contacts Page](https://blazor-gallery.jamstacks.net/grid/contacts-meta): Dark Mode is all implemented with CSS, controlled by toggling the **dark** class on the `` element, `` also saves this user preference in `localStorage` where it's preserved across browser restarts. ### View in Dark Mode The Blazor Tailwind templates also include the ability to override the users color scheme preference and open a page in dark or light mode with the `?dark` and `?light` query params:
blazor.web-templates.io/?light
blazor.web-templates.io/?dark
### Force Dark Mode If your App is best viewed in Dark Mode you can force it to use Dark Mode with `JS.init()` when initializing ServiceStack.Blazor's JS library in Blazor Server's **_Layout.cshtml** or Blazor WASM's **index.html**, e.g: ```html ```

## Blazor Tailwind Components

Blazor Tailwind Components

We encourage you to explore to the Blazor Gallery websites for the full preview, but we'll look at some of the Components here to give you some idea of the functionality available. ### DataGrid `DataGrid` is a versatile Component we expect to be heavily used for rendering any typed collection: ```html ``` Which by default renders results in a striped Tailwind Table: ![](/img/pages/blazor/datagrid-tracks.png) Whose appearance can be styled to support many of the [Tailwind Table Styles](https://tailwindui.com/components/application-ui/lists/tables) with the `TableStyles` Flag enum, e.g: ```html ``` ![](/img/pages/blazor/datagrid-table-styles.png) It's a highly versatile component where you'll be able to control which columns are displayed and how they're formatted using `` definitions, e.g. here's how we can customize the table to look like Blazor's [FetchData.cshtml](https://github.com/SteveSanderson/Blazor/blob/master/samples/ClientServerApp/ClientServerApp.Client/FetchData.cshtml) tabular results: ```html @code { List forecasts = new(); protected override async Task OnInitializedAsync() { forecasts = await Http.GetFromJsonAsync>("data/weather.json") ?? new(); } } ``` [![](/img/pages/blazor/datagrid-weather.png)](https://blazor-gallery.servicestack.net/fetchdata) Here's a more advanced example showing how to implement a responsive DataGrid by utilizing custom Header and Table Cell templates to define what columns and Headers are visible at different responsive breakpoints and how to enable different features like **Row Selection** and **Filtering** and examples of handling the Row and Header selected events App's can use for executing custom logic: ```html
Type
No
Start
End
@code { public List Items { get; set; } = new() { Create.Booking("First Booking!", RoomType.Queen, 10, 100, "employee@email.com", "BOOK10"), Create.Booking("Booking 2", RoomType.Double, 12, 120, "manager@email.com", "BOOK25"), Create.Booking("Booking the 3rd", RoomType.Suite, 13, 130, "employee@email.com", "BOOK50"), }; string FormatDate(object o) => o is DateTime d ? d.ToShortDateString() : ""; public async Task HandleSelectedHeader(Column item) { await JS.Log(item.Name); } public async Task HandleSelectedRow(Booking x) { await JS.Log(x); } } ``` :::tip Resize webpage to preview its responsive appearance and different resolution breakpoints ::: ### AutoQueryGrid The functionality and extensibility in `DataGrid` lays the foundation for higher-level components like `AutoQueryGrid` which makes use of it to enable its Auto UI around [AutoQuery CRUD](/autoquery/crud) Services. ### AutoQueryGrid Read Only At a minimum AutoQueryGrid requires the AutoQuery APIs it should call to implement its functionality, so you can implement a **read-only** grid by only specifying the AutoQuery API to query a data model, e.g: ```csharp ``` This one AutoQuery API is enough to power a functional read-only UI enabling multi flexible querying capabilities, paging, custom column selection and the ability to export the desired filtered resultset to .csv which can be open in Excel or copy the API URL Apps can use to consume the JSON API results: ### AutoQueryGrid CRUD Full CRUD functionality can be enabled by specifying the AutoQuery CRUD APIs for a specified data model, e.g: ```csharp ``` [![](/img/pages/blazor/autoquerygrid-crud.png)](https://blazor-gallery.jamstacks.net/gallery/autoquerygrid/crud) ### Customizable Columns As `AutoQueryGrid` builds on `DataGrid` it also inherits its customizable option allowing for [customizable responsive columns](https://blazor-gallery.servicestack.net/gallery/autoquerygrid), e.g: ```html
Type
No
Start
End
``` Customizing how and when columns are rendered at different breakpoints using different formatting options and custom table header and cell templates: [![](/img/pages/blazor/autoquerygrid-responsive.png)](https://blazor-gallery.jamstacks.net/gallery/autoquerygrid/responsive) ### Declarative Customizations The columns can also be customized declaratively using the `[Format]` Metadata Attribute on the Model type: ```csharp public class Contact : AuditBase { [AutoIncrement] public int Id { get; set; } [Format(FormatMethods.IconRounded)] public string ProfileUrl { get; set; } public string FirstName { get; set; } public string LastName { get; set; } [Format(FormatMethods.Currency)] public int? SalaryExpectation { get; set; } [Format(FormatMethods.LinkEmail, Options = @"{target:'_self',subject:'New Job Opportunity', body:'We have an exciting new opportunity...', cls:'text-green-600'}")] public string Email { get; set; } [Format(FormatMethods.LinkPhone)] public string Phone { get; set; } } ``` Which can change how results are formatted in the data grid results: [![](/img/pages/blazor/autoquerygrid-metadata.png)](https://blazor-gallery.jamstacks.net/grid/contacts-meta) Whilst the `[Input]` and `[FieldCss]` attributes on the AutoQuery CRUD DTOs: ```csharp public class UpdateContact : IPatchDb, IReturn { public int Id { get; set; } [ValidateNotEmpty] public string? FirstName { get; set; } [ValidateNotEmpty] public string? LastName { get; set; } [Input(Type = "file"), UploadTo("profiles")] public string? ProfileUrl { get; set; } public int? SalaryExpectation { get; set; } [ValidateNotEmpty] public string? JobType { get; set; } public int? AvailabilityWeeks { get; set; } public EmploymentType? PreferredWorkType { get; set; } public string? PreferredLocation { get; set; } [ValidateNotEmpty] public string? Email { get; set; } public string? Phone { get; set; } [Input(Type="textarea")] [FieldCss(Field="col-span-12 text-center", Input="h-48", Label="text-xl text-indigo-700")] public string? About { get; set; } } ``` Can customize how forms are rendered, e.g: [![](/img/pages/blazor/autoquerygrid-metadata-form.png)](https://blazor-gallery.jamstacks.net/grid/contacts-meta) ### ToolbarButtons The `` element can be used to customize the AutoQueryGrid to add your own custom Toolbar buttons, e.g: ```html
``` Enabling complete control over the Toolbar as all existing toolbar buttons can be removed with [AutoQueryGrid parameters](https://reference.servicestack.net/api/ServiceStack.Blazor.Components.Tailwind/AutoQueryGrid%60Model%60). ### Custom Edit and Create Forms The `` and `` elements can be used to replace the default [Auto Forms](https://blazor-gallery.jamstacks.net/gallery/autoform) used in creating and editing rows when more advanced or customized functionality is needed. With this feature we can create a Custom AutoQueryGrid component that uses Custom Edit & Create Forms when selecting and adding new records and also customize the Grid results displayed with the new `ConfigureQuery` parameter to ensure results are filtered to the selected Tenant records: ```html
@code { AutoQueryGrid? grid; [Parameter, SupplyParameterFromQuery] public int? TenantId { get; set; } void Configure(QueryBase query) { query.AddQueryParam("TenantId", TenantId); } } ``` ### Managing Filters & Preferences By default the AutoQueryGrid displays the user's selected columns and query limit preferences which are persisted in localStorage. They can be overridden with the new **Prefs** attribute which has different ergonomic methods for configuration within an attribute: To limit the Query Results Limit: ```html ``` To limit which columns are displayed in the Query Results: ```html ``` ```html ``` To configure both Query Limit and Selected Columns: ```html ``` ```html ``` In addition the new methods below can be used to clear any user-defined query filters and column preferences: | Method | Description | |--|--| | grid.ClearFiltersAsync() | Remove user-defined Filters | | grid.ResetPreferencesAsync() | Remove user-defined Filters and Column Preferences | ### Disable Column Filtering By default Filtering and Sorting are disabled for complex type columns, they can also be explicitly disabled per column with `AllowFiltering`, e.g: ```html ``` ### Changing AutoQueryGrid Defaults A lot of AutoQueryGrid's UI is customizable allowing you to easily toggle on/off UI features as needed, if you have a consistent style you wish to enforce you can change the defaults of every AutoQueryGrid component with [BlazorConfig](#blazor-config), e.g. you can remove **Copy URL** button and change the default Table style to use Uppercase Headings with: ```csharp BlazorConfig.Set(new() { //... AutoQueryGridDefaults = new() { TableStyle = TableStyle.StripedRows | TableStyle.UppercaseHeadings, ShowCopyApiUrl = false, } }); ``` Which will change the appearance of every `AutoQueryGrid` Component used in the App unless overridden. ### AutoQueryGrid Gallery As AutoQueryGrid is a core component for the rapid development of Apps we're maintaining a dedicated section showcasing their different features at [blazor-gallery.servicestack.net/grid](https://blazor-gallery.servicestack.net/grid): [![](/img/pages/blazor/autoquerygrid-more.png)](https://blazor-gallery.servicestack.net/grid) ## Modal Lookups To provide an optimal UX for relational fields `AutoQueryGrid` utilizes Modal Lookups for searching and selecting referential data that's automatically inferred from your OrmLite data model relationships, e.g: ```csharp public class JobApplication : AuditBase { [AutoIncrement] public int Id { get; set; } [References(typeof(Job))] public int JobId { get; set; } [References(typeof(Contact))] public int ContactId { get; set; } //... } ``` Where it will display an enhanced [LookupInput](https://reference.servicestack.net/api/ServiceStack.Blazor.Components.Tailwind/LookupInput) instead of a plain Text Input for the relational `JobId` and `ContactId` fields: [![](/img/pages/blazor/modalLookup-input.png)](https://blazor-gallery.servicestack.net/grid/job-applications?edit=1) Which users can use to quickly search for the related record instead of manually inserting Foreign Key Ids: [![](/img/pages/blazor/modalLookup-dialog.png)](https://blazor-gallery.servicestack.net/grid/job-applications?edit=1) ## File Uploads Another feature showcased in the above screenshots is support for [Managed File Uploads](/locode/files-overview) which can be declaratively added with the `[Input(Type="file")]` to render the [FileInput](https://reference.servicestack.net/api/ServiceStack.Blazor.Components.Tailwind/FileInput) Component and `[UploadTo]` attribute to specify which File [Upload location](/locode/files#basic-file-upload-example) it should use: ```csharp public class UpdateJobApplication : IPatchDb, IReturn { public int Id { get; set; } public int? JobId { get; set; } public int? ContactId { get; set; } public DateTime? AppliedDate { get; set; } public JobApplicationStatus? ApplicationStatus { get; set; } [Input(Type = "file"), UploadTo("applications")] public List? Attachments { get; set; } } ``` For a quick primer on using Managed File Uploads to [Upload files from Blazor](/locode/files-blazor) checkout:

File Blazor

## Auto Forms The Auto Form components are other high productivity components which can be used to create an automated form based from a Request DTO definition: ```csharp ``` [![](/img/pages/blazor/AutoCreateForm.png)](https://blazor-gallery.servicestack.net/gallery/autoform) ### AutoEditForm Whilst `AutoEditForm` can be used to render an automated form based to update and delete an [AutoQuery CRUD](/autoquery/crud) API: ```csharp @code { Booking Model = Create.Booking("First Booking!", RoomType.Queen, 10, 100, "employee@email.com"); } ``` [![](/img/pages/blazor/AutoEditForm.png)](https://blazor-gallery.servicestack.net/gallery/autoform) The forms behavior and appearance is further customizable with the [API annotation](/locode/declarative#annotate-apis), declarative [validation](/locode/declarative#type-validation-attributes) and the custom [Field and Input](/locode/declarative#custom-fields-and-inputs) attributes, e.g: ```csharp [Description("Update an existing Booking")] [Notes("Find out how to quickly create a C# Bookings App from Scratch")] [Route("/booking/{Id}", "PATCH")] [ValidateHasRole("Employee")] [AutoApply(Behavior.AuditModify)] public class UpdateBooking : IPatchDb, IReturn { public int Id { get; set; } public string? Name { get; set; } public RoomType? RoomType { get; set; } [ValidateGreaterThan(0)] public int? RoomNumber { get; set; } [ValidateGreaterThan(0)] public decimal? Cost { get; set; } public DateTime? BookingStartDate { get; set; } public DateTime? BookingEndDate { get; set; } [Input(Type = "textarea")] public string? Notes { get; set; } public bool? Cancelled { get; set; } } ``` Both AutoForm components will render the Forms UI in a Slide Over dialog and includes built-in support for calling the API to update or edit the record with integrated contextual validation, reporting any field validation errors alongside their Input controls. ### AutoFormFields If more advanced customization of a Forms appearance and behavior is required, you can use `AutoFormFields` to just render the Form's fields (including Validation binding) that can be used to populate a Request DTO that your App can handle sending, e.g: [![](/img/pages/blazor/AutoFormFields.png)](https://blazor-gallery.servicestack.net/gallery/autoform) ```csharp

@(ApiType.GetDescription())

@((MarkupString)ApiType.GetNotes())

Save
@code { [Inject] public JsonApiClient? Client { get; set; } IHasErrorStatus? Api { get; set; } Type ApiType = typeof(UpdateBooking); List? FormLayout { get; set; } Dictionary ModelDictionary { get; set; } = new(); MetadataType MetadataType => ApiType.ToMetadataType(); Booking Edit = Create.Booking("First Booking!", RoomType.Queen, 10, 100, "employee@email.com"); protected override async Task OnParametersSetAsync() { await base.OnParametersSetAsync(); Api = null; ModelDictionary = Edit.ToModelDictionary(); FormLayout ??= MetadataType.CreateFormLayout(); } async Task submit() { var request = ModelDictionary.FromModelDictionary(); Api = await Client!.ApiAsync(request); } } ``` ## Autocomplete The `` component provides a user friendly Input for being able to search and quickly select items, that includes support for rich templated content, custom matching and infinite scrolling that avoids pre-loading the entire bound list of items. Instead of being populated with a fixed List of strings or Key Value Pairs the Autocomplete component can bind directly to a list of POCOs to render its templated content where you'll be able to specify a custom `Match` filter to control which filtered items are displayed, that it can fuzzy match on single or multiple POCO properties. ### Single Contact Here's a simple Autocomplete example that binds to a **simple** `Contact` from a `List` in **allContacts**: ```html @context!.DisplayName ``` ### Single Contact with Icon The item content is templated allowing for rich content which can be used to display a Contact's profile picture and name: ```html
@context!.DisplayName
``` ### Multiple Contacts with Icon It also supports multiple selection by using `@bind-Values` to bind to the `List` in **contacts** instead, e.g: ```html
@context!.DisplayName
``` and here's a working example of what they look like together in the same form ([example source code](https://blazor-gallery.jamstacks.net/gallery/inputs)):
## TagInput The TagInput component is useful for when you want to manage a list of strings like words or tags - an input that's notably lacking in HTML Forms. Best of all `` functions like any other input where it can be included and customized in declarative forms. For example this Update AutoQuery Request DTO: ```csharp // Customize Edit Forms with [Input] and [FieldCss] attributes public class UpdateContact : IPatchDb, IReturn { public int Id { get; set; } [ValidateNotEmpty] public string? FirstName { get; set; } [ValidateNotEmpty] public string? LastName { get; set; } [Input(Type = "file"), UploadTo("profiles")] public string? ProfileUrl { get; set; } public int? SalaryExpectation { get; set; } [ValidateNotEmpty] public string? JobType { get; set; } public int? AvailabilityWeeks { get; set; } public EmploymentType? PreferredWorkType { get; set; } public string? PreferredLocation { get; set; } [ValidateNotEmpty] public string? Email { get; set; } public string? Phone { get; set; } [Input(Type = "tag"), FieldCss(Field = "col-span-12")] public List? Skills { get; set; }} [Input(Type="textarea")] [FieldCss(Field="col-span-12 text-center", Input="h-48", Label="text-xl text-indigo-700")] public string? About { get; set; } } ``` is all that's needed to render an instantly working API-enabled Form with validation binding using [Auto Form components](https://blazor-gallery.jamstacks.net/gallery/autoform): ```html ``` Which by default renders the form in a SlideOver dialog as seen when editing a row in the [Contacts AutoQueryGrid](https://blazor-gallery.jamstacks.net/grid/contacts-meta?edit=1) component: Alternatively it can be rendered in a traditional **"card"** form layout with the new `FormStyle.Card` option: ```html ``` Where it functions the same as other Input components where it can be bound directly to a `List` Request DTO property: ```html
``` ### NavList The NavList component encapsulates Tailwind's beautiful List component which is used extensively in [Blazor Gallery's Navigation](https://blazor-gallery.jamstacks.net/grid): ```html
DataGrid Component Examples for rendering tabular data Instant customizable UIs for calling AutoQuery CRUD APIs

Booking APIs

Create and manage Bookings Create and manage discount Coupons
``` Where it will render a list of navigation links with descriptions and icons:
### Colored Buttons The `ButtonStyle` on PrimaryButton component can be used to render buttons into Tailwind's different primary colors: ```csharp
Default Blue Purple Red Green Sky Cyan
```
### Select Input The `` `Values` and `Entries` parameters can be used to populate options from an array of string's or KeyValuePair's, it also includes declarative features enabling more capable declarative forms which are typically restricted by the compile-time constant expression limitation of .NET attributes. The `EvalAllowableValues` and `EvalAllowableEntries` attribute properties overcomes this limitation by letting you define the Select options with a [#Script](https://sharpscript.net) Expression whose great [.NET scriptability](https://sharpscript.net/docs/script-net) lets you reference your App's .NET instances from a string expression. This feature can then be used to populate declarative Select options from a .NET Instance, e.g: ```csharp public class CreateModifier : ICreateDb, IReturn { [ValidateNotEmpty] public string Name { get; set; } [ValidateNotEmpty] [Input(Type="select", EvalAllowableValues = "AppData.Categories")] public string Category { get; set; } public string? Description { get; set; } } ``` That we register as a global variable in our AppHost's `ScriptContext` which we can populate from a dynamic source like a DB Table, e.g: ```csharp using var db = container.Resolve().Open(); ScriptContext.Args[nameof(AppData)] = new AppData { Categories = db.Column(db.From().Select(x => x.Name)) }; ``` Where it will populate the Select input in all `CreateModifier` Auto Form components:
## PreviewFormat The `` component is useful for rendering Table Cell data into different customizable formats, e.g: ```html ``` [![](/img/pages/blazor/PreviewFormat.png)](https://blazor-gallery.servicestack.net/gallery/formats) ## HtmlFormat Whilst the versatile `` component can be used to render any Serializable object into a human-friendly HTML Format, e.g: ### Single Model ```html
``` [![](/img/pages/blazor/HtmlFormat-single.png)](https://blazor-gallery.servicestack.net/gallery/formats) ### Item Collections ```html
``` [![](/img/pages/blazor/HtmlFormat-collection.png)](https://blazor-gallery.servicestack.net/gallery/formats) ### Nested Complex Types ```html ``` [![](/img/pages/blazor/HtmlFormat-complex.png)](https://blazor-gallery.servicestack.net/gallery/formats) For more info about the Blazor Components available checkout the [Component Gallery](https://blazor-gallery.servicestack.net/gallery): [![](/img/pages/blazor/component-gallery.png)](https://blazor-gallery.servicestack.net/gallery) ## Blazor Config A lot of the default conventions used by the Blazor Components are overridable with [BlazorConfig](https://reference.servicestack.net/api/ServiceStack.Blazor/BlazorConfig) initialized in `Program.cs`, where Blazor WASM projects configured with something like: ```csharp BlazorConfig.Set(new BlazorConfig { IsWasm = true, Services = app.Services, FallbackAssetsBasePath = apiBaseUrl, EnableLogging = true, EnableVerboseLogging = builder.HostEnvironment.IsDevelopment(), }); ``` ### Asset and Fallback Paths Where `FallbackAssetsBasePath` allows you to specify a fallback path for Images which is useful when there's a delay for syncing uploaded assets to the CDN that the Blazor WASM client is deployed to, as it can fallback to referencing the asset from the .NET App Server that handled the file upload. Alternatively `AssetsBasePath` can be used for specifying a different primary CDN location that's different from the Blazor WASM App CDN or `AssetsPathResolver` and `FallbackPathResolver` can be used when more a advanced custom strategy is required.