Components
Beautiful, accessible components built with Tailwind CSS. Ready to drop into your Blazor application with pre-styled defaults inspired by shadcn/ui.
What are Components?
Components are pre-styled, production-ready UI elements built on top of our primitives. They provide beautiful defaults while remaining fully customizable through Tailwind CSS classes.
Pre-Styled Defaults
Beautiful shadcn/ui-inspired design out of the box with dark mode support
Fully Customizable
Override styles with Tailwind classes or build your own variants
Production Ready
Accessible, tested, and ready to use in real applications
Available Components
Click on any component to view demos, examples, API documentation, and usage guides.
Inputs & Forms
Checkbox
Binary selection control with indeterminate state
Field
Combine labels, controls, and help text for accessible forms
Input
Text input fields with multiple types and sizes
Label
Accessible labels for form controls
Native Select
Styled native HTML select dropdown
Numeric Input
Number input with increment/decrement buttons and formatting
Radio Group
Mutually exclusive options with keyboard navigation
Rating
Star rating input with half-star precision and readonly mode
Select
Dropdown selection with groups and labels
Slider
Range input for numeric value selection
Switch
Toggle control for on/off states
Textarea
Multi-line text input with automatic content sizing
Toggle
Pressable toggle buttons with variants
Toggle Group
Single/multiple selection toggle groups
Advanced Inputs
Calendar
Date selection grid with month navigation
Color Picker
Color selection with hex, RGB, and HSL support
Combobox
Autocomplete input with searchable dropdown
Currency Input
Formatted currency input with locale support
Date Picker
Date selection with calendar in popover
Date Range Picker
Select date ranges with optional presets and two-calendar view
File Upload
File upload with drag-and-drop, validation, and previews
Filter Builder
A declarative, composable filter builder with LINQ expression support.
Input Group
Enhanced inputs with icons, buttons, and addons
Input OTP
One-time password input with individual character slots
Markdown Editor
Write/preview tabs editor with markdown syntax support
Masked Input
Text input with customizable format masks (phone, date, etc.)
Multi Select
Searchable multi-selection with tags and checkboxes
Range Slider
Dual-handle slider for selecting value ranges
Rich Text Editor
WYSIWYG editor with toolbar formatting and live preview
Time Picker
Time selection with hour and minute controls
Data Display
Aspect Ratio
Display content within a desired width/height ratio
Avatar
User profile images with fallback initials and icons
Badge
Labels for status, categories, and metadata
Card
Container for grouped content with header and footer
Data Grid
Advanced data grid with sorting, filtering, pagination, and state management
Data Table
Powerful tables with sorting, filtering, pagination, and selection
Empty
Empty state displays with icon, title, and actions
Item
Flexible list items with media, content, and actions
Kbd
Keyboard shortcut badges with semantic markup
Scroll Area
Custom scrollbars for styled scroll regions
Skeleton
Loading placeholders for content and images
Typography
Semantic text styling with consistent typography
Navigation
Breadcrumb
Hierarchical navigation with customizable separators
Command
Command palette for quick actions and navigation
Menubar
Desktop application-style horizontal menu bar
Navigation Menu
Horizontal navigation with dropdown panels
Pagination
Page navigation with Previous/Next/Ellipsis
Responsive Nav
Responsive wrapper that shows hamburger on mobile and full nav on desktop
Sidebar
Responsive navigation sidebar with collapsible menus
Overlays
Alert Dialog
Modal dialog for critical confirmations and warnings
Context Menu
Right-click menus with actions and shortcuts
Dialog
Modal dialogs with backdrop and focus management
Dialog Service
Programmatic dialogs with async/await API for alerts and confirmations
Drawer
Slide-out panel with gesture controls and backdrop
Dropdown Menu
Context menus with items, separators, and shortcuts
Hover Card
Rich preview cards on hover with delay control
Popover
Floating panels for additional content and actions
Sheet
Side panels that slide in from viewport edges
Tooltip
Brief informational popups on hover or focus
Feedback
Layout
Accordion
Collapsible content sections with smooth animations
Button
Interactive buttons with multiple variants and sizes
Button Group
Visually group related buttons with connected styling
Collapsible
Expandable content area with trigger control
Resizable
Split layouts with draggable handles
Separator
Visual dividers for content sections
Tabs
Tabbed interface for organizing related content
Theme Switcher
Multi-theme colour palette switcher with live preview
Why Use These Components?
Perfect For:
- ✓ Rapid application development with beautiful defaults
- ✓ Projects that want shadcn/ui design in Blazor
- ✓ Teams that prefer pre-styled, ready-to-use components
- ✓ Applications with Tailwind CSS already integrated
Need Full Control?
If you want completely unstyled components with full control over styling, check out our headless primitives. These components are built on top of those same primitives.
View Headless Primitives →