Interactive Components
Interactive components for user engagement and feedback
Interactive components enhance user experience by providing immediate feedback, contextual information, and engaging interactions throughout your application.
Overview
ShellUI's interactive components are designed to be accessible, performant, and easy to integrate. They work seamlessly with Blazor's event handling and state management.
Available Components
Dropdown
Dropdown menu component
Command
Command palette component
Context Menu
Right-click context menu
Hover Card
Hover-triggered information card
Theme Toggle
Dark/light mode toggle
Empty State
Empty state placeholder
File Upload
File upload component
Interactive Principles
User Feedback
Components provide clear visual and interactive feedback for all user actions.
Accessibility
All interactive components support keyboard navigation and screen readers.
Performance
Optimized for smooth interactions with minimal re-renders.
Getting Started
# Add interactive components
shellui add dropdown command context-menu hover-card theme-toggleCommon Patterns
Dropdown Menu
<Dropdown>
<DropdownTrigger>
<Button>Options</Button>
</DropdownTrigger>
<DropdownContent>
<DropdownItem>Edit</DropdownItem>
<DropdownItem>Delete</DropdownItem>
<DropdownSeparator />
<DropdownItem>Share</DropdownItem>
</DropdownContent>
</Dropdown>Theme Toggle
<ThemeToggle />Command Palette
<Command>
<CommandInput placeholder="Search..." />
<CommandList>
<CommandGroup heading="Actions">
<CommandItem>Create New</CommandItem>
<CommandItem>Open File</CommandItem>
</CommandGroup>
</CommandList>
</Command>