Component Showcase
Explore our reusable UI components across different tenant themes
Light Mode
Dark Mode
🧩 Interactive Morph Card
Click the card to expand/collapse and see the morph animation in real time.
All release checks are passing except integration smoke tests.
🔔 Try Live Toasts
Click to trigger real toast notifications in the top-right corner.
Buttons
Primary Button
Secondary Button
Outline Button
Icon Buttons
Cards
Basic Card
Card Title
This is a basic card with surface background and border.
Hover Card
Interactive Feature
Hover over this card to see the accent border and gradient overlay effect.
Elevated Card
Elevated Surface
This card uses surface-2 color for a subtle elevation effect with shadow.
Glass Card
Dark Text
Glass effect with dark text on light overlay
Light Text
Glass effect with light text on dark overlay
Accent Card
Bordered
Card with accent border
Filled
Card with accent background
Typography
Heading 1
text-4xl font-bold
Heading 2
text-3xl font-bold
Heading 3
text-2xl font-semibold
Body Text (Strong)
text-base, color: text-strong
Body Text (Muted)
text-base, color: text-muted
Small Text (Subtle)
text-sm, color: text-subtle
Color Palette
Accent
Primary color
Surface 0
Base background
Surface 1
Card background
Surface 2
Elevated surface
Form Inputs
Text Input
Text Area
Resizable with helper text
0/200
Select Dropdown
Checkbox
Radio Buttons
Badges
Filled Badges
Outlined Badges
Badge Sizes
Loading Spinners
Spinner
Bouncing Dots
Pulse
With Label
Tooltips
Basic Tooltips
Dropdown Menus
Basic Dropdown
User Menu (Right Aligned)
Tabs
Line Variant (Underline)
Overview content panel - This is the first tab
Details content panel - This is the second tab
Settings content panel - This is the third tab
Pills Variant
All items content panel
Active items content panel
Archived items content panel
Enclosed Variant
Code editor content
Preview content
Console output
Accordion
Default Variant
You can return items within 30 days of purchase for a full refund.
Standard shipping typically takes 5-7 business days. Express shipping is available for 2-3 day delivery.
Yes, we ship to over 50 countries worldwide. International shipping rates and delivery times vary by destination.
Separated Variant
Configure your security and privacy settings here.
Manage your notification preferences and alert settings.
Add, remove, or update your payment methods.
Navigation
Breadcrumbs
Pagination
Steps
Toast Notifications
Variants
Success
Your changes have been saved successfully.
Error
Failed to save changes. Please try again.
Warning
Your session will expire in 5 minutes.
Info
A new version of the app is available.
Notification
You have a new message from the team.
With Progress Bar
Auto-dismissing
This toast will auto-dismiss in 5 seconds.
Compact (Title Only)
File uploaded successfully
3 items added to cart
Chat Widget
Floating Bubble
Expanded Panel
Typing Indicator
Data Display
Stat Cards
Total Revenue
£12,450
vs £10,200 last month
Active Clients
48
Outstanding
£3,200
Profit Margin
34.2%
Trend Indicators
Progress Bars
£7,550 remaining to reach target
Sparklines
Data Table
| Date | Description | Amount | Status |
|---|---|---|---|
| 15 Jan 2025 | Web Development — Phase 1 | £4,500 | Paid |
| 22 Jan 2025 | API Integration | £2,800 | Pending |
| 28 Jan 2025 | Cloud Migration Consulting | £1,200 | Overdue |
| Total | £8,500 | ||
Empty State
No transactions yet
Your transaction history will appear here.
No invoices
Create your first invoice to get started.
Percentage Rings
Metric Bars (Actual vs Target)
122% of target — exceeded by £4,500
Key-Value Lists
Invoice Summary
- Subtotal
- £8,500.00
- Discount (10%)
- -£850.00
- VAT (20%)
- £1,530.00
- Total
- £9,180.00
Monthly Overview
- Revenue
- £12,450
- Expenses
- -£4,200
- Tax Reserve
- -£2,490
- Net Profit
- £5,760
Activity Feed
Payment received
£4,500 from NoProblem Software — Invoice #1042
Invoice overdue
Invoice #1038 is 7 days overdue
New client added
Acme Corp onboarded for web development
Payment failed
Direct debit for £1,200 was declined
Report generated
January 2025 monthly financial report
Commerce
Price Tags
Rating Stars
Stock Badges
Quantity Selector
Product Cards
Electronics
Wireless Headphones
Premium noise-cancelling headphones with 30h battery
Accessories
USB-C Hub Adapter
7-in-1 multi-port adapter for laptops
Cart Items
Wireless Headphones
Colour: Black
USB-C Cables
Length: 2m
£9.99 each
Selectable Cards (Payment Methods)
Visa, Mastercard, American Express
Pay with your PayPal account
Direct bank transfer (2–3 business days)
Selectable Cards (Delivery Options)
5–7 business days
1–2 business days
Order before 2pm for next-day delivery
Address Cards
Shipping Address
John Smith
42 High Street
Flat 3B
London
SW1A 1AA
United Kingdom
+44 20 7946 0958
Billing Address
Jane Smith
15 Business Park
Suite 200
Manchester
M1 2AB
United Kingdom
Promo Code Input
SAVE20 applied — 20% off your order!
ValidThis code has expired or is not valid
InvalidOrder Confirmation
Order Confirmed!
Thank you for your purchase. A confirmation email has been sent to [email protected]
- Wireless Headphones × 1
- £79.99
- USB-C Cables × 3
- £29.97
- Express Delivery
- £9.99
- Promo SAVE20
- -£23.99
- Total
- £95.96
Timesheet
Approved (Read-Only)
Week of 3 Mar 2025
Approved| Project | Mon 3 | Tue 4 | Wed 5 | Thu 6 | Fri 7 | Total |
|---|---|---|---|---|---|---|
| Client Portal | 8 | 7.5 | 8 | 6 | 4 | 33.5 |
| Internal — DevOps | — | 0.5 | — | 2 | 4 | 6.5 |
| Meetings | — | — | — | — | — | — |
| Daily Total | 8 | 8 | 8 | 8 | 8 | 40 |
Draft with Overtime Warning
Week of 10 Mar 2025
Draft| Project | Mon 10 | Tue 11 | Wed 12 | Thu 13 | Fri 14 | Total |
|---|---|---|---|---|---|---|
| API Migration | 8 | 9 | 8 | 10 | 6 | 41 |
| Code Reviews | 1 | — | 1.5 | — | 2 | 4.5 |
| Daily Total | 9 | 9 | 9.5 | 10 | 8 | 45.5 |
Empty State
Week of 17 Mar 2025
Draft| Project | Mon 17 | Tue 18 | Wed 19 | Thu 20 | Fri 21 | Total |
|---|---|---|---|---|---|---|
| No time entries yet | ||||||