### Open Drawer from the Start Source: https://htmxrazor.com/Docs/Components/Drawer This example shows how to open a drawer from the start (left side) of the viewport. It features a button to trigger the drawer and a navigation menu within the drawer. ```html Open Start Drawer ``` -------------------------------- ### Percentage Formatting Examples Source: https://htmxrazor.com/Docs/Components/FormatNumber Illustrates formatting numbers as percentages, with control over fraction digits. ```html

``` -------------------------------- ### Basic Select Example Source: https://htmxrazor.com/Docs/Components/Select A basic example of a select component populated with items from a server-side list. ```html ``` -------------------------------- ### Tab Placements Example Source: https://htmxrazor.com/Docs/Components/Tabs Showcases different placements for tab groups: bottom, start (vertical), and end (vertical). ```html

Tab One

Tab Two

Bottom placement content.

Tab two content.

Dashboard

Analytics

Reports

Dashboard overview.

Analytics panel.

Reports section.

Info

Details

Info panel content.

Details panel content.

``` -------------------------------- ### Currency Formatting Examples Source: https://htmxrazor.com/Docs/Components/FormatNumber Shows how to format numbers as currency with different currency codes and display options. ```html

``` -------------------------------- ### Basic Combobox Example Source: https://htmxrazor.com/Docs/Components/Combobox A basic example of a combobox bound to a server-side list of cities. ```html ``` -------------------------------- ### Content Placeholder Example Source: https://htmxrazor.com/Docs/Components/Skeleton A comprehensive example showing how to use skeleton components to create a content placeholder layout, including text and image placeholders. This is ideal for simulating complex UI structures during loading. ```html

``` -------------------------------- ### Basic Tabs Example Source: https://htmxrazor.com/Docs/Components/Tabs Demonstrates a standard tab group with general, profile, and notification settings. ```html

General

Profile

Notifications

General account settings.

Profile settings.

Notification preferences.

``` -------------------------------- ### Toast Container Setup Source: https://htmxrazor.com/Docs/Components/Toast Place a single `` in your layout file to manage all toast notifications. This example shows configuration for position, maximum visible toasts, and default duration. ```html

``` -------------------------------- ### Basic Pagination Component Source: https://htmxrazor.com/Docs/Components/Pagination A basic example of the `` component, starting from page 5. It relies on `rhx-total-pages` to determine the total number of pages available. ```html ``` -------------------------------- ### Decimal Formatting Examples Source: https://htmxrazor.com/Docs/Components/FormatNumber Demonstrates different ways to format numbers as decimals, including grouping and controlling fraction digits. ```html

``` -------------------------------- ### Manual Activation Tabs Example Source: https://htmxrazor.com/Docs/Components/Tabs Configures tabs for manual activation, allowing users to navigate with arrow keys and select with Enter/Space. ```html

First

Second

Third

Use arrow keys to move focus, then Enter/Space to select.

Second tab content.

Third tab content.

``` -------------------------------- ### Radial Select Component Example Source: https://htmxrazor.com/Roadmap Demonstrates the usage of the rhx-radial-select component, including how to define categories and link them to htmx GET requests for dynamic content loading. ```html

``` -------------------------------- ### Basic QR Code Example Source: https://htmxrazor.com/Docs/Components/QrCode Generates a basic QR code for a given URL. This is the simplest way to use the component. ```html ``` -------------------------------- ### Basic Button Example Source: https://htmxrazor.com/Docs/Components/Button A basic rhx-button with a neutral variant. This is a fundamental example of how to render the button component. ```html Button ``` -------------------------------- ### Basic Wizard Example Source: https://htmxrazor.com/Docs/Components/Wizard A three-step wizard with automatic Previous/Next navigation using htmx. This snippet demonstrates the basic structure for defining wizard steps. ```html

Create Account

Your Profile

Review & Confirm

Please review your information before submitting.

``` -------------------------------- ### Basic Details Component Source: https://htmxrazor.com/Docs/Components/Details A basic example of the rhx-details component displaying a summary and content. ```html

htmxRazor is an ASP.NET Core component library built with Razor Tag Helpers and first-class htmx integration.

``` -------------------------------- ### Basic Dialog Example Source: https://htmxrazor.com/Docs/Components/Dialog Demonstrates a simple dialog with a title and a close button. It can be opened using a trigger button. ```html Open Dialog

