QR Food - UI Component Demo
This page showcases all the new UI components and features. Use it to test functionality and see the design system in action.
UI Component Showcase
A comprehensive collection of modern, accessible UI components
Buttons
Various button styles and variants
Form Components
Input fields and form elements
A simple text input
Input with left and right icons
Different input states
Custom select component
Cards
Different card variants and layouts
Default Card
Standard card with default styling
This is a default card with standard styling and padding.
Elevated Card
Card with enhanced shadow and hover effects
This card has enhanced shadows and hover effects for better visual hierarchy.
Interactive Card
Clickable card with hover states
This card is interactive with hover effects and cursor pointer.
Badges
Status indicators and labels
Loading States
Various loading indicators and skeleton screens
Spinners
Loading Dots
Loading Bar
Skeleton Card
Empty States
User-friendly messages when there's no content
No orders yet
Orders will appear here once customers start placing them.
Menu is empty
Add some delicious items to your menu to get started.
No results found
Try adjusting your search terms or browse all items.
Search Component
Advanced search with filters and suggestions
Data Table
Responsive table with loading states
| Name | Category | Price | Status |
|---|---|---|---|
| Margherita Pizza | Pizza | $15 | Available |
| Caesar Salad | Salad | $12 | Available |
| Pasta Carbonara | Pasta | $18 | Out of Stock |
Toast Notifications
Different types of toast messages