# twblazor

> twblazor is a free, open source library of Tailwind CSS components for Blazor (.NET), installed from NuGet as the `twblazor` package. It works in Blazor Web Apps using Interactive Server or Interactive WebAssembly render modes. Components are named `Tw*` (for example `TwButton`, `TwTextfield`, `TwDataTable`) and are styled entirely by a `Theme.cs` file that lives in the consuming app and is generated by the Theme builder at https://twblazor.com/theme.

This file is for AI assistants helping developers build apps with the twblazor NuGet package. Follow it exactly. twblazor is NOT MudBlazor, Radzen, Blazorise, Bootstrap or Flowbite: do not use their component names, parameters, services or setup steps. When unsure whether a component or parameter exists, read that component's page below rather than guessing. Every page linked below is plain Markdown and lists the component's examples, keyboard navigation, theme and every parameter it accepts. The same page as HTML is at the same address without `.md`.

## Rules for AI assistants

- The theme MUST come from the Theme builder at https://twblazor.com/theme, or be the default `Theme.cs` shown on https://twblazor.com/get-started.md. Never write a `Theme.cs` from scratch, never invent theme classes or properties (for example `TwButtonTheme` members), and never restructure the generated file.
- To change brand colours, surfaces, rounding, shadows, the default input or button style, or which components are included, go back to https://twblazor.com/theme, change the settings, press "Generate Theme" and replace the whole `Theme.cs` with the new output. Do not hand-edit colours or class strings in the generated file as a substitute for regenerating it.
- The generated `Theme.cs` only contains themes for the components ticked on the builder's "Components" tab. Using a component whose theme was left out throws `InvalidOperationException: No Tw...Theme has been configured on the theme`. The fix is to regenerate the theme with that component ticked, not to write the missing theme by hand.
- The Theme builder's file exposes `Theme.CreateTheme`. The default theme on Get Started exposes `Theme.CreateDefaultTheme`. Register whichever one the file actually contains: `builder.Services.AddTwBlazor(_ => { }, Theme.CreateTheme);`
- twblazor ships NO pre-built stylesheet. Tailwind cannot read classes from a .dll, so the app's own Tailwind build must scan `Theme.cs` with an `@source` directive. If components render unstyled, the cause is almost always a missing `@source` for `Theme.cs` or a stale `output.css`.
- Customise individual instances with component parameters (`Color`, `Variant`, `Dense`, `Class`, and so on) and enums from `TwBlazor.Enums` (for example `Color.Primary`, `ButtonVariant.Outlined`). Do not add global CSS overrides for twblazor's internal markup.
- Toasts and dialogs need `<TwToastProvider />` and `<TwDialogProvider />` in an interactively rendered layout (`MainLayout.razor`), never in `App.razor`.
- Keep the accessibility features the components provide: give inputs a `Label`, give icon-only buttons an accessible label, and do not remove focus styles.

## Getting started

Full guide with both hosting models: https://twblazor.com/get-started.md

1. Create a Blazor Web App:
   - Interactive Server: `dotnet new blazor -o {YourProjectName}`
   - Interactive WebAssembly: `dotnet new blazor -o {YourProjectName} --interactivity WebAssembly` (this creates a host project `{YourProjectName}` and a client project `{YourProjectName}.Client`)
2. Install the package. With WebAssembly, install it in BOTH projects.
   ```bash
   dotnet add package twblazor --version 2.1.2
   ```
3. In `Components/App.razor` (always in the host project) add to `<head>`:
   ```html
   <link rel="stylesheet" href="@Assets["_content/twblazor/icons/bootstrap-icons.min.css"]">
   <link rel="stylesheet" href="@Assets["css/output.css"]" />
   ```
   and before the Blazor script at the end of `<body>`:
   ```html
   <script src="@Assets["_content/twblazor/js/twblazor.js"]"></script>
   ```
   `css/output.css` is the app's own Tailwind build from step 8, so it 404s until then.
4. Add to `_Imports.razor` (`Components/_Imports.razor` for Server, `{YourProjectName}.Client/_Imports.razor` for WebAssembly):
   ```razor
   @using TwBlazor.Components
   @using TwBlazor.Enums
   @using TwBlazor
   ```
