M
Marai.UI
v1.0.0-alpha.7

Components

A production-ready collection of Blazor components. Token-styled components are beautiful by default — write <MButton Variant="Variant.Primary"> and get a polished, accessible button. Primitive components provide behavior, accessibility, and state management with full Tailwind class control.

Available Components

Accordion

Composable expandable/collapsible content sections for FAQs, settings groups, and disclosure-based layouts.

Avatar

User profile image with initials fallback, size variants, shape options, and status indicator support.

Badge

Compact inline labels for status, classification, or count display.

Breadcrumb

Accessible, composable breadcrumb navigation for representing hierarchical page locations.

Button

Primary, secondary, outline, ghost, destructive, and link button variants.

Carousel

Sliding content panels for testimonials, image galleries, and promotional banners with optional indicators and auto-advance.

Card

Composable container for grouping related content into panels, summaries, and forms.

Checkbox

Native checkbox with two-way binding support, disabled state, and form integration.

DataTable

Client-side data table with text search, pagination, and page size selection — no jQuery, no JS interop.

Date Picker

Single-value date, date+time, or time picker with a two-month calendar view, Min/Max constraints, and full Tailwind class control.

Dialog

Accessible modal overlay for confirmations, forms, and focused workflows.

Dropdown

Display a contextual action menu anchored to a trigger with keyboard navigation and outside-click dismissal.

Input

Collect text from users with support for binding, forms, and placeholder hints.

Label

Accessible form label with semantic HTML and support for associated input linking.

Navbar

A composable navigation header for branding, navigation links, and action areas.

Popover

A floating panel anchored to a trigger for contextual content, inline forms, and settings — closes on outside click or Escape.

RadioGroup

Mutually exclusive selection group with two-way binding, disabled state, and form integration.

Select

Native select for single-value choice from a list, with two-way binding, placeholder, and disabled state.

Separator

A visual divider for separating content horizontally or vertically.

Sidebar

Composable app-shell sidebar with header, content, and footer slots. Supports collapsed state and full styling overrides.

Slider

Native range input for single-value numeric selection with two-way binding, min/max/step, and disabled state.

Spinner

Animated loading indicator with size and color variants, accessible label support, and reduced-motion awareness.

Switch

Accessible boolean toggle for settings and preferences with two-way binding, label support, and disabled state.

Tabs

Composable tabbed navigation for switching between related content panels with full ARIA semantics and styling overrides.

Toast

Transient notification messages that appear briefly and dismiss automatically, backed by a lightweight ToastService.

Tooltip

Compact contextual hint that appears on hover or keyboard focus — no JS interop required.