Introduction
RayCraft is a library of Blazor controls (.NET 10: Server, WebAssembly and Auto) with light, dark and compact themes, English and Bulgarian texts, and keyboard and screen reader support. RayCraft Free is available from 7 November 2026; RayCraft Complete is coming soon.
Installation
RayCraft.Blazor is published on NuGet on 7 November 2026. From that day, add it with:
dotnet add package RayCraft.BlazorSee Get started for the setup steps. Working examples are in the public GitHub repository, which holds example and demo code only, not the library code.
Controls
Buttons
Button
Triggers an action, or navigates when Href is set (the button then renders as a link with the same look).
IconButton
Button that shows only an icon. Label is required: it becomes the accessible name and the tooltip.
ButtonGroup
Joins buttons into one segmented control, horizontally or vertically. Combine it with ToggleButton for a view switcher.
ToggleButton
Button that keeps an on/off state and exposes it with aria-pressed.
SplitButton
A main action with a menu of related actions. The same MenuItem elements as Menu are used.
FloatingActionButton
A square button fixed to a corner of the screen for the main action. Extended shows the text next to the icon; the text is always the accessible name.
SpeedDial
A floating button that opens a short list of actions. Escape closes the list; each action is a real button in the tab order.
ProgressButton
A button that shows work in progress: a spinner while Progress is not set, a bar along the bottom edge and a spoken percentage when it is.
CopyButton
Copies a text to the clipboard and confirms it with a check mark. Needs a secure context (https or localhost).
Text And Numbers
TextField
Single-line text input. Works with EditForm and DataAnnotations; the error message appears below the field.
NumericField
Number input for any numeric type (int, decimal, double, nullable versions). Values outside Min and Max are clamped, and the buttons step by Step.
PercentField
Number field that the user types as a percentage (12.5) while the value is stored as a fraction (0.125).
MoneyField
Amount field for decimal and decimal? values. The text is formatted and parsed with the current culture (both 1,234.50 and 1.234,50 are understood), rounded to Decimals and kept inside Min and Max.
MaskedInput
Text field that formats what you type by a mask: 0 is a digit, a is a letter, * is a letter or digit, any other character is a fixed separator (escape a mask character with a backslash).
OtpInput
One box per character for verification codes. Typing moves to the next box, Backspace to the previous one, and a pasted code fills all boxes.
SearchBox
Search field with an icon and a clear button. OnSearch runs on Enter, on the clear button and (optionally) on every keystroke; Escape clears the text.
PasswordStrength
Shows how strong a password is with four bars, a word and a list of the rules it meets.
InPlaceEditor
Shows a value as text; a click turns it into a field with save and cancel buttons.
List Selection
Select
Drop-down for choosing one item. TValue can be any type, including your own records.
DropDownList
A combobox for very long lists. Only the options in view are drawn, so 100,000 entries open at once; typing narrows the list.
MultiSelect
Dropdown with check boxes for choosing several items. The trigger summarizes the selection; Select all and Clear are built in.
ListBox
Always-visible list for one choice (radio buttons underneath) or several (check boxes).
Autocomplete
Text field that filters a list while you type. Supports the arrow keys, Enter and Escape and follows the ARIA combobox pattern.
MultiColumnComboBox
An Autocomplete whose list shows several columns with a header row. Typing searches all columns.
Cascader
Pick one value from a hierarchy: a column of choices opens a column of sub choices.
DropDownTree
A drop-down field that opens a tree to choose one node. It is built from TreeView and Popover and keeps their keyboard behavior.
TagInput
Free-form list of tags. Enter or a comma adds the typed text, Backspace in an empty field removes the last tag, and each tag has a remove button.
Mention
A text box that suggests names after a trigger character (@ by default). Arrow keys and Enter choose; the chosen name is inserted with the trigger.
Sliders And Rating
Slider
Drag to choose a number in a range.
RangeSlider
Slider with two thumbs for choosing a lower and an upper value. Both thumbs are native range inputs, so the arrow keys work.
RangeSelector
A strip with two handles that selects an interval of a series; a small preview of the data sits behind the handles.
Rating
Star rating. Click the current star again to clear it.
RatingDisplay
Read-only stars with fractions (4.5 shows four and a half), an optional number and a review count.
Color And File
ColorPicker
Color field with the native color chooser, a hex text box and optional preset swatches.
ColorPalette
A grid of color swatches that works as a radio group: one tab stop, the arrow keys, Home and End move and choose.
ColorButton
A toolbar button for a color: an icon with a bar of the chosen color under it. Clicking it opens the color chooser of the browser.
FileUpload
Drop zone and file picker. It checks size, type and count, lists the accepted files and raises FilesChanged; reading the content is up to you (IBrowserFile.OpenReadStream).
SignaturePad
Canvas for drawing a signature with a mouse, finger or pen. The value is a PNG as a data URL.
Editors
MarkdownEditor
Text area with a formatting toolbar and a live preview, for people who write Markdown instead of rich text.
AddressField
A recipient field for e-mail: every address becomes a chip. Type or paste a list, pick from suggestions that come from your data source, double-click a chip to edit it, and see at once which addresses are not valid.
Choice
Checkbox
Boolean input with a label.
CheckboxGroup
A group of check boxes for choosing several items from a list, inside a fieldset with a legend so screen readers announce the group name.
Radio
RadioGroup
One choice from a short list. Use Items for simple lists or Radio children for custom labels.
Switch
Boolean toggle, announced to assistive technology as a switch.
Chip
Compact label, optionally removable.
ChipSet
Chips that can be selected, for filters and tags. One choice by default, several with Multiple.
ToggleGroup
Segmented control for one choice (radio group) or several (toggle buttons). Use it for view switchers and formatting toggles.
TransferList
Two lists with buttons for moving items between them, for choosing a subset from a long list.
Date Time
Calendar
Month grid used by DatePicker and DateTimeRangePicker. Use it on its own for inline date selection.
DatePicker
Date field with a calendar. Month names, weekday names, the first day of the week and the date format (also used as the default placeholder) follow the current RayCraft language.
DateTimePicker
One field for date and time: a DatePicker and a TimePicker side by side that together bind a DateTime.
DateTimeRangePicker
Period with start and end, picked on one calendar that shows two months side by side (Months) (first click sets the start, second sets the end) and typed or adjusted per field.
MonthPicker
Chooses a month and year. The value is the first day of the month.
YearPicker
Chooses a year from a grid of twelve years with buttons for earlier and later pages.
WeekPicker
Chooses a whole week. The value is the first day of the week of the current language; the field shows the ISO week number and the dates.
TimeField
The bare time text box that TimePicker, TimeRangePicker and DateTimeRangePicker are built on.
TimePicker
Time field written in the format of the current RayCraft language (9:30 AM in English, 9:30 in Bulgarian), so it looks the same in every browser.
TimeRangePicker
Start and end time in one field, each written in the format of the current language like TimePicker.
TimeSpanPicker
Enters a duration as days, hours, minutes and seconds. The value is a TimeSpan.
EventCalendar
Month view with events. Events spanning several days appear on each day; a day shows up to MaxEventsPerDay and a +n more link.
Forms
ErrorSummary
Lists every validation message of the surrounding EditForm in one block. Place it inside an EditForm with a validator.
FormLayout
Arranges labels and fields in a responsive twelve-column grid, with titled sections.
FormState
Locks every RayCraft field inside it with one parameter: Disabled blocks them completely, ReadOnly shows the values without allowing changes.
LoginForm
Ready-made sign-in form with localized validation. It raises OnSubmit with the entered LoginModel and leaves the actual sign-in to you.
RegisterForm
Ready-made registration form: name, email, password and confirmation, with localized validation.
Captcha
Simple human check with a small arithmetic question. It keeps out basic bots only; verify real protection on the server (for example with a service built for that).
FormBuilder
Builds a form from field definitions: text, email, password, number, date, text area, select, radio, check box and switch.
Layout
Container
Centers content and limits its width. The default width follows the breakpoints (540, 720, 960, 1140 and 1320 px).
Stack
Lays children out in a row or column with a consistent gap.
Grid
12-column grid. Span sets the width of an item on every screen, and Sm, Md, Lg, Xl and Xxl change it from that breakpoint up (the same breakpoints as the Breakpoints page).
GridItem
Spacer
Empty element that grows to fill the free space in a flex row, pushing the items after it to the end.
Divider
Thin line separating content, horizontal or vertical.
Card
Container with optional header and footer.
Panel
Titled section with an optional collapse button and header actions.
Fieldset
Groups related form controls under a legend. Disabled turns off every control inside it.
Toolbar
Row of tool buttons with role=toolbar.
Splitter
Two resizable panes. Drag the bar with the mouse or touch, or focus it and use the arrow keys (Shift for bigger steps, Home and End for the limits).
Accordion
Expandable sections. By default opening one closes the others; set Multiple to allow several.
Collapse
Shows or hides its content. Bind Expanded to any button; KeepMounted keeps the content in the page while hidden.
TagCloud
Words in sizes that follow their weight. Tags can be links, buttons that select, or plain text.
TitleIndex
A list grouped by first letter with a letter bar on top. A letter moves the focus (and the view) to its section; letters without items are disabled.
Navigation
AppBar
Top bar for the title and primary actions. Put links in NavContent and they sit in the bar on wide screens and fold behind a menu button below 768px.
Drawer
Side panel. Temporary drawers float over the page with a backdrop, close with Escape and move focus into the panel; set Temporary=false for a permanent sidebar.
NavMenu
Vertical navigation with active-page highlighting (built on NavLink) and collapsible groups.
NavItem
NavGroup
Tabs
Switches between panels. Supports the arrow keys, Home and End.
Stepper
Guides the user through a sequence of steps with Back and Next buttons.
Wizard
A guided flow in steps. Each step can validate before the user moves on, a step can be optional, finished steps can be reopened, and the result can show a page of its own.
Breadcrumbs
Shows the path to the current page. The last item is the current page.
Menu
Button that opens a list of actions. Closes on selection, Escape or a click outside.
MenuItem
ContextMenu
Menu opened with the right mouse button or the context menu key over its content.
MenuBar
A horizontal menu bar for applications: top-level menus with commands, shortcuts, check marks, icons and submenus.
CommandContextMenu
A context menu built from MenuCommand data, with submenus, check marks, shortcuts and the same keyboard handling as MenuBar.
TextContextMenu
The right-click menu of an editable text element: undo, redo, cut, copy, paste and select all, plus commands you add.
ProfileMenu
Avatar, name and a menu for the signed-in user, built from the same MenuItem elements as Menu.
Pagination
Page selector with ellipsis for long ranges.
TreeView
Hierarchical list following the ARIA tree pattern. Arrow keys move and expand, Home and End jump, Enter or Space selects.
ScrollSpy
An in-page contents list that highlights the heading currently at the top of the screen.
Overlays
Dialog
Modal window. Focus moves into it and stays inside until it closes (Escape, the close button or a backdrop click); focus then returns to the previous element.
DialogHost
Popover
Floating panel opened by an activator. Closes with Escape or a click outside.
Tooltip
Short hint shown on hover and on keyboard focus. Pure CSS, so it also works before the page becomes interactive.
Overlay
Dims the page (or, with Absolute, its positioned parent) and can show content such as a spinner.
Lightbox
Tour
Step-by-step introduction that highlights page elements chosen by CSS selector. Steps without a matching element appear in the center.
ColorDialog
FontDialog
SnackbarHost
Feedback
Alert
Inline message colored by severity, with a matching icon. Set Dismissible to show a close button; use bind-Visible or OnDismiss to react when it is closed.
Badge
Small status label.
BusyOverlay
Wraps a region and, while Busy is true, dims it and shows a spinner on top. The cover blocks the mouse, marks the region with aria-busy and announces the label.
CookieConsent
A banner that asks which cookies are allowed. It remembers the answer in local storage, offers Accept all, Only necessary and a choice by category, and does not block the page.
EmptyState
Message for lists and pages without content, with an icon, an explanation and optional actions.
NotificationCenter
A bell button with a count of unread notifications and a panel that lists them. People can read, dismiss and clear them; the count is announced to screen readers.
ProgressBar
Shows progress from 0 to Max. Without a Value it is indeterminate.
ProgressCircular
Ring that shows a determinate progress value. For unknown durations use Spinner.
ResultPage
A full page message for an outcome: success, error, information, warning, page not found, no access and server error, with an icon, a title, a text and buttons.
Skeleton
Placeholder shown while content loads.
SkeletonPreset
Ready-made loading placeholders: card, list, table, profile and paragraph. They announce a busy state to screen readers.
Spinner
Indeterminate loading indicator with a localized accessible name.
Content
Typography
Headings, body text, captions and overlines with the theme font and sizes. Headings render real h1 to h6 elements.
Icon
A library of common icons in one consistent style: 16 px grid, 1.5 px strokes, square ends.
Image
Image with required alternative text, fit modes, optional border and caption. Lazy loading is on by default.
ImageGallery
Grid of thumbnails that opens a full-screen viewer (Lightbox) with previous and next buttons, the arrow keys and Escape.
Avatar
Square user badge: image, initials computed from a name, or a default user icon.
AvatarGroup
Overlapping avatars for a team or the people on an item. More than Max people collapse into a +n avatar whose hint lists the names.
Link
Styled anchor. External links open in a new tab with rel="noopener noreferrer" and show an icon.
Statistic
Large number with a label, an optional trend and extra content such as a Sparkline.
Descriptions
Key and value pairs in a grid, for details of a record. The columns collapse to one on narrow screens.
Timeline
Vertical sequence of events with a marker, time and optional severity color.
Carousel
Slides with previous and next buttons and indicators. Autoplay is optional; it pauses on hover and focus and has a pause button, as WCAG requires.
Countdown
Counts down to a moment in time and raises OnFinished when it is reached.
Highlighter
Marks every occurrence of a search text inside a string, ignoring case unless CaseSensitive is set.
Marquee
Scrolling strip for short announcements. It pauses on hover and focus, has a pause button (WCAG 2.2.2) and stops completely when the system asks for reduced motion.
CodeBlock
Shows source code with light syntax coloring (C#, JavaScript, TypeScript, JSON, HTML, SCSS, SQL and shell), optional line numbers and a copy button.
Markdown
Shows Markdown text: headings, emphasis, links, images, lists (nested), quotes, code, tables and rules.
QrCode
Draws a QR code as plain SVG, with no image service or script. Text up to 2331 bytes (all 40 versions, error correction level M).
Barcode
Draws Code 128 (all printable ASCII, digits are packed in pairs), Code 39 (capitals, digits and - . $ / + % space), EAN-13, EAN-8 and UPC-A (the check digit is added, or verified when given) as plain SVG.
PricingTable
Plan cards with a price, a feature list and a button, with an optional switch between monthly and yearly billing.
CommentThread
Comments with replies, a box for a new comment and Reply and Delete commands. Text is shown as typed (line breaks kept, nothing is treated as HTML).
ActivityFeed
A list of what happened and who did it, newest first, grouped by day, with an icon or the initials of the actor and an optional detail line.
Light Data
Table
Simple styled HTML table for static data. Use DataGrid when you need sorting, filtering or paging.
List
Vertical list of items with icon, two text lines and a trailing action. Items become links or buttons when Href or OnClick is set.
Repeater
Shows a list of items with your own template. It adds what a plain loop lacks: a header, an empty state, a grid with a set number of columns and optional paging (PageSize).
VirtualList
A scrolling list that draws only the rows in view, for hundreds of thousands of items.
PropertyGrid
Edits the public properties of any object, grouped by Category and labeled with DisplayName.
Drag
Sortable
List that can be reordered by dragging, or with the move buttons for keyboard and touch use.
Preferences
ThemeToggle
Ready-made switches for the Light, Dark, Slate and Slate Dark themes (ThemeToggle goes through them one by one), the comfortable/compact density (DensityToggle) and the en-US/bg-BG language (LanguageToggle).
ThemeMenu
One drop-down for the theme and the density: Slate, Slate Dark, Desktop, Desktop Dark, Mist, Mist Dark, Dark and Light, each in the normal and the compact density.
DensityToggle
LanguageToggle
Utilities
BreakpointObserver
Tells your code which named breakpoint (Xs to Xxl) the window is in and re-renders when it changes.
Fullscreen
Adds a button that shows its content full screen. It uses the Fullscreen API and a full-window layer on browsers without it (some phones).
Hotkey
Invisible component that runs a callback for a keyboard shortcut such as alt+k or mod+shift+l (mod is Ctrl on Windows and Cmd on macOS).
InfiniteScroll
Loads more content when the end of a list comes into view. It uses IntersectionObserver (with a scroll fallback) and raises OnLoadMore; set Loading while you fetch and HasMore to false at the end.
ScrollToTop
Floating button that appears after scrolling down and returns to the top of the page.
AI assistants
RayCraft has no AI features of its own. The documentation is built so that AI coding assistants can use it well:
- Descriptive control names, for example DatePicker, Autocomplete and Dialog.
- One page per control with a plain-language summary and, for most controls, a short example.
- A plain-text index of every control at llms.txt.
- Structured data (JSON-LD) and a description on every page.
Check generated code against the control page: an assistant can still make mistakes.