UI Components

Arcadia Controls includes 46 production-ready UI components built with pure Blazor and CSS. Every component supports Server, WebAssembly, and Auto render modes, with WCAG 2.1 AA accessibility.

Layout & Containers

ComponentDescription
ArcadiaAccordionExpandable/collapsible content sections
ArcadiaAccordionItemIndividual section within an accordion
ArcadiaAspectRatioConstrain child content to a fixed aspect ratio
ArcadiaCardSurface container with header, body, and footer slots
ArcadiaDialogModal dialog with backdrop, focus trap, and close actions
ArcadiaDrawerSlide-out side panel (left, right, top, bottom)
ArcadiaSeparatorHorizontal or vertical divider line
ArcadiaSidebarCollapsible navigation sidebar
ArcadiaScrollAreaCustom scrollbar container with overflow control
ComponentDescription
ArcadiaBreadcrumbBreadcrumb navigation trail
ArcadiaBreadcrumbItemIndividual breadcrumb link
ArcadiaMenuDropdown or context menu container
ArcadiaMenuItemIndividual menu item with icon, label, and shortcut
ArcadiaContextMenuRight-click context menu
ArcadiaPaginationPage navigation with page numbers and prev/next
ArcadiaStepperMulti-step workflow indicator
ArcadiaStepIndividual step in a stepper
ArcadiaTabsTab container for switching between views
ArcadiaTabPanelIndividual tab content panel

Data Display

ComponentDescription
ArcadiaAvatarUser avatar with image, initials, or icon fallback
ArcadiaBadgeSmall count or status indicator
ArcadiaChipCompact label with optional remove action
ArcadiaTimelineVertical timeline of events
ArcadiaTimelineItemIndividual event in a timeline
ArcadiaTreeViewHierarchical tree with expand/collapse
ArcadiaTreeViewNodeIndividual node in a tree view
ArcadiaCarouselImage/content carousel with slide transitions
ArcadiaCarouselSlideIndividual slide in a carousel
ArcadiaEmptyStatePlaceholder for empty or zero-result views

Forms & Input

ComponentDescription
ArcadiaColorPickerColor selection with palette and custom input
ArcadiaDatePickerCalendar date picker with range support
ArcadiaRatingStar or icon-based rating input
ArcadiaSliderRange slider with single or dual thumbs
ArcadiaSwitchToggle switch for boolean values
ArcadiaTagInputMulti-value tag/chip input with autocomplete
ArcadiaTextAreaMulti-line text input

Feedback & Status

ComponentDescription
ArcadiaAlertInline alert/banner with severity levels
ArcadiaCircularProgressCircular progress/loading indicator
ArcadiaProgressLinear progress bar
ArcadiaSkeletonContent loading placeholder
ArcadiaSpinnerIndeterminate loading spinner
ArcadiaTooltipHover/focus tooltip with positioning
ArcadiaHoverCardRich content card shown on hover
ArcadiaPopoverAnchored floating content panel

Command & Action

ComponentDescription
ArcadiaCommandPaletteKeyboard-driven command search (Ctrl+K style)
ArcadiaCommandItemIndividual command entry in the palette

Installation

All UI components are included in the Arcadia.UI NuGet package:

dotnet add package Arcadia.UI

Accessibility

Every component follows WCAG 2.1 AA guidelines:

  • Proper ARIA roles and labels
  • Keyboard navigation support
  • Focus management and visible focus indicators
  • Respects prefers-reduced-motion
  • High contrast mode support