Professional typography with your brand colors
Built with shadcn/ui, React, and TypeScript using ADA Electric Blue (#4d6aff) and Atmospheric Blue (#45b9ee).
Electric/Professional Blue
Tech/Atmospheric Blue
Pure White Base
ADA brand colors in action
Clean status indicators
Professional iconography
Track completion states
Loading indicators
Spinner Sizes
Pulse Loaders
Circular Progress
Interactive loading demos
Button States
Loading Overlay
Content with overlay loading state.
Content placeholders
Avatars
Text Lines
Buttons
Full layouts
List Items
Loading placeholder for complete cards
Loading placeholder for data tables
Modal dialogs and confirmation popups
Restaurant menu with pricing
| Item | Category | Price | Status |
|---|---|---|---|
| Margherita Pizza | Pizza | €14.50 | Available |
| Spaghetti Carbonara | Pasta | €12.50 | Available |
| Tiramisu | Dessert | €6.50 | Low Stock |
How to use in your ADA applications
import { Button } from "@/components/ui/button"
import { AdaLogo } from "@/components/ui/ada-logo"
import { LanguageSwitcher } from "@/components/ui/language-switcher"
import { Progress, Spinner, LoadingOverlay } from "@/components/ui"
export default function RestaurantDashboard() {
return (
<div className="p-8">
<div className="flex items-center gap-4 mb-8">
<AdaLogo size="md" variant="primary" />
<LanguageSwitcher
currentLocale={locale}
onLocaleChange={setLocale}
/>
</div>
<Button variant="default">
<Plus className="mr-2 h-4 w-4" />
Add Order
</Button>
<Progress value={75} variant="default" className="mt-4" />
</div>
)
}