Advanced Components
Complex components for advanced use cases
Advanced components provide sophisticated functionality for complex user interfaces, including date selection, data visualization, and rich interactions.
Overview
ShellUI's advanced components handle complex scenarios like date/time selection, data tables with sorting and filtering, and rich content display. These components are production-ready and fully customizable.
Available Components
Calendar
Date selection calendar
Date Picker
Date input with calendar popup
Date Range Picker
Date range selection
Time Picker
Time selection component
Combobox
Autocomplete input with dropdown
Alert Dialog
Confirmation dialog component
Carousel
Image/content carousel
DataTable
Advanced table with sorting and filtering
Advanced Features
Complex State Management
Components handle complex state internally while providing clean APIs for customization.
Performance Optimization
Optimized for large datasets with virtualization and efficient rendering.
Accessibility
Full keyboard navigation and screen reader support for all advanced interactions.
Getting Started
# Add advanced components
shellui add calendar date-picker combobox data-table carouselCommon Patterns
Date Picker
<DatePicker @bind-Value="selectedDate" />Data Table with Sorting
<DataTable Items="@users" Sortable="true">
<Column Title="Name" Field="Name" Sortable="true" />
<Column Title="Email" Field="Email" Sortable="true" />
<Column Title="Status" Field="Status" />
</DataTable>Alert Dialog
<AlertDialog>
<AlertDialogTrigger>
<Button Variant="destructive">Delete</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>