This is a basic dialog with a title and close button.

Press ESC or click the close button to dismiss.

``` -------------------------------- ### SignalR Service and Hub Setup Source: https://htmxrazor.com/Docs/Components/SignalR Configures SignalR services and maps the SignalR hub endpoint in the application's startup code. ```csharp // Program.cs builder.Services.AddSignalR(); var app = builder.Build(); app.MapHub("/chatHub"); ``` -------------------------------- ### Basic Popup Example Source: https://htmxrazor.com/Docs/Components/Popup Demonstrates a basic popup anchored to a button. Uses rhx-position.js for smart placement. The popup is toggled by clicking the anchor button. ```html

``` -------------------------------- ### Disabled Split Panel Example Source: https://htmxrazor.com/Docs/Components/SplitPanel Creates a split panel where the divider is disabled, preventing any resizing. The start panel is fixed at 60% and the end panel at 40%. ```html

Fixed start panel (60%).

Fixed end panel (40%).

``` -------------------------------- ### Contained Drawer Example Source: https://htmxrazor.com/Docs/Components/Drawer This example shows a drawer that opens within a specified container, rather than the entire viewport. It's useful for sidebars or contextual panels. ```html

Toggle Sidebar

Main content area. The drawer opens within this container.

Active Pending Archived

``` -------------------------------- ### htmx Integration Examples Source: https://htmxrazor.com/Docs/Components/Button Shows how to integrate rhx-button with htmx for dynamic actions like loading content or deleting items. Requires htmx to be loaded. ```html Load Greeting Delete Item ``` -------------------------------- ### Card Gallery Scroller Example Source: https://htmxrazor.com/Docs/Components/Scroller Use this example to create a horizontally scrollable card gallery. Each card has a fixed width, allowing the row to extend beyond the viewport. ```html

Card 1

Card content here.

View

``` -------------------------------- ### Dialog with Footer Example Source: https://htmxrazor.com/Docs/Components/Dialog Illustrates a dialog with a footer containing action buttons like 'Cancel' and 'Save Changes'. Includes an input field. ```html Open Dialog with Footer

Cancel

Save Changes

``` -------------------------------- ### Small QR Code Example Source: https://htmxrazor.com/Docs/Components/QrCode Generates a small QR code by specifying a smaller `rhx-size`. Useful for limited space. ```html ``` -------------------------------- ### Headerless Dialog Example Source: https://htmxrazor.com/Docs/Components/Dialog Shows a dialog without a header, suitable for confirmation prompts. It includes cancel and confirm buttons. ```html Open Headerless Dialog

Are you sure you want to proceed?

Cancel

Confirm

``` -------------------------------- ### Basic Dropdown Example Source: https://htmxrazor.com/Docs/Components/Dropdowns A standard dropdown with actions like Edit, Duplicate, and Archive. Includes a disabled item. ```html

Actions ▾

Edit

Duplicate

Editor

Code or text editing area.

Output

Console or preview area below the editor.

``` -------------------------------- ### Horizontal Split Panel Example Source: https://htmxrazor.com/Docs/Components/SplitPanel Demonstrates a basic horizontal split panel with a sidebar and main content area. The initial divider position is set to 30%. ```html

Sidebar

Navigation or filter panel. Drag the divider to resize.

Main Content

Primary content area. The end panel takes the remaining space.

``` -------------------------------- ### Basic Animated Image Source: https://htmxrazor.com/Docs/Components/AnimatedImage Displays an animated image or video from a given URL. The animation starts playing automatically by default. ```html ``` -------------------------------- ### Optimistic Switch Example Source: https://htmxrazor.com/Docs/Components/Optimistic Use `rhx-optimistic` on a switch to provide immediate visual feedback for toggling settings like dark mode. The UI reverts if the server returns an error. ```html ``` -------------------------------- ### Determinate Progress Bar Values Source: https://htmxrazor.com/Docs/Components/ProgressBar Use these examples to display progress bars with specific completion percentages. Each bar can have a custom accessible label. ```html

``` -------------------------------- ### Button States (Disabled and Loading) Source: https://htmxrazor.com/Docs/Components/Button Examples of buttons in disabled and loading states. The loading state displays a spinner and disables interaction. ```html Disabled Loading ``` -------------------------------- ### Basic Card Example Source: https://htmxrazor.com/Docs/Components/Card A standard card with a header, body content, and a footer containing buttons. Suitable for product listings or general information display. ```html