5. Add the providers to the top of `MainLayout.razor` (`Components/Layout/MainLayout.razor` for Server, `{YourProjectName}.Client/Layout/MainLayout.razor` for WebAssembly):
   ```razor
   <TwToastProvider />
   <TwDialogProvider />
   ```
6. Generate a theme at https://twblazor.com/theme and save it as `Theme.cs` at the root of the project that compiles the components: `{YourProjectName}` for Server, `{YourProjectName}.Client` for WebAssembly. See the rules above.
7. Register the services in `Program.cs`. With WebAssembly, do this in BOTH `Program.cs` files and add `using {YourProjectName}.Client;` to the host project's.
   ```csharp
   using TwBlazor;

   builder.Services.AddTwBlazor(_ => { }, Theme.CreateTheme);
   ```
8. Build Tailwind CSS (v4, Tailwind CLI) from the solution root:
   ```bash
   npm init -y
   npm install tailwindcss @tailwindcss/cli
   ```
   Create `{YourProjectName}/wwwroot/css/input.css`. Server:
   ```css
   @import "tailwindcss";

   @source "../../**/*.razor";
   @source "../../Theme.cs";
   ```
   WebAssembly (the sources must reach into the client project):
   ```css
   @import "tailwindcss";

   @source "../../**/*.razor";
   @source "../../../{YourProjectName}.Client/**/*.razor";
   @source "../../../{YourProjectName}.Client/Theme.cs";
   ```
   Then copy the keyframes (`tw-wave`, `tw-icon-pulse`, `tw-rating-pop`) from step 8 of https://twblazor.com/get-started.md into the end of `input.css`. They power `TwSkeleton`'s wave, `TwProgress`'s shimmer, `TwIcon`'s pulse and `TwRating`'s pop animations.
   Build it (add `--watch` while developing):
   - Server: `npx @tailwindcss/cli -i ./wwwroot/css/input.css -o ./wwwroot/css/output.css`
   - WebAssembly: `npx @tailwindcss/cli -i ./{YourProjectName}/wwwroot/css/input.css -o ./{YourProjectName}/wwwroot/css/output.css`
9. Check it works with a page using `@rendermode InteractiveServer` (or `InteractiveWebAssembly`, placed in the client project):
   ```razor
   <TwAlert Color="Color.Success">It works.</TwAlert>
   <TwButton Label="@($"Clicked {count} times")" Color="Color.Primary" OnClick="() => count++" />
   <TwSwitch @bind-Value="enabled" Label="Enabled" Color="Color.Primary" />

   @code {
       private int count;
       private bool enabled;
   }
   ```

## Documentation

