Live brand preview — switch the dropdown to reskin every block below. Click any code box to copy. Needs only
tw.js (or a prod build with themes/<brand>.css).
Buttons
<button class="bg-primary text-white px-4 py-2 rounded-lg font-medium hover:bg-brand-600 transition">Primary</button>Navbar
Hero
New · v1
Build it faster, on brand
A clean starting point for any landing page across the group.
Stat cards
Revenue
OMR 12.480
▲ 8.2%
Orders
1,284
▲ 3.1%
Customers
642
▼ 1.4%
Active
98
live now
Pricing cards
Starter
OMR 0/mo
- ✓ 1 project
- ✓ Community support
Popular
Pro
OMR 19/mo
- ✓ Unlimited projects
- ✓ Priority support
Team
OMR 49/mo
- ✓ Everything in Pro
- ✓ SSO + roles
Table
| Order | Customer | Status | Total |
|---|---|---|---|
| #01890 | Ahmed | Paid | OMR 14.549 |
| #01891 | Salma | Pending | OMR 22.000 |
| #01892 | Khalid | Processing | OMR 8.200 |
Tabs (no JS)
Accordion & dropdown (no JS)
Modal (no JS, :target)
Alerts, badges, breadcrumb, pagination
Form controls
https://