Product Name

A short description of the product. Great for showcasing items in a grid layout.

Buy Now

Details

``` -------------------------------- ### htmx Integration for Sorting and Pagination Source: https://htmxrazor.com/Docs/Components/DataTable This example shows how to integrate htmx with the data table for dynamic sorting and pagination. The server handles requests and returns partial views to update the table content. ```html

@await Html.PartialAsync("_DataTablePartial", state)

public IActionResult OnGetTableData(DataTableRequest request) { // sort, filter, paginate... return Partial("_DataTablePartial", state); } ``` -------------------------------- ### Interactive Kanban Board Example Source: https://htmxrazor.com/Docs/Components/Kanban This snippet shows the basic structure of an interactive Kanban board with columns and cards. It includes htmx attributes for handling card drops and server updates. ```html

Design homepage

``` -------------------------------- ### Vertical Divider Example Source: https://htmxrazor.com/Docs/Components/Divider This snippet demonstrates how to render a vertical divider, typically used within flex containers to separate adjacent items. ```html

Left

Right

``` -------------------------------- ### Optimistic Button Example Source: https://htmxrazor.com/Docs/Components/Optimistic Enhance button interactions with optimistic loading states. The button visually indicates it's processing the request immediately after being clicked, reverting on server error. ```html Like ``` -------------------------------- ### Basic Date Range Picker with Presets Source: https://htmxrazor.com/Docs/Components/DateRangePicker This snippet shows a basic implementation of the Date Range Picker with predefined preset options for quick selection. It configures the names for the start and end date fields and sets a placeholder. ```html ``` -------------------------------- ### Date Picker with Min/Max Range Source: https://htmxrazor.com/Docs/Components/DatePicker This example demonstrates how to restrict the selectable date range using `rhx-min` and `rhx-max` properties. Dates outside this ISO-formatted range will be disabled. ```html ``` -------------------------------- ### Toast Variants Source: https://htmxrazor.com/Docs/Components/Toast Static examples demonstrating the different visual variants available for toasts: neutral, brand, success, warning, and danger. These show the rendered HTML structure. ```html

This is a neutral notification.

New feature available!

Item saved successfully!

Your session expires in 5 minutes.

Failed to delete the item. ``` -------------------------------- ### Card with Image Example Source: https://htmxrazor.com/Docs/Components/Card A card that includes an image at the top, followed by a header, body content, and a footer. Ideal for visual content like articles or featured items. ```html

Featured Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.

``` -------------------------------- ### Basic Command Palette with Static Results Source: https://htmxrazor.com/Docs/Components/CommandPalette Demonstrates a basic command palette with predefined static pages. Use this for a fixed set of navigation items. ```html Open Palette

Home

Getting Started

Button

Dialog

``` -------------------------------- ### Server-Side: OOB Swap (C#) Source: https://htmxrazor.com/Docs/Components/Toast An alternative server-side method for custom toast content. The server renders the full `` HTML and returns it for an out-of-band swap into the toast container. This example shows returning a danger toast with a specified duration. ```csharp // Return a toast via out-of-band swap: public IActionResult OnPostDelete() { // ... delete logic ... return this.HxToastOob("Item deleted", "danger", duration: 3000); } ``` -------------------------------- ### Visually Hidden Live Region for Screen-Reader-Only Announcements Source: https://htmxrazor.com/Docs/Components/LiveRegion This example utilizes `rhx-visually-hidden="true"` to create a live region that is not visible on screen but will announce content to screen readers. It's useful for status updates that don't require visual presentation. ```html 3 results found ``` -------------------------------- ### Multiple FAQ Details Components Source: https://htmxrazor.com/Docs/Components/Details Demonstrates using multiple rhx-details components to create an FAQ section. ```html

Add the NuGet package and register the tag helpers in _ViewImports.cshtml.

Yes! Every component supports hx-get, hx-post, hx-trigger, hx-target, and hx-swap attributes.

htmxRazor uses semantic HTML, ARIA attributes, and keyboard navigation throughout all components.

``` -------------------------------- ### Add htmxRazor NuGet Package Source: https://htmxrazor.com/Docs/GettingStarted Install the htmxRazor NuGet package using the .NET CLI. ```bash dotnet add package htmxRazor ``` -------------------------------- ### Use htmxRazor Button Component Source: https://htmxrazor.com/ Example of using the rhx-button component with htmx attributes for data loading. ```html Load Data ``` -------------------------------- ### Switch Sizes Source: https://htmxrazor.com/Docs/Components/Switch Demonstrates how to set the visual size of the switch component. ```html

``` -------------------------------- ### Horizontal Divider Example Source: https://htmxrazor.com/Docs/Components/Divider Use this snippet to add a standard horizontal visual separator between content elements. ```html

Content above the divider.

Content below the divider.

``` -------------------------------- ### Progress Ring with Various Values Source: https://htmxrazor.com/Docs/Components/ProgressRing Demonstrates how to set different progress values and accessible labels for the progress ring. ```html

``` -------------------------------- ### Disabled Tooltip Example Source: https://htmxrazor.com/Docs/Components/Tooltip Demonstrates how to disable a tooltip using the rhx-disabled attribute. A disabled tooltip will not appear on interaction. ```html

Hover (no tooltip)

``` -------------------------------- ### Dropdown Placements Source: https://htmxrazor.com/Docs/Components/Dropdowns Demonstrates different placements for the dropdown menu: bottom-start, bottom-end, and top-start. ```html

Bottom Start ▾

Item A

Item B

Bottom End ▾

Item A

Item B

Top Start ▴

Item A

Item B

``` -------------------------------- ### Link Buttons Source: https://htmxrazor.com/Docs/Components/Button Examples of rhx-button used as a link. It can navigate to internal or external URLs and supports target attributes. ```html Navigate External Link ``` -------------------------------- ### Basic Tooltip Usage Source: https://htmxrazor.com/Docs/Components/Tooltip Demonstrates the basic usage of the rhx-tooltip component with different rhx-content and rhx-placement attributes. ```html

Save

Delete

Settings

``` -------------------------------- ### No Overflow Scroller Example Source: https://htmxrazor.com/Docs/Components/Scroller This snippet demonstrates a horizontal scroller where the content does not exceed the container width, effectively showing no overflow. ```html

``` -------------------------------- ### Select Component Sizes Source: https://htmxrazor.com/Docs/Components/Select Illustrates the different size variants (small, medium, large) available for the select component. ```html

``` -------------------------------- ### Server-Side State Tracking for Wizard Source: https://htmxrazor.com/Docs/Components/Wizard Demonstrates how to track wizard step progress across requests using `WizardState` and `WizardSessionExtensions`. This C# code handles the logic for updating and persisting the wizard's state on the server. ```csharp public IActionResult OnPostWizardNext(int step) { var state = TempData.GetWizardState("checkout"); state.MarkComplete(state.CurrentStep); state.CurrentStep = step; TempData.SetWizardState("checkout", state); return Partial("_WizardPartial", state); } ``` -------------------------------- ### Indeterminate Progress Bar Source: https://htmxrazor.com/Docs/Components/ProgressBar Use this example for progress bars where the exact completion percentage is unknown, such as during initial loading or background processing. ```html ``` -------------------------------- ### Popup with Arrow Example Source: https://htmxrazor.com/Docs/Components/Popup Shows a popup with a directional arrow pointing to its anchor. The popup and its arrow are toggled by clicking the anchor button. ```html

``` -------------------------------- ### Icon Sizes Source: https://htmxrazor.com/Docs/Components/Icon Demonstrates how to set different sizes for the icon component. Available sizes are small, medium (default), and large. ```html

``` -------------------------------- ### Model Binding with Checkbox Source: https://htmxrazor.com/Docs/Components/Checkbox Example of using the `rhx-for` property for model binding with ASP.NET Core. This enables two-way data binding. ```html ``` -------------------------------- ### Basic Before/After Image Comparison Source: https://htmxrazor.com/Docs/Components/Comparison Displays a basic image comparison slider using provided 'before' and 'after' image URLs and their alt texts. ```html ``` -------------------------------- ### Vertical Scroller Example Source: https://htmxrazor.com/Docs/Components/Scroller Implement a vertically scrollable container with this snippet. It's ideal for long lists or content that requires a fixed height. ```html

List item 1

List item 2

List item 30

``` -------------------------------- ### Input Types Source: https://htmxrazor.com/Docs/Components/Input Demonstrates different input types for specific data formats like email, password, and numbers. Select the type that matches the expected input. ```html

```