UI Components Preview
Dialogs, Tables, Cards, and more
Custom Icons
SVG icons with color variants for buttons and UI elements
Color Variants
In Buttons
Filled vs Outline
Outline Style in Buttons
Sizes
Dialogs & Modals
Modern dialog styles with backdrop blur
Table
Modern table with rounded borders and subtle styling
| Alias | Status | Emails | Actions |
|---|---|---|---|
shopping@alias.com | Active | 142 | |
newsletter@alias.com | Active | 89 | |
spam@alias.com | Inactive | 12 |
Buttons
All button variants with press effects
Dropdown Menus
Modern dropdowns with smooth animations and shadows
Tooltips
Hover hints with smooth animations and shadows
Progress Bars
Progress indicators with variants and animations
Tabs
Tab navigation with multiple style variants
Default (Pill Container)
Manage your account settings and preferences.
Pills Style
View your dashboard overview and key metrics.
Underline Style
Update your profile information.
Avatars
User avatars with sizes, rings, and status indicators
Sizes
Fallback Variants
Ring Colors (matching backgrounds)
Status Indicators
Avatar Group
Badges
Status badges with soft colors
Skeleton Loaders
Loading placeholders with shimmer animation
Basic Shapes
Card Skeleton
User Row Skeleton
Stats Grid
Toast Notifications
Custom toasts with progress bar and rich colors
Toasts appear in the bottom-right corner with a progress bar that pauses on hover.
Offline Indicator
Network status indicators with modern styling
Offline Banner
Reconnected Toast
Connection Lost Toast
These indicators appear automatically when network connectivity changes. Try disconnecting your network to see them in action.
Form Validation States
Enhanced input styling with error, success, and warning states
We'll never share your email.
This field cannot be modified
Checkboxes
Checkboxes with validation state variants
Default States
Validation Variants
Form Example
Get updates about new features and tips
You must accept the terms to continue
Toggle Switches
iOS-style switches with smooth animations
Receive email alerts for new messages
Forward all incoming emails to your main inbox
Automatically filter suspicious emails
This option is not available
Alias Toggle
Activate/deactivate aliases with visual feedback
Active - receiving emails
Paused - not receiving emails
Loading state with spinner
Cannot be toggled
Skeleton Loading
Modern left-to-right shimmer effect for loading states
Basic Shapes
Card Loading
Table Loading
Stats Grid
Dashboard Loading
Branded loading animation with gradient sweep effect
Full Logo
App logo with AliasFleet text in Sansation Bold font
Sizes
Click the dialog buttons to see the modern modal styles!