- [Theme builder](https://twblazor.com/theme): pick brand colours, surfaces, defaults and components, then generate `Theme.cs`. The only supported way to create or change a theme. It is an interactive page, so it has no Markdown version.
- [Get Started](https://twblazor.com/get-started.md): Install twblazor in a Blazor Server or WebAssembly app: add the NuGet package, imports, providers and a theme, register AddTwBlazor and build your Tailwind CSS.
- [AI Agents & Skills](https://twblazor.com/ai-agents.md): Help AI coding assistants write correct twblazor code with llms.txt, a Markdown copy of every docs page and Agent Skills for Claude Code.
- [Class Merge](https://twblazor.com/class-merge.md): How twblazor merges conflicting Tailwind classes so the last one wins, and how to turn it off or add your own utilities with TwBlazorOptions.ClassMerge.
- [TwDirectionProvider](https://twblazor.com/direction-provider.md): TwDirectionProvider sets a Blazor app, or part of a page, to right to left or left to right, mirroring layout and arrow keys for Arabic and Hebrew.
- [Localization](https://twblazor.com/localization.md): Translate twblazor components and set date and time formats: built in languages, your own .resx files, and options.Localization in AddTwBlazor.
- [Tailwind CSS with Blazor](https://twblazor.com/tailwind-blazor.md): How to use Tailwind CSS with Blazor Server and WebAssembly, and how twblazor gives you accessible, themeable Tailwind Blazor components.
- [Why twblazor?](https://twblazor.com/why-twblazor.md): twblazor is the MIT licensed Blazor component library built on Tailwind CSS. Free, fully themeable and styled in your own project.

## Agent skills

The same guidance packaged as Agent Skills. Download [every skill in one zip](https://twblazor.com/skills/twblazor-skills.zip) and extract it into `.claude/skills/`, or read a skill directly:

- [twblazor-components](https://twblazor.com/skills/twblazor-components/SKILL.md): Writes Razor markup with twblazor components such as TwButton, TwTextfield, TwSelect, TwDataTable, TwDialog, toasts and TwChart, using only the parameters each component really has. Use whenever building or changing UI with twblazor, or when converting markup from another Blazor component library to twblazor.
- [twblazor-localization](https://twblazor.com/skills/twblazor-localization/SKILL.md): Translates twblazor components and configures date and time formats and right to left layouts, using the 24 built-in languages, the app's own .resx files, options.Localization in AddTwBlazor, a custom ITwLocalizer and TwDirectionProvider. Use when localizing a twblazor app, rewording built-in component text, or supporting Arabic, Hebrew or other right to left languages.
- [twblazor-setup](https://twblazor.com/skills/twblazor-setup/SKILL.md): Installs and sets up the twblazor Tailwind CSS component library in a Blazor Server or Blazor WebAssembly app, covering the NuGet package, App.razor links, imports, toast and dialog providers, Theme.cs, AddTwBlazor and the Tailwind build. Use when adding twblazor to a project, or when twblazor components render unstyled or throw on startup.
- [twblazor-theming](https://twblazor.com/skills/twblazor-theming/SKILL.md): Creates and changes the Theme.cs that styles every twblazor component, using the twblazor Theme builder for brand colours, surfaces, rounding, shadows, default variants and the components to include, plus dark mode and per-instance Class overrides. Use when theming twblazor, changing its look, adding a component to the theme or fixing a missing component theme.

## Layout

- [Breadcrumb](https://twblazor.com/breadcrumb.md) `TwBreadcrumb`: TwBreadcrumb is a Blazor breadcrumb component that shows the current page location. Build trails automatically with Auto, or manually with Label, Href and Icon.
- [Card](https://twblazor.com/card.md) `TwCard`: TwCard is a Blazor card component for grouping content. Set Title, HeaderContent and Bordered, or lay cards out in a responsive grid.
- [Carousel](https://twblazor.com/carousel.md) `TwCarousel`: TwCarousel is a Blazor carousel component. Bind SelectedIndex and configure AutoPlay, AutoPlayInterval, Loop, ShowArrows, ShowIndicators and swipe gestures.
- [Collapse](https://twblazor.com/collapse.md) `TwCollapse`: TwCollapse is a Blazor collapse component that expands and hides content. Bind IsOpen, set Title or HeaderContent, and react to OnToggle.
- [Footer](https://twblazor.com/footer.md) `TwFooter`: TwFooter is an accessible Blazor page footer with columns of links, a brand slot, free-form content and a bottom row for copyright and legal links.
- [Menu](https://twblazor.com/menu.md) `TwMenu`: TwMenu is a Blazor menu button component that opens a keyboard friendly menu of actions, tick options and labelled groups.
- [Navbar](https://twblazor.com/navbar.md) `TwNavbar`: TwNavbar is a responsive Blazor navbar with BrandContent, NavigationContent and ActionsContent slots, data-driven NavigationItems and keyboard support.
- [On This Page](https://twblazor.com/on-this-page.md) `TwOnThisPage`: TwOnThisPage is a Blazor table of contents component: an On this page list of section links that highlights the section being read as you scroll.
- [Sidebar](https://twblazor.com/sidebar.md) `TwSidebar`: TwSidebar is a Blazor sidebar for navigation. Build it from SidebarContent markup or data-driven NavigationItems, with IsSearchable and a collapsible layout.
- [Stepper](https://twblazor.com/stepper.md) `TwStepper`: TwStepper is a Blazor stepper for multi-step flows. Bind ActiveStepIndex, set Orientation, Linear and Color, and give each step a Label and Description.
- [Tabs](https://twblazor.com/tabs.md) `TwTabContainer`: TwTabs is a Blazor tabs component, built from TwTabContainer and TwTab. Set Label, Color, Dense and Disabled, and colour the whole container or single tabs.
- [Tree List](https://twblazor.com/tree-list.md) `TwTreeList`: TwTreeList is a Blazor tree view for nested, expandable data. Set Label, Icon and Disabled per node, show checkboxes, and bind Checked and Collapsed.

## Forms

- [Button](https://twblazor.com/button.md) `TwButton`: TwButton is a Blazor button component. Use Variant, Color, StartIcon, EndIcon, Href, Disabled and IconButton, or group buttons horizontally or vertically.
- [Checkbox](https://twblazor.com/checkbox.md) `TwCheckbox`: TwCheckbox is a Blazor checkbox component. Bind Value or SelectedValues, set Color, Size, Disabled and Horizontal, or generate a group from Items.
- [Color Picker](https://twblazor.com/color-picker.md) `TwColorPicker`: TwColorPicker is a Blazor colour picker component. Bind Value, choose an OutputFormat, and toggle ShowAlpha and ShowModeSwitch. Supports input variants.
- [Date & Time Pickers: Date](https://twblazor.com/date-picker.md) `TwDatePicker`: TwDatePicker is a Blazor date picker component with a calendar popup. Bind Value, set MinDate, MaxDate, Format and Placeholder, or use the native input.
- [Date & Time Pickers: Date Range](https://twblazor.com/date-range-picker.md) `TwDateRangePicker`: TwDateRangePicker is a Blazor date range picker with a two-month calendar popup. Bind Value or SelectedRange and constrain it with MinDate and MaxDate.
- [Date & Time Pickers: Datetime](https://twblazor.com/datetime-picker.md) `TwDateTimePicker`: TwDateTimePicker is a Blazor component for choosing a date and time in one input. Bind Value, set Format and Placeholder, and use PreferNativePicker on mobile.
- [Date & Time Pickers: Datetime Range](https://twblazor.com/datetime-range-picker.md) `TwDateTimeRangePicker`: TwDateTimeRangePicker is a Blazor component for choosing a start and end date and time from one popover. Bind Value, set MinDate, MaxDate and Format.
- [Date & Time Pickers: Time](https://twblazor.com/time-picker.md) `TwTimePicker`: TwTimePicker is a Blazor time picker component with 12 hour and 24 hour formats. Bind Value or SelectedTime, and set Placeholder and Variant.
- [Date & Time Pickers: Time Range](https://twblazor.com/time-range-picker.md) `TwTimeRangePicker`: TwTimeRangePicker is a Blazor component for choosing a start and end time from one popover. Bind Value or SelectedRange and set Format and Placeholder.
- [File Upload](https://twblazor.com/file-upload.md) `TwFileUpload`: TwFileUpload is a Blazor file upload component. Bind Files, restrict types with AllowedFileTypes, allow Multiple files and handle OnChange.
- [Numeric](https://twblazor.com/numeric.md) `TwNumeric`: TwNumeric is a Blazor number input component. Bind any numeric type, set Min, Max and Step, format by culture, and add a prefix, suffix or clear button.
- [Radio Button](https://twblazor.com/radio-button.md) `TwRadioButton`: TwRadioButton is a Blazor radio button component. Bind SelectedValue, set Color, Disabled and Horizontal, or generate a group from Items.
- [Rating](https://twblazor.com/rating.md) `TwRating`: TwRating is a Blazor star rating component. Bind Value, set Min and Max, rate in whole or half steps and swap in any icon.
- [Select](https://twblazor.com/select.md) `TwSelect`: TwSelect is a Blazor select component for complex objects and numbers. Bind SelectedValue, or SelectedValues with Multiple, and set Placeholder and Required.
- [Slider](https://twblazor.com/slider.md) `TwSlider`: TwSlider is a Blazor slider component for choosing a number in a range. Bind Value and set Min, Max, Step and Color.
- [Switch](https://twblazor.com/switch.md) `TwSwitch`: TwSwitch is a Blazor toggle switch component for on and off settings. Bind Value and set Color, Name, and disabled or readonly states.
- [Textfield](https://twblazor.com/textfield.md) `TwTextfield`: TwTextfield is a Blazor text input component. Bind Value, use Multiline for a textarea, add a clear button with Clearable, and validate with Validator.

## Feedback

- [Alert](https://twblazor.com/alert.md) `TwAlert`: TwAlert is a Blazor alert component for status messages. Set Color, Dense, StartIcon and EndIcon, and make it Dismissible with a bindable Dismissed value.
- [Avatar](https://twblazor.com/avatar.md) `TwAvatar`: TwAvatar is a Blazor avatar component that shows a picture, initials or an icon for a person. Set Src, Name, Initials, Icon, Color and Size.
- [Chip](https://twblazor.com/chip.md) `TwChip`: TwChip is a Blazor chip component for tags and filters. Set Label, Color, Variant, Size, StartIcon, Avatar and Href, or make it Closable with OnClose.
- [Icon](https://twblazor.com/icon.md) `TwIcon`: TwIcon is a Blazor icon component for Bootstrap Icons. Pass an Icon enum value, style it with Tailwind classes, or add OnClick to make an icon button.
- [Progress](https://twblazor.com/progress.md) `TwProgress`: TwProgress is a Blazor progress bar component. Set Value, Max, Color and Size, or use Indeterminate mode when the duration is unknown.
- [Skeleton](https://twblazor.com/skeleton.md) `TwSkeleton`: TwSkeleton is a Blazor loading placeholder. Choose a SkeletonType and Animation, set Width and Height, or generate one from ChildContent while Loading.
- [Spinner](https://twblazor.com/spinner.md) `TwSpinner`: TwSpinner is a Blazor loading spinner component. Set Size, Color, Label and ShowLabel, or use it inside a button.
- [Tooltip](https://twblazor.com/tooltip.md) `TwTooltip`: TwTooltip is a Blazor tooltip that wraps any content and shows an accessible bubble on hover and focus. Set Text or TooltipContent and a Placement.

## Data

- [Data Table](https://twblazor.com/data-table.md) `TwDataTable`: TwDataTable is a Blazor data table component with pagination, search, sortable columns and custom row classes for displaying structured data.
- [Pagination](https://twblazor.com/pagination.md) `TwPagination`: TwPagination is a Blazor pagination component. Bind ActivePage and PageSize, set TotalPages and ShowPageSize to split content across pages.
- [Pick List](https://twblazor.com/pick-list.md) `TwPickList`: TwPickList is a Blazor dual list-box component for moving items between SourceItems and TargetItems, with move-all buttons, AllowReorder and keyboard support.
- [Barcode](https://twblazor.com/barcode.md) `TwBarcode`: TwBarcode is a dependency-free Blazor barcode component. Set Value and Format for Code 128, Code 39, EAN-13, EAN-8 or UPC-A, or use ITwBarcodeService.
- [QR Code](https://twblazor.com/qr-code.md) `TwQrCode`: TwQrCode is a Blazor QR code component with no third-party dependencies. Set Value, ErrorCorrection, Size and QuietZone, or build codes with ITwQrCodeService.
- [Calendar](https://twblazor.com/calendar.md) `TwCalendar`: TwCalendar is a Blazor Day, Week and Month calendar with drag and drop, all-day events, a built-in create and edit dialog, and configurable event details.
- [Table](https://twblazor.com/table.md) `TwTable`: TwTable is a Blazor table component with striped, hoverable, bordered and borderless styles, plus manual pagination.

## Charts

- [Overview](https://twblazor.com/chart.md) `TwChart`: TwChart is the Blazor chart container for over fifty chart types. It adds a title, loading state and shared options. Accessible and script-free.
- [Area](https://twblazor.com/chart/area.md) `TwAreaChart`: TwAreaChart is a Blazor area chart: a line chart with the space beneath filled. Supports stacked areas and smooth or stepped curves.
- [Bar](https://twblazor.com/chart/bar.md) `TwBarChart`: TwBarChart is a Blazor bar chart that compares categories with horizontal bars. Supports grouped, stacked, 100% stacked and diverging layouts.
- [Box Plot](https://twblazor.com/chart/box-plot.md) `TwBoxPlotChart`: TwBoxPlotChart is a Blazor box plot that summarises groups of raw values by median, quartiles, whiskers and outliers.
- [Bullet](https://twblazor.com/chart/bullet.md) `TwBulletChart`: TwBulletChart is a Blazor bullet chart that benchmarks an actual value against a target, with shaded bands for qualitative ranges.
- [Bump](https://twblazor.com/chart/bump.md) `TwBumpChart`: TwBumpChart is a Blazor bump chart that tracks how series rank against each other across categories, with the highest value ranked first.
- [Candlestick](https://twblazor.com/chart/candlestick.md) `TwCandlestickChart`: TwCandlestickChart is a Blazor candlestick chart showing the open, high, low and close of each period. Also draws OHLC charts.
- [Column](https://twblazor.com/chart/column.md) `TwColumnChart`: TwColumnChart is a Blazor column chart that compares categories with vertical columns. Supports grouped, stacked, 100% stacked and diverging layouts.
- [Dot Plot](https://twblazor.com/chart/dot-plot.md) `TwDotPlotChart`: TwDotPlotChart is a Blazor dot plot that compares series by position on a shared line per category. The scale does not need to start at zero.
- [Dumbbell](https://twblazor.com/chart/dumbbell.md) `TwDumbbellChart`: TwDumbbellChart is a Blazor dumbbell chart: two dots per category joined by a bar, highlighting the gap between values such as before and after.
- [Funnel](https://twblazor.com/chart/funnel.md) `TwFunnelChart`: TwFunnelChart is a Blazor funnel chart showing how much remains at each stage of a process. Invert it to draw a pyramid chart.
- [Gantt](https://twblazor.com/chart/gantt.md) `TwGanttChart`: TwGanttChart is a Blazor Gantt chart: a horizontal bar per task from its start date to its end date, showing a schedule and overlaps.
- [Gauge](https://twblazor.com/chart/gauge.md) `TwGaugeChart`: TwGaugeChart is a Blazor circular gauge: an arc filled in proportion to one value between a minimum and a maximum.
- [Heatmap](https://twblazor.com/chart/heatmap.md) `TwHeatmapChart`: TwHeatmapChart is a Blazor heatmap: a grid of cells whose color intensity shows the value where a row and a column meet.
- [Histogram](https://twblazor.com/chart/histogram.md) `TwHistogramChart`: TwHistogramChart is a Blazor histogram that groups raw values into equal-width bins to reveal the shape of a distribution.
- [Icon](https://twblazor.com/chart/icon.md) `TwIconChart`: TwIconChart is a Blazor icon chart and pictogram: values shown as rows of repeated icons, or as one icon sized by each value.
- [Line](https://twblazor.com/chart/line.md) `TwLineChart`: TwLineChart is a Blazor line chart for trends. Supports straight, smooth (spline) and step lines, markers and gaps for missing values.
- [Lollipop](https://twblazor.com/chart/lollipop.md) `TwLollipopChart`: TwLollipopChart is a Blazor lollipop chart: a thin stem and a dot per value. A lighter alternative to bars when there are many categories.
- [Matrix](https://twblazor.com/chart/matrix.md) `TwMatrixChart`: TwMatrixChart is a Blazor matrix chart: a grid with a dot sized by value where a row and a column meet, for two categorical dimensions.
- [Nightingale](https://twblazor.com/chart/nightingale.md) `TwNightingaleChart`: TwNightingaleChart is a Blazor Nightingale (rose) chart: equal-angle wedges whose radius shows each value, suited to cyclical data.
- [Parallel Coordinates](https://twblazor.com/chart/parallel-coordinates.md) `TwParallelCoordinatesChart`: TwParallelCoordinatesChart is a Blazor parallel coordinates chart: one axis per variable and a line per item, each axis on its own scale.
- [Pie](https://twblazor.com/chart/pie.md) `TwPieChart`: TwPieChart is a Blazor pie chart for parts of a whole. Set an inner radius for a donut chart, or draw it as a semicircle.
- [Quadrant](https://twblazor.com/chart/quadrant.md) `TwQuadrantChart`: TwQuadrantChart is a Blazor quadrant chart: a scatter plot split into four labelled regions by two thresholds, for sorting items into groups.
- [Radar](https://twblazor.com/chart/radar.md) `TwRadarChart`: TwRadarChart is a Blazor radar (spider) chart that compares a few items across several attributes on spokes around a center.
- [Radial Bar](https://twblazor.com/chart/radial-bar.md) `TwRadialBarChart`: TwRadialBarChart is a Blazor radial bar chart: bars bent around a circle, one ring per value, each sweeping further for larger values.
- [Range](https://twblazor.com/chart/range.md) `TwRangeChart`: TwRangeChart is a Blazor range chart that draws a floating bar from a low value to a high value per category, such as salary bands.
- [Scatter](https://twblazor.com/chart/scatter.md) `TwScatterChart`: TwScatterChart is a Blazor scatter plot that positions points by two values. Also draws bubble charts and connected scatter plots.
- [Slope](https://twblazor.com/chart/slope.md) `TwSlopeChart`: TwSlopeChart is a Blazor slope chart: a labelled line per series between two points in time, showing the direction and size of each change.
- [Small Multiples](https://twblazor.com/chart/small-multiples.md) `TwSmallMultiplesChart`: TwSmallMultiplesChart is a Blazor small multiples chart: one small panel per series on a shared scale, for comparing many series clearly.
- [Strip Plot](https://twblazor.com/chart/strip-plot.md) `TwStripPlotChart`: TwStripPlotChart is a Blazor strip plot that draws every observation as a dot, one strip per group. Add jitter to separate overlaps.
- [Treemap](https://twblazor.com/chart/treemap.md) `TwTreemapChart`: TwTreemapChart is a Blazor treemap: rectangles that tile the plot, each sized by its value, showing many parts of a whole compactly.
- [Waffle](https://twblazor.com/chart/waffle.md) `TwWaffleChart`: TwWaffleChart is a Blazor waffle chart: a ten by ten grid of squares, each worth one percent, colored by each value's share.
- [Waterfall](https://twblazor.com/chart/waterfall.md) `TwWaterfallChart`: TwWaterfallChart is a Blazor waterfall chart: floating columns that show how increases and decreases build up to a total.
- [Arc Diagram](https://twblazor.com/chart/arc-diagram.md) `TwArcDiagramChart`: TwArcDiagramChart is a Blazor arc diagram: nodes set out along a line and joined by an arc for every link.
- [Barcode](https://twblazor.com/chart/barcode.md) `TwBarcodeChart`: TwBarcodeChart is a Blazor barcode chart that draws a thin line for every raw observation along one axis, so clusters and gaps stand out.
- [Beeswarm](https://twblazor.com/chart/beeswarm.md) `TwBeeswarmChart`: TwBeeswarmChart is a Blazor beeswarm chart that draws every observation as a dot, nudged sideways so none overlap.
- [Bump Area](https://twblazor.com/chart/bump-area.md) `TwBumpAreaChart`: TwBumpAreaChart is a Blazor bump area chart: a band per series that is as thick as its value and moves as its rank changes.
- [Categorical Scatter](https://twblazor.com/chart/categorical-scatter.md) `TwCategoricalScatterChart`: TwCategoricalScatterChart is a Blazor chart that places a dot where two categories meet and sizes it by a value.
- [Chord Diagram](https://twblazor.com/chart/chord-diagram.md) `TwChordDiagramChart`: TwChordDiagramChart is a Blazor chord diagram: nodes as arcs around a circle joined by ribbons as thick as the flow between them.
- [Circular Treemap](https://twblazor.com/chart/circular-treemap.md) `TwCircularTreemapChart`: TwCircularTreemapChart is a Blazor circle packing chart: a circle per leaf of a tree, sized by value and packed inside its parent's circle.
- [Contour](https://twblazor.com/chart/contour.md) `TwContourChart`: TwContourChart is a Blazor contour plot that joins the places where a measured surface has the same value, like height lines on a map.
- [Convex Treemap](https://twblazor.com/chart/convex-treemap.md) `TwConvexTreemapChart`: TwConvexTreemapChart is a Blazor treemap for trees: cut-cornered tiles sized by value and grouped with the other leaves of their parent.
- [Density Plot](https://twblazor.com/chart/density-plot.md) `TwDensityPlotChart`: TwDensityPlotChart is a Blazor density plot that draws a smooth curve per group showing where its raw values concentrate.
- [Dendrogram](https://twblazor.com/chart/dendrogram.md) `TwDendrogramChart`: TwDendrogramChart is a Blazor dendrogram: a tree drawn from its root down to its leaves with a bracket joining every branch to its parent.
- [Euler Diagram](https://twblazor.com/chart/euler-diagram.md) `TwEulerDiagramChart`: TwEulerDiagramChart is a Blazor Euler diagram: sets as circles sized by their members, overlapping only where they share some.
- [Flowchart](https://twblazor.com/chart/flowchart.md) `TwFlowchart`: TwFlowchart is a Blazor flowchart: the steps of a process as boxes in columns, with an arrow for every link from one step to the next.
- [Hexagonal Binning](https://twblazor.com/chart/hexbin.md) `TwHexbinChart`: TwHexbinChart is a Blazor hexbin chart that tiles the plot with hexagons shaded by how many points fall in each, for scatter data too dense to read.
- [Horizon](https://twblazor.com/chart/horizon.md) `TwHorizonChart`: TwHorizonChart is a Blazor horizon chart that folds each series into a compact row of layered bands, fitting many series into little height.
- [Marimekko](https://twblazor.com/chart/marimekko.md) `TwMarimekkoChart`: TwMarimekkoChart is a Blazor Marimekko chart: columns whose widths show each category's total and whose segments show each series' share of it.
- [Network Diagram](https://twblazor.com/chart/network-diagram.md) `TwNetworkDiagramChart`: TwNetworkDiagramChart is a Blazor network diagram that arranges linked nodes close together and unrelated ones apart.
- [Radial Histogram](https://twblazor.com/chart/radial-histogram.md) `TwRadialHistogramChart`: TwRadialHistogramChart is a Blazor radial histogram that wraps equal-width bins around a circle, for cyclical values such as hours or bearings.
- [Ridgeline](https://twblazor.com/chart/ridgeline.md) `TwRidgelinePlotChart`: TwRidgelinePlotChart is a Blazor ridgeline plot that gives each group its own row and density curve, for comparing many distributions.
- [Sankey](https://twblazor.com/chart/sankey.md) `TwSankeyChart`: TwSankeyChart is a Blazor Sankey diagram: nodes in columns joined by ribbons as thick as the flow between them.
- [Stream Graph](https://twblazor.com/chart/stream-graph.md) `TwStreamGraphChart`: TwStreamGraphChart is a Blazor stream graph: stacked layers that flow around a central line to show how the make-up of a total shifts over time.
- [Sunburst](https://twblazor.com/chart/sunburst.md) `TwSunburstChart`: TwSunburstChart is a Blazor sunburst chart: a tree drawn as rings, each segment sized by its share of the whole.
- [Venn Diagram](https://twblazor.com/chart/venn-diagram.md) `TwVennDiagramChart`: TwVennDiagramChart is a Blazor Venn diagram: up to three sets as equal overlapping circles, with the shared count where each pair meets.
- [Violin Plot](https://twblazor.com/chart/violin-plot.md) `TwViolinPlotChart`: TwViolinPlotChart is a Blazor violin plot that shows the full shape of each group's distribution with its median and middle half marked.
- [Word Cloud](https://twblazor.com/chart/word-cloud.md) `TwWordCloudChart`: TwWordCloudChart is a Blazor word cloud: words sized by their values and gathered around the middle of the plot.

## Services

- [Dialog Service](https://twblazor.com/dialog.md) `TwDialog`: TwDialog is a Blazor dialog service for modal windows. Open any component with ITwDialogService.ShowAsync, return data, and set position, size and behaviour.
- [Toast Service](https://twblazor.com/toast.md) `TwToastProvider`: TwToast is a Blazor toast notification service. Call ITwToastService.Show with a message, title, Color and icon, with duration, persistence and custom toasts.

## Optional

- [Everything in one file](https://twblazor.com/llms-full.txt): this file followed by every page below in full.
- [API reference](https://twblazor.github.io/twblazor/): generated API documentation for every public type.
- [NuGet package](https://www.nuget.org/packages/twblazor)
- [Source code](https://github.com/TwBlazor/twblazor)