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.
Accordion
Collapsible content sections with smooth animations
Alert
Displays callouts for important information or feedback
Alert Dialog
Modal dialog for critical confirmations and warnings
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
Breadcrumb
Hierarchical navigation with customizable separators
Button
Interactive buttons with multiple variants and sizes
Button Group
Visually group related buttons with connected styling
Calendar
Date selection grid with month navigation
Card
Container for grouped content with header and footer
Carousel
Slideshow component with touch gestures and animations
Chart
Beautiful data visualizations with 8 chart types
Checkbox
Binary selection control with indeterminate state
Collapsible
Expandable content area with trigger control
Color Picker
Color selection with hex, RGB, and HSL support
Combobox
Autocomplete input with searchable dropdown
Command
Command palette for quick actions and navigation
Context Menu
Right-click menus with actions and shortcuts
Currency Input
Formatted currency input with locale support
Data Table
Powerful tables with sorting, filtering, pagination, and selection
Date Picker
Date selection with calendar in popover
Date Range Picker
Select date ranges with optional presets and two-calendar view
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
Empty
Empty state displays with icon, title, and actions
Field
Combine labels, controls, and help text for accessible forms
File Upload
File upload with drag-and-drop, validation, and previews
Grid
Advanced data grid with sorting, filtering, pagination, and state management
Hover Card
Rich preview cards on hover with delay control
Icon Libraries
3 icon libraries with 3,200+ icons (Lucide, Heroicons, Feather)
Input
Text input fields with multiple types and sizes
Input Group
Enhanced inputs with icons, buttons, and addons
Input OTP
One-time password input with individual character slots
Item
Flexible list items with media, content, and actions
Kbd
Keyboard shortcut badges with semantic markup
Label
Accessible labels for form controls
Link Button
Semantic links styled as buttons for navigation
Menubar
Desktop application-style horizontal menu bar
Motion
Declarative animation system with 20+ presets
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
Native Select
Styled native HTML select dropdown
Numeric Input
Number input with increment/decrement buttons and formatting
Navigation Menu
Horizontal navigation with dropdown panels
Pagination
Page navigation with Previous/Next/Ellipsis
Popover
Floating panels for additional content and actions
Progress
Progress bars with ARIA support and animations
Radio Group
Mutually exclusive options with keyboard navigation
Range Slider
Dual-handle slider for selecting value ranges
Rating
Star rating input with half-star precision and readonly mode
Resizable
Split layouts with draggable handles
Rich Text Editor
WYSIWYG editor with toolbar formatting and live preview
Scroll Area
Custom scrollbars for styled scroll regions
Select
Dropdown selection with groups and labels
Separator
Visual dividers for content sections
Sheet
Side panels that slide in from viewport edges
Sidebar
Responsive navigation sidebar with collapsible menus
Skeleton
Loading placeholders for content and images
Slider
Range input for numeric value selection
Spinner
Loading indicators in multiple sizes
Switch
Toggle control for on/off states
Tabs
Tabbed interface for organizing related content
Textarea
Multi-line text input with automatic content sizing
Theme Switcher
Runtime base color and accent picker with dark mode toggle
Time Picker
Time selection with hour and minute controls
Toast
Temporary notifications with variants and actions
Toggle
Pressable toggle buttons with variants
Toggle Group
Single/multiple selection toggle groups
Tooltip
Brief informational popups on hover or focus
Typography
Semantic text styling with consistent typography
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 →