# IzzyBlazor

> A Blazor component library for .NET 10 (80+ components), built for static server rendering first: most components work on static pages, many with JavaScript off, and become interactive where a page has a render mode. This describes 0.1.0-alpha.17.

Install with `dotnet add package IzzyBlazor --prerelease`, add `@using IzzyBlazor` to `_Imports.razor`, and follow the Blazor Web App article for the stylesheet, `IzzyTheme`, `AddIzzyBlazor()` and `MapIzzyBlazor()`. Component names and parameters are IzzyBlazor's own; look them up rather than guessing.

For assistants: the MCP server at https://izzyblazor.com/mcp (Streamable HTTP, no sign-in) searches these docs and returns any component's API and examples' source as Markdown. Every component's API is also in one JSON file: [API metadata](https://izzyblazor.com/izzyblazor.api.json).

## Get started

- [Blazor Web App](https://izzyblazor.com/docs/get-started/blazor-web-app): Install the package, add the stylesheet and IzzyTheme, register the services and map the endpoints.
- [WebAssembly or Auto](https://izzyblazor.com/docs/get-started/webassembly-and-auto): Use IzzyBlazor.Core in the .Client project; the server project keeps IzzyBlazor.
- [Add to an existing app](https://izzyblazor.com/docs/get-started/existing-app): Bring IzzyBlazor into an app that already has pages, a layout and Bootstrap.
- [AI assistants](https://izzyblazor.com/docs/get-started/ai-assistants): Connect Claude, Copilot or Cursor to IzzyBlazor's MCP server for components, parameters and examples.

## Theming

- [Themes and presets](https://izzyblazor.com/docs/theming/themes): A preset, your brand color, grays, radius, density and fonts, set once in IzzyTheme.
- [Light and dark](https://izzyblazor.com/docs/theming/color-scheme): The default scheme, a switch for readers, and a scheme for part of a page.
- [Tokens and customizing](https://izzyblazor.com/docs/theming/tokens): CSS variables for exact values, the surface ladder, and theming part of a page.

## Common features

- [Style props](https://izzyblazor.com/docs/common/style-props): Spacing, sizes, borders and colors as parameters, and which components take which.
- [Responsive values](https://izzyblazor.com/docs/common/responsive): One value per breakpoint, hiding by screen size, and fluid text.
- [Render modes](https://izzyblazor.com/docs/common/render-modes): What components do on static pages, with IzzyBlazor's script, and on interactive pages.
- [Forms and validation](https://izzyblazor.com/docs/common/forms): Forms that post on static pages, rules from your model, columns, read-only forms and errors.
- [Text and other languages](https://izzyblazor.com/docs/common/text): The words components use, changed app-wide or per component, in one language or several.
- [Accessibility](https://izzyblazor.com/docs/common/accessibility): What the components do for keyboard and screen reader users, and what's left to your app.

## Troubleshooting

- [An empty selection comes back with its defaults](https://izzyblazor.com/docs/troubleshooting/empty-selection): Unchecked boxes post nothing, so after a static post the model gets its defaults back, or null.
- [A form's post fails or arrives empty](https://izzyblazor.com/docs/troubleshooting/form-name): A static post finds its form and model by name: FormName on the form, the same name on the model.
- [OnClick does nothing on a static page](https://izzyblazor.com/docs/troubleshooting/onclick): A static page has no connection to run C# on a click: post a form or follow a link instead.
- [A value resets on the next request](https://izzyblazor.com/docs/troubleshooting/state-between-requests): A static page is built afresh for every request: keep what it needs in the address, or post it.
- [The password is empty after a failed post](https://izzyblazor.com/docs/troubleshooting/password-after-post): A static page doesn't write a password back into its HTML, so the reader types it again.
- [Code runs after NavigateTo, or the post doesn't redirect](https://izzyblazor.com/docs/troubleshooting/redirect-after-post): NavigateTo doesn't always stop your code: make it the last line or return after it, and keep it out of try/catch.
- [A form posts to [object RadioNodeList]](https://izzyblazor.com/docs/troubleshooting/control-named-action): A control named action, method or enctype hides the form's own property from Blazor's script.
- [Interactive parts stop responding in production](https://izzyblazor.com/docs/troubleshooting/interactive-stops-responding): An interactive page's circuit lives on one server: behind a load balancer, turn on sticky sessions, or run one server.

## Components: Layout

- [Box](https://izzyblazor.com/docs/components/box): A plain block that takes every style prop. [API](https://izzyblazor.com/docs/components/box/api)
- [Row](https://izzyblazor.com/docs/components/row): Lays its children out in a row, always. [API](https://izzyblazor.com/docs/components/row/api)
- [Column](https://izzyblazor.com/docs/components/column): Lays its children out in a column, always. [API](https://izzyblazor.com/docs/components/column/api)
- [Stack](https://izzyblazor.com/docs/components/stack): A row or a column, changing with the screen width. [API](https://izzyblazor.com/docs/components/stack/api)
- [Grid](https://izzyblazor.com/docs/components/grid): Columns by breakpoint, by minimum width, or by template. [API](https://izzyblazor.com/docs/components/grid/api)
- [Container](https://izzyblazor.com/docs/components/container): Centers content at a readable width. [API](https://izzyblazor.com/docs/components/container/api)
- [Section](https://izzyblazor.com/docs/components/section): A full-width band of a page, such as a hero. [API](https://izzyblazor.com/docs/components/section/api)
- [Center](https://izzyblazor.com/docs/components/center): Centers its content both ways. [API](https://izzyblazor.com/docs/components/center/api)
- [Spacer](https://izzyblazor.com/docs/components/spacer): Pushes the rest of a row to the end. [API](https://izzyblazor.com/docs/components/spacer/api)
- [AspectRatio](https://izzyblazor.com/docs/components/aspect-ratio): Keeps media at a shape, 16:9 by default. [API](https://izzyblazor.com/docs/components/aspect-ratio/api)
- [Divider](https://izzyblazor.com/docs/components/divider): A line: plain, dashed, labeled or vertical. [API](https://izzyblazor.com/docs/components/divider/api)

## Components: App shell

- [AppShell](https://izzyblazor.com/docs/components/app-shell): Header, sidebar, main area, aside and footer, arranged by CSS. [API](https://izzyblazor.com/docs/components/app-shell/api)
- [AppSidebar](https://izzyblazor.com/docs/components/app-sidebar): A sidebar that becomes a drawer or panel on small screens. [API](https://izzyblazor.com/docs/components/app-sidebar/api)
- [SiteNav](https://izzyblazor.com/docs/components/site-nav): Header links that fold into a menu on phones. [API](https://izzyblazor.com/docs/components/site-nav/api)
- [IzzyTheme](https://izzyblazor.com/docs/components/izzy-theme): The preset, brand color, fonts and scheme, set on the server. [API](https://izzyblazor.com/docs/components/izzy-theme/api)
- [ColorSchemeSwitch](https://izzyblazor.com/docs/components/color-scheme-switch): Lets people pick System, Light or Dark. [API](https://izzyblazor.com/docs/components/color-scheme-switch/api)

## Components: Typography

- [Heading](https://izzyblazor.com/docs/components/heading): Headings 1 to 6, with fluid sizes and section links. [API](https://izzyblazor.com/docs/components/heading/api)
- [TextBlock](https://izzyblazor.com/docs/components/text-block): Body text with every text style. [API](https://izzyblazor.com/docs/components/text-block/api)
- [List](https://izzyblazor.com/docs/components/list): Bulleted, numbered, plain or icon lists. [API](https://izzyblazor.com/docs/components/list/api)
- [Prose](https://izzyblazor.com/docs/components/prose): Styles plain HTML, such as rendered Markdown. [API](https://izzyblazor.com/docs/components/prose/api)
- [Anchor](https://izzyblazor.com/docs/components/anchor): A text link, internal or external. [API](https://izzyblazor.com/docs/components/anchor/api)
- [Code](https://izzyblazor.com/docs/components/code): Inline code or a block, highlighted on the server. [API](https://izzyblazor.com/docs/components/code/api)
- [CodeExample](https://izzyblazor.com/docs/components/code-example): A live example with its source under it. [API](https://izzyblazor.com/docs/components/code-example/api)
- [Kbd](https://izzyblazor.com/docs/components/kbd): A key or a key combination. [API](https://izzyblazor.com/docs/components/kbd/api)
- [Highlight](https://izzyblazor.com/docs/components/highlight): Text with the words of a search marked. [API](https://izzyblazor.com/docs/components/highlight/api)
- [Icon](https://izzyblazor.com/docs/components/icon): Inline SVG icons from Lucide, rendered on the server. [API](https://izzyblazor.com/docs/components/icon/api)

## Components: Actions

- [Button](https://izzyblazor.com/docs/components/button): Submits, resets, links or runs C#. [API](https://izzyblazor.com/docs/components/button/api)
- [IconButton](https://izzyblazor.com/docs/components/icon-button): A square button with a required label. [API](https://izzyblazor.com/docs/components/icon-button/api)
- [ButtonGroup](https://izzyblazor.com/docs/components/button-group): Joined or spaced buttons with shared defaults. [API](https://izzyblazor.com/docs/components/button-group/api)
- [Toolbar](https://izzyblazor.com/docs/components/toolbar): One row of controls; what doesn't fit moves into a … menu. [API](https://izzyblazor.com/docs/components/toolbar/api)
- [ConfirmButton](https://izzyblazor.com/docs/components/confirm-button): Asks in an alert dialog before acting. [API](https://izzyblazor.com/docs/components/confirm-button/api)
- [CopyButton](https://izzyblazor.com/docs/components/copy-button): Copies text, such as an install command. [API](https://izzyblazor.com/docs/components/copy-button/api)

## Components: Forms

- [Form](https://izzyblazor.com/docs/components/form): Posts on static pages, validates live on interactive ones. [API](https://izzyblazor.com/docs/components/form/api)
- [Fieldset](https://izzyblazor.com/docs/components/fieldset): Groups related fields under a legend. [API](https://izzyblazor.com/docs/components/fieldset/api)
- [TextField](https://izzyblazor.com/docs/components/text-field): A labeled text input with add-ons and a password reveal. [API](https://izzyblazor.com/docs/components/text-field/api)
- [TextArea](https://izzyblazor.com/docs/components/text-area): Multi-line text that can grow and count. [API](https://izzyblazor.com/docs/components/text-area/api)
- [NumberField](https://izzyblazor.com/docs/components/number-field): A number input with stepper buttons. [API](https://izzyblazor.com/docs/components/number-field/api)
- [Slider](https://izzyblazor.com/docs/components/slider): A range input bound to a number. [API](https://izzyblazor.com/docs/components/slider/api)
- [ColorPicker](https://izzyblazor.com/docs/components/color-picker): A color field with a hex box and presets. [API](https://izzyblazor.com/docs/components/color-picker/api)
- [FileUpload](https://izzyblazor.com/docs/components/file-upload): A drop zone around a real file input. [API](https://izzyblazor.com/docs/components/file-upload/api)
- [FieldFrame](https://izzyblazor.com/docs/components/field-frame): The label, hint and errors around a control of your own. [API](https://izzyblazor.com/docs/components/field-frame/api)
- [FilterForm](https://izzyblazor.com/docs/components/filter-form): Search and filters kept in the URL. [API](https://izzyblazor.com/docs/components/filter-form/api)

## Components: Selection

- [Select](https://izzyblazor.com/docs/components/select): A native select, themed where the browser allows. [API](https://izzyblazor.com/docs/components/select/api)
- [Combobox](https://izzyblazor.com/docs/components/combobox): Type to filter; server search on interactive pages. [API](https://izzyblazor.com/docs/components/combobox/api)
- [MultiSelect](https://izzyblazor.com/docs/components/multi-select): Several choices as chips you can type to filter. [API](https://izzyblazor.com/docs/components/multi-select/api)
- [Checkbox](https://izzyblazor.com/docs/components/checkbox): A checkbox drawn to match the fields. [API](https://izzyblazor.com/docs/components/checkbox/api)
- [Switch](https://izzyblazor.com/docs/components/switch): An on/off switch that posts like a checkbox. [API](https://izzyblazor.com/docs/components/switch/api)
- [RadioGroup](https://izzyblazor.com/docs/components/radio-group): One choice from a list of radios. [API](https://izzyblazor.com/docs/components/radio-group/api)
- [CheckboxGroup](https://izzyblazor.com/docs/components/checkbox-group): Several choices as checkboxes. [API](https://izzyblazor.com/docs/components/checkbox-group/api)
- [SegmentedControl](https://izzyblazor.com/docs/components/segmented-control): One choice from a few, as joined buttons. [API](https://izzyblazor.com/docs/components/segmented-control/api)

## Components: Overlays

- [Dialog](https://izzyblazor.com/docs/components/dialog): A native modal dialog, opened by a trigger, a link or C#. [API](https://izzyblazor.com/docs/components/dialog/api)
- [Drawer](https://izzyblazor.com/docs/components/drawer): A dialog that slides in from an edge. [API](https://izzyblazor.com/docs/components/drawer/api)
- [Menu](https://izzyblazor.com/docs/components/menu): Links, form posts and actions in a popover menu. [API](https://izzyblazor.com/docs/components/menu/api)
- [Popover](https://izzyblazor.com/docs/components/popover): Non-modal content beside a trigger. [API](https://izzyblazor.com/docs/components/popover/api)
- [Tooltip](https://izzyblazor.com/docs/components/tooltip): Text on hover and keyboard focus. [API](https://izzyblazor.com/docs/components/tooltip/api)

## Components: Navigation

- [NavMenu](https://izzyblazor.com/docs/components/nav-menu): A list of links that marks the current page. [API](https://izzyblazor.com/docs/components/nav-menu/api)
- [Tabs](https://izzyblazor.com/docs/components/tabs): Panels that switch with no script, or links to pages. [API](https://izzyblazor.com/docs/components/tabs/api)
- [Breadcrumb](https://izzyblazor.com/docs/components/breadcrumb): The path to the current page. [API](https://izzyblazor.com/docs/components/breadcrumb/api)
- [Pagination](https://izzyblazor.com/docs/components/pagination): Page links that keep the rest of the URL. [API](https://izzyblazor.com/docs/components/pagination/api)
- [PrevNext](https://izzyblazor.com/docs/components/prev-next): Links to the pages before and after. [API](https://izzyblazor.com/docs/components/prev-next/api)
- [OnThisPage](https://izzyblazor.com/docs/components/on-this-page): The page's sections, listed on the server. [API](https://izzyblazor.com/docs/components/on-this-page/api)
- [Stepper](https://izzyblazor.com/docs/components/stepper): Where someone is in a process. [API](https://izzyblazor.com/docs/components/stepper/api)

## Components: Feedback

- [Alert](https://izzyblazor.com/docs/components/alert): A status message about part of a page. [API](https://izzyblazor.com/docs/components/alert/api)
- [Banner](https://izzyblazor.com/docs/components/banner): A full-width message about the whole app. [API](https://izzyblazor.com/docs/components/banner/api)
- [ToastRegion](https://izzyblazor.com/docs/components/toast-region): Toasts from any render mode, even across a redirect. [API](https://izzyblazor.com/docs/components/toast-region/api)
- [Badge](https://izzyblazor.com/docs/components/badge): A small label for a status, category or count. [API](https://izzyblazor.com/docs/components/badge/api)
- [Tag](https://izzyblazor.com/docs/components/tag): A keyword or filter, linked or removable. [API](https://izzyblazor.com/docs/components/tag/api)
- [Spinner](https://izzyblazor.com/docs/components/spinner): A loading ring sized like an icon. [API](https://izzyblazor.com/docs/components/spinner/api)
- [Progress](https://izzyblazor.com/docs/components/progress): A progress bar, determinate or not. [API](https://izzyblazor.com/docs/components/progress/api)
- [Skeleton](https://izzyblazor.com/docs/components/skeleton): Stands in for content still loading. [API](https://izzyblazor.com/docs/components/skeleton/api)
- [EmptyState](https://izzyblazor.com/docs/components/empty-state): What to show when there's nothing yet. [API](https://izzyblazor.com/docs/components/empty-state/api)

## Components: Data display

- [Table](https://izzyblazor.com/docs/components/table): Sort, filter, page and select, with state in the URL. [API](https://izzyblazor.com/docs/components/table/api)
- [Card](https://izzyblazor.com/docs/components/card): Media, header, body sections, actions and footer. [API](https://izzyblazor.com/docs/components/card/api)
- [Stat](https://izzyblazor.com/docs/components/stat): A figure with a trend read as words. [API](https://izzyblazor.com/docs/components/stat/api)
- [DescriptionList](https://izzyblazor.com/docs/components/description-list): Terms and their details. [API](https://izzyblazor.com/docs/components/description-list/api)
- [Avatar](https://izzyblazor.com/docs/components/avatar): A photo, initials or an icon. [API](https://izzyblazor.com/docs/components/avatar/api)
- [AvatarGroup](https://izzyblazor.com/docs/components/avatar-group): Overlapping avatars with a count of the rest. [API](https://izzyblazor.com/docs/components/avatar-group/api)
- [Image](https://izzyblazor.com/docs/components/image): A lazy image that keeps its space. [API](https://izzyblazor.com/docs/components/image/api)
- [VideoEmbed](https://izzyblazor.com/docs/components/video-embed): A YouTube video that loads on play. [API](https://izzyblazor.com/docs/components/video-embed/api)
- [Timeline](https://izzyblazor.com/docs/components/timeline): Events on a rail, such as an order's history. [API](https://izzyblazor.com/docs/components/timeline/api)
- [Accordion](https://izzyblazor.com/docs/components/accordion): Sections that open and close with no script. [API](https://izzyblazor.com/docs/components/accordion/api)
- [Collapsible](https://izzyblazor.com/docs/components/collapsible): One "show more" section. [API](https://izzyblazor.com/docs/components/collapsible/api)

## Optional

- [Demos](https://izzyblazor.com/demos): whole pages built with the components.