diff --git a/components/design-scaffolds.tsx b/components/design-scaffolds.tsx deleted file mode 100644 index 8d6473c..0000000 --- a/components/design-scaffolds.tsx +++ /dev/null @@ -1,1153 +0,0 @@ -"use client"; - -import { useState } from "react"; - -/** - * Design scaffolds — styled React mockups showing what each UI library - * looks like for a given surface. Used in the Design page preview area. - * - * Each scaffold is rendered at its natural size inside a scaled container, - * giving the user a realistic feel for the library's visual language. - */ - -// --------------------------------------------------------------------------- -// Shared mock data -// --------------------------------------------------------------------------- - -const TABLE_ROWS = [ - { name: "Alice Martin", email: "alice@co.com", role: "Admin", status: "Active", date: "Jan 12" }, - { name: "Ben Walsh", email: "ben@co.com", role: "Member", status: "Pending", date: "Jan 14" }, - { name: "Clara Kim", email: "clara@co.com", role: "Member", status: "Active", date: "Jan 15" }, - { name: "David Osei", email: "david@co.com", role: "Viewer", status: "Inactive", date: "Jan 16" }, -]; - -type Page = "Dashboard" | "Users" | "Settings"; - -// --------------------------------------------------------------------------- -// Theme color definitions -// --------------------------------------------------------------------------- - -export interface ThemeColor { - id: string; - label: string; - primary: string; // button bg, active dot, toggle on - primaryFg: string; // text on primary bg - activeBg: string; // sidebar active item bg - activeFg: string; // sidebar active item text - ring: string; // focus ring / subtle tint - // optional full-page palette (used by DaisyUI & dark themes) - bg?: string; - cardBg?: string; - textColor?: string; - borderColor?: string; - mutedText?: string; -} - -export const SHADCN_THEMES: ThemeColor[] = [ - { id: "neutral", label: "Neutral", primary: "#18181b", primaryFg: "#fff", activeBg: "#f4f4f5", activeFg: "#18181b", ring: "#e4e4e7" }, - { id: "blue", label: "Blue", primary: "#3b82f6", primaryFg: "#fff", activeBg: "#eff6ff", activeFg: "#1d4ed8", ring: "#bfdbfe" }, - { id: "green", label: "Green", primary: "#22c55e", primaryFg: "#fff", activeBg: "#f0fdf4", activeFg: "#15803d", ring: "#bbf7d0" }, - { id: "orange", label: "Orange", primary: "#f97316", primaryFg: "#fff", activeBg: "#fff7ed", activeFg: "#c2410c", ring: "#fed7aa" }, - { id: "red", label: "Red", primary: "#ef4444", primaryFg: "#fff", activeBg: "#fef2f2", activeFg: "#b91c1c", ring: "#fecaca" }, - { id: "rose", label: "Rose", primary: "#f43f5e", primaryFg: "#fff", activeBg: "#fff1f2", activeFg: "#be123c", ring: "#fecdd3" }, - { id: "violet", label: "Violet", primary: "#8b5cf6", primaryFg: "#fff", activeBg: "#f5f3ff", activeFg: "#6d28d9", ring: "#ddd6fe" }, - { id: "yellow", label: "Yellow", primary: "#eab308", primaryFg: "#000", activeBg: "#fefce8", activeFg: "#a16207", ring: "#fef08a" }, -]; - -export const MANTINE_THEMES: ThemeColor[] = [ - { id: "blue", label: "Blue", primary: "#228be6", primaryFg: "#fff", activeBg: "#e7f5ff", activeFg: "#1971c2", ring: "#a5d8ff" }, - { id: "teal", label: "Teal", primary: "#12b886", primaryFg: "#fff", activeBg: "#e6fcf5", activeFg: "#087f5b", ring: "#96f2d7" }, - { id: "violet", label: "Violet", primary: "#7950f2", primaryFg: "#fff", activeBg: "#f3f0ff", activeFg: "#5f3dc4", ring: "#d0bfff" }, - { id: "red", label: "Red", primary: "#fa5252", primaryFg: "#fff", activeBg: "#fff5f5", activeFg: "#c92a2a", ring: "#ffc9c9" }, - { id: "orange", label: "Orange", primary: "#fd7e14", primaryFg: "#fff", activeBg: "#fff4e6", activeFg: "#d9480f", ring: "#ffd8a8" }, - { id: "green", label: "Green", primary: "#40c057", primaryFg: "#fff", activeBg: "#ebfbee", activeFg: "#2f9e44", ring: "#b2f2bb" }, -]; - -export const HEROUI_THEMES: ThemeColor[] = [ - { id: "violet", label: "Violet", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.3)", activeFg: "#c084fc", ring: "rgba(168,85,247,0.3)" }, - { id: "blue", label: "Blue", primary: "#2563eb", primaryFg: "#fff", activeBg: "rgba(37,99,235,0.3)", activeFg: "#93c5fd", ring: "rgba(59,130,246,0.3)" }, - { id: "rose", label: "Rose", primary: "#e11d48", primaryFg: "#fff", activeBg: "rgba(225,29,72,0.3)", activeFg: "#fda4af", ring: "rgba(244,63,94,0.3)" }, - { id: "green", label: "Green", primary: "#16a34a", primaryFg: "#fff", activeBg: "rgba(22,163,74,0.3)", activeFg: "#86efac", ring: "rgba(34,197,94,0.3)" }, - { id: "orange", label: "Orange", primary: "#ea580c", primaryFg: "#fff", activeBg: "rgba(234,88,12,0.3)", activeFg: "#fdba74", ring: "rgba(249,115,22,0.3)" }, -]; - -// DaisyUI named themes — each has a full page palette -export const DAISY_THEMES: ThemeColor[] = [ - { id: "dark", label: "Dark", primary: "#793ef9", primaryFg: "#fff", activeBg: "rgba(121,62,249,0.2)", activeFg: "#a78bfa", ring: "#4c1d95", bg: "#1d232a", cardBg: "#191e24", textColor: "#a6adba", borderColor: "#2a323c", mutedText: "#6b7280" }, - { id: "light", label: "Light", primary: "#570df8", primaryFg: "#fff", activeBg: "#f3f0ff", activeFg: "#4c1d95", ring: "#ddd6fe", bg: "#fff", cardBg: "#fff", textColor: "#1f2937", borderColor: "#e5e7eb", mutedText: "#6b7280" }, - { id: "cupcake", label: "Cupcake", primary: "#65c3c8", primaryFg: "#291334", activeBg: "#d9f5f6", activeFg: "#0e6b70", ring: "#a7eaec", bg: "#faf7f5", cardBg: "#fff", textColor: "#291334", borderColor: "#e9e3df", mutedText: "#9ca3af" }, - { id: "bumblebee", label: "Bee", primary: "#e0a82e", primaryFg: "#1f2937", activeBg: "#fef9e5", activeFg: "#92650a", ring: "#fde68a", bg: "#fff", cardBg: "#fff", textColor: "#1f2937", borderColor: "#e5e7eb", mutedText: "#6b7280" }, - { id: "synthwave", label: "Synth", primary: "#e779c1", primaryFg: "#2d1b69", activeBg: "rgba(231,121,193,0.2)",activeFg: "#f0abdc", ring: "#701a75", bg: "#1a103c", cardBg: "#221551", textColor: "#e2e8f0", borderColor: "#4c3585", mutedText: "#a78bfa" }, - { id: "cyberpunk", label: "Cyber", primary: "#ff7598", primaryFg: "#1f2937", activeBg: "#fff0f3", activeFg: "#9d174d", ring: "#fca5a5", bg: "#ffee00", cardBg: "#fff", textColor: "#1f2937", borderColor: "#1f2937", mutedText: "#374151" }, - { id: "retro", label: "Retro", primary: "#ef9995", primaryFg: "#282425", activeBg: "#fde8e7", activeFg: "#7f1d1d", ring: "#fca5a5", bg: "#e4d8b4", cardBg: "#f7f0d8", textColor: "#282425", borderColor: "#d4b483", mutedText: "#6b5745" }, - { id: "dracula", label: "Dracula", primary: "#ff79c6", primaryFg: "#282a36", activeBg: "rgba(255,121,198,0.15)",activeFg: "#ff79c6",ring: "#bd93f9", bg: "#282a36", cardBg: "#343746", textColor: "#f8f8f2", borderColor: "#44475a", mutedText: "#6272a4" }, - { id: "night", label: "Night", primary: "#38bdf8", primaryFg: "#0c1a2b", activeBg: "rgba(56,189,248,0.15)",activeFg: "#38bdf8", ring: "#0284c7", bg: "#1d232a", cardBg: "#191e24", textColor: "#a6adba", borderColor: "#2a323c", mutedText: "#4b5563" }, - { id: "forest", label: "Forest", primary: "#1eb854", primaryFg: "#fff", activeBg: "rgba(30,184,84,0.15)", activeFg: "#1eb854", ring: "#15803d", bg: "#171212", cardBg: "#1d1d1d", textColor: "#d1d5db", borderColor: "#292929", mutedText: "#4b5563" }, - { id: "coffee", label: "Coffee", primary: "#db924b", primaryFg: "#20150e", activeBg: "rgba(219,146,75,0.15)",activeFg: "#db924b", ring: "#92400e", bg: "#20150e", cardBg: "#2a1c12", textColor: "#d1b59c", borderColor: "#3d261a", mutedText: "#78523a" }, - { id: "winter", label: "Winter", primary: "#047aed", primaryFg: "#fff", activeBg: "#e0f0ff", activeFg: "#0369a1", ring: "#bae6fd", bg: "#fff", cardBg: "#f0f9ff", textColor: "#1e3a5f", borderColor: "#bae6fd", mutedText: "#64748b" }, -]; - -export const TREMOR_THEMES: ThemeColor[] = [ - { id: "blue", label: "Blue", primary: "#2563eb", primaryFg: "#fff", activeBg: "#eff6ff", activeFg: "#1d4ed8", ring: "#bfdbfe" }, - { id: "indigo", label: "Indigo", primary: "#4f46e5", primaryFg: "#fff", activeBg: "#eef2ff", activeFg: "#3730a3", ring: "#c7d2fe" }, - { id: "teal", label: "Teal", primary: "#0d9488", primaryFg: "#fff", activeBg: "#f0fdfa", activeFg: "#0f766e", ring: "#99f6e4" }, - { id: "rose", label: "Rose", primary: "#e11d48", primaryFg: "#fff", activeBg: "#fff1f2", activeFg: "#be123c", ring: "#fecdd3" }, - { id: "amber", label: "Amber", primary: "#d97706", primaryFg: "#fff", activeBg: "#fffbeb", activeFg: "#92400e", ring: "#fde68a" }, -]; - -// Small swatch strip rendered inside each scaffold's header -function ThemeSwatches({ themes, selected, onSelect }: { - themes: ThemeColor[]; - selected: ThemeColor; - onSelect: (t: ThemeColor) => void; -}) { - return ( -
- {themes.map(t => ( -
- ); -} - -// --------------------------------------------------------------------------- -// WEB APP — shadcn -// --------------------------------------------------------------------------- - -function ShadcnDashboard({ t }: { t: ThemeColor }) { - return ( -
-
- {["Total Revenue", "Active Users", "Conversions"].map((label, i) => ( -
-

{label}

-

{["$12,400", "2,841", "18.2%"][i]}

-

+{[12, 8, 3][i]}% from last month

-
- ))} -
-
-
Revenue
-
- {[40,60,45,75,65,85,70,90,55,80,75,95].map((h,i)=>( -
- ))} -
-
-
-
Recent activity
- {TABLE_ROWS.slice(0,3).map(r=>( -
-
-

{r.name}

{r.email}

- {r.status} -
- ))} -
-
- ); -} - -function ShadcnUsers({ t }: { t: ThemeColor }) { - return ( -
-
-
- Team members -
- -
Invite
-
-
- - {["Name","Role","Status","Joined",""].map(h=>)} - {TABLE_ROWS.map(r=>( - - - - - - - - ))} -
{h}
-

{r.name}

{r.email}

-
{r.role}{r.status}{r.date}
···
-
-
- ); -} - -function ShadcnSettings({ t }: { t: ThemeColor }) { - return ( -
-
-
General
-
- {[{l:"Workspace name",v:"Acme Inc"},{l:"Slug",v:"acme-inc"},{l:"Email",v:"admin@acme.com"}].map(f=>( -
- - -
- ))} -
Save changes
-
-
-
-
Notifications
-
- {["Email digests","Push notifications","Security alerts","Product updates"].map((label,i)=>( -
-

{label}

Receive {label.toLowerCase()}

-
-
-
-
- ))} -
-
-
- ); -} - -export function WebAppShadcn({ themeColor }: { themeColor?: ThemeColor }) { - const [page, setPage] = useState("Dashboard"); - const theme = themeColor ?? SHADCN_THEMES[0]; - const NAV_ITEMS: { label: Page; icon: string }[] = [ - { label: "Dashboard", icon: "▦" }, - { label: "Users", icon: "◎" }, - { label: "Settings", icon: "⚙" }, - ]; - return ( -
-
-
-
- Acme Inc -
- {NAV_ITEMS.map(({ label, icon }) => ( - - ))} -
-
-
- {page} -
-
Export
-
+ New
-
-
- {page === "Dashboard" && } - {page === "Users" && } - {page === "Settings" && } -
-
- ); -} - -function MantineDashboard({ t }: { t: ThemeColor }) { - return ( -
-
- {[{l:"Total Revenue",v:"$12,400",c:"#2f9e44"},{l:"Active Users",v:"2,841",c:"#228be6"},{l:"Conversions",v:"18.2%",c:"#e67700"}].map(item=>( -
-

{item.l}

-

{item.v}

-

↑ trending up

-
- ))} -
-
-
Monthly revenue
-
- {[40,60,45,75,65,85,70,90,55,80,75,95].map((h,i)=>( -
- ))} -
-
-
-
Recent
- {TABLE_ROWS.slice(0,3).map(r=>( -
-
-

{r.name}

{r.email}

- {r.status} -
- ))} -
-
- ); -} - -function MantineUsers({ t }: { t: ThemeColor }) { - return ( -
-
-
- Team members -
- - -
-
- - {["Member","Role","Status","Joined","Actions"].map(h=>)} - {TABLE_ROWS.map(r=>( - - - - - - - - ))} -
{h}

{r.name}

{r.email}

{r.role}{r.status}{r.date}
-
-
- ); -} - -function MantineSettings({ t }: { t: ThemeColor }) { - return ( -
-
-
Workspace
-
- {[{l:"Name",v:"Acme Inc"},{l:"Slug",v:"acme-inc"},{l:"Email",v:"admin@acme.com"}].map(f=>( -
- - -
- ))} - -
-
-
-
Notifications
-
- {["Email digests","Push notifications","Security alerts","Product updates"].map((label,i)=>( -
-

{label}

Get notified via {label.split(" ")[0].toLowerCase()}

-
-
-
-
- ))} -
-
-
- ); -} - -export function WebAppMantine({ themeColor }: { themeColor?: ThemeColor }) { - const [page, setPage] = useState("Dashboard"); - const theme = themeColor ?? MANTINE_THEMES[0]; - const NAV: { label: Page; icon: string }[] = [ - { label: "Dashboard", icon: "▦" }, - { label: "Users", icon: "◎" }, - { label: "Settings", icon: "⚙" }, - ]; - return ( -
-
-
-
- Acme Inc -
- {NAV.map(({ label, icon }) => ( - - ))} -
-
-
- {page} -
- - -
-
- {page === "Dashboard" && } - {page === "Users" && } - {page === "Settings" && } -
-
- ); -} - -function HeroUIDashboard() { - return ( -
-
- {["Revenue","Users","Conversion"].map((label,i)=>( -
-

{label}

-

{["$12,400","2,841","18.2%"][i]}

-

+{[12,8,3][i]}% this month

-
- ))} -
-
-
Revenue
-
- {[40,60,45,75,65,85,70,90,55,80,75,95].map((h,i)=>( -
- ))} -
-
-
-
Recent activity
- {TABLE_ROWS.slice(0,3).map(r=>( -
-
-

{r.name}

{r.email}

- {r.status} -
- ))} -
-
- ); -} - -function HeroUIUsers() { - return ( -
-
-
- Team members -
- - -
-
- - {["Member","Role","Status","Joined",""].map(h=>)} - {TABLE_ROWS.map(r=>( - - - - - - - - ))} -
{h}

{r.name}

{r.email}

{r.role}{r.status}{r.date}
-
-
- ); -} - -function HeroUISettings() { - return ( -
-
-
Profile
-
- {[{l:"Workspace name",v:"Acme Inc"},{l:"Slug",v:"acme-inc"},{l:"Email",v:"admin@acme.com"}].map(f=>( -
- - -
- ))} - -
-
-
-
Notifications
-
- {["Email digests","Push notifications","Security alerts","Product updates"].map((label,i)=>( -
-

{label}

-
-
-
-
- ))} -
-
-
- ); -} - -export function WebAppHeroUI({ themeColor }: { themeColor?: ThemeColor }) { - const [page, setPage] = useState("Dashboard"); - const theme = themeColor ?? HEROUI_THEMES[0]; - const NAV: { label: Page; icon: string }[] = [ - { label: "Dashboard", icon: "▦" }, - { label: "Users", icon: "◎" }, - { label: "Settings", icon: "⚙" }, - ]; - return ( -
-
-
-
- Acme Inc -
- {NAV.map(({ label, icon }) => ( - - ))} -
-
-
- {page} -
- - -
-
- {page === "Dashboard" && } - {page === "Users" && } - {page === "Settings" && } -
-
- ); -} - -function TremorDashboard() { - return ( -
-
- {[{l:"Revenue",v:"$12,400",c:"#2563eb",bg:"#dbeafe",pct:65},{l:"Users",v:"2,841",c:"#7c3aed",bg:"#ede9fe",pct:48},{l:"Conversion",v:"18.2%",c:"#059669",bg:"#d1fae5",pct:72}].map(item=>( -
-
-

{item.l}

-
-
-

{item.v}

-
-
- ))} -
-
-

Revenue over time

-
- {[40,65,55,80,70,90,75,85,60,95,80,100].map((h,i)=>( -
- ))} -
-
- {["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"].map(m=>{m})} -
-
-
- {TABLE_ROWS.slice(0,3).map(r=>( -
-
- {r.name} - {r.role} -
- ))} -
-
- ); -} - -function TremorUsers() { - return ( -
-
- {[{l:"Total",v:"2,841",c:"#2563eb"},{l:"Active",v:"1,940",c:"#059669"},{l:"Pending",v:"647",c:"#d97706"},{l:"Inactive",v:"254",c:"#6b7280"}].map(s=>( -
-
-

{s.l}

{s.v}

-
- ))} -
-
-
- All users - -
- - {["Name","Role","Status","Date"].map(h=>)} - {TABLE_ROWS.map(r=>( - - - - - - - ))} -
{h}
{r.name}{r.role}
{r.status}
{r.date}
-
-
- ); -} - -function TremorSettings() { - return ( -
-
-

Workspace

-
- {[{l:"Name",v:"Acme Inc"},{l:"Domain",v:"acme.com"},{l:"Timezone",v:"UTC-8"}].map(f=>( -
- - -
- ))} - -
-
-
-

Alerts

- {["Email digests","Anomaly alerts","Weekly report","API warnings"].map((label,i)=>( -
-

{label}

-
-
-
-
- ))} -
-
- ); -} - -export function WebAppTremor({ themeColor }: { themeColor?: ThemeColor }) { - const [page, setPage] = useState("Dashboard"); - const theme = themeColor ?? TREMOR_THEMES[0]; - const NAV: { label: Page; icon: string }[] = [ - { label: "Dashboard", icon: "▦" }, - { label: "Users", icon: "◎" }, - { label: "Settings", icon: "⚙" }, - ]; - return ( -
-
-
-
- Acme Inc -
- {NAV.map(({ label, icon }) => ( - - ))} -
-
-
- {page} -
- -
-
- {page === "Dashboard" && } - {page === "Users" && } - {page === "Settings" && } -
-
- ); -} - -// --------------------------------------------------------------------------- -// MARKETING scaffolds -// --------------------------------------------------------------------------- - -export function MarketingDaisy({ themeColor }: { themeColor?: ThemeColor }) { - const theme = themeColor ?? DAISY_THEMES[0]; - const textColor = theme.textColor ?? "#f8f8f2"; - const mutedText = theme.mutedText ?? "rgba(255,255,255,0.5)"; - const cardBg = theme.cardBg ?? "rgba(255,255,255,0.05)"; - const borderColor = theme.borderColor ?? "rgba(255,255,255,0.1)"; - const bg = theme.bg ?? "#1d232a"; - - return ( -
- -
-
- ✦ {theme.label} theme — v2.0 -
-

Build faster,
ship smarter

-

The all-in-one platform that helps teams build, launch, and scale their products.

-
- - -
-
-
- {[{icon:"⚡",title:"Lightning fast",desc:"Deploy in seconds, not hours"},{icon:"🔒",title:"Secure by default",desc:"Enterprise-grade security built in"},{icon:"📈",title:"Scales with you",desc:"From zero to millions of users"}].map(f=>( -
-
{f.icon}
-

{f.title}

-

{f.desc}

-
- ))} -
-
-
-
-
- -
-
- {["badge","badge-outline","badge-soft"].map((b,i)=>( - {["Primary","Outline","Soft"][i]} - ))} -
-
-
-
- ); -} - -// Extended HeroUI marketing themes — these match heroui.com/themes prebuilt options -const HEROUI_MARKETING_THEMES: ThemeColor[] = [ - { id: "purple", label: "Purple", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.08)", activeFg: "#7c3aed", ring: "rgba(124,58,237,0.15)", bg: "#fff" }, - { id: "blue", label: "Blue", primary: "#2563eb", primaryFg: "#fff", activeBg: "rgba(37,99,235,0.08)", activeFg: "#2563eb", ring: "rgba(37,99,235,0.15)", bg: "#fff" }, - { id: "teal", label: "Teal", primary: "#0d9488", primaryFg: "#fff", activeBg: "rgba(13,148,136,0.08)", activeFg: "#0d9488", ring: "rgba(13,148,136,0.15)", bg: "#fff" }, - { id: "rose", label: "Rose", primary: "#e11d48", primaryFg: "#fff", activeBg: "rgba(225,29,72,0.08)", activeFg: "#e11d48", ring: "rgba(225,29,72,0.15)", bg: "#fff" }, - { id: "dark", label: "Dark", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.2)", activeFg: "#c084fc", ring: "rgba(124,58,237,0.3)", bg: "#09090b", cardBg: "#18181b", textColor: "#f4f4f5", borderColor: "#27272a", mutedText: "#71717a" }, - { id: "modern", label: "Modern", primary: "#06b6d4", primaryFg: "#fff", activeBg: "rgba(6,182,212,0.08)", activeFg: "#06b6d4", ring: "rgba(6,182,212,0.15)", bg: "#fff" }, -]; - -export function MarketingHeroUI({ themeColor }: { themeColor?: ThemeColor }) { - const theme = themeColor ?? HEROUI_MARKETING_THEMES[0]; - const isDark = theme.id === "dark"; - const bg = theme.bg ?? "#fff"; - const textColor = theme.textColor ?? "#18181b"; - const mutedText = theme.mutedText ?? "#71717a"; - const cardBg = theme.cardBg ?? "#fff"; - const borderColor = theme.borderColor ?? "#f4f4f5"; - - return ( -
- -
-
- 🚀 {theme.label} theme — v2.0 -
-

- Build faster,
ship smarter -

-

The all-in-one platform for teams that move fast.

-
- - -
-
-
- {["#ff5f56","#ffbd2e","#27c93f"].map(c=>
)} -
-
-
- {["Revenue","Users","Growth","Churn"].map((m,i)=>( -
-

{m}

-

{["$12k","2.8k","+24%","2.1%"][i]}

-
- ))} -
-
-
-
-
- ); -} - -export function MarketingAceternity() { - return ( -
- -
-
-
- ✦ Open source · 12k GitHub stars -
-

- Build the future
of the web -

-

Beautifully crafted components built with Tailwind CSS and Framer Motion.

-
- - -
-
- {["Animated","Accessible","Open source"].map((f,i)=>( -
-
-
-
-

{f}

-

Built for production

-
- ))} -
-
-
- ); -} - -export function MarketingTailwind() { - return ( -
- -
-
- Now in public beta -

The platform
built for scale

-

Everything your team needs to build, deploy, and monitor production applications.

-
- - -
-
- {["99.9% uptime SLA","10ms avg latency","SOC2 compliant","GDPR ready"].map(f=>( -
-
-
-
- {f} -
- ))} -
-
-
-
- ); -} - -// --------------------------------------------------------------------------- -// ADMIN scaffolds -// --------------------------------------------------------------------------- - -export function AdminMantine() { return ; } -export function AdminShadcn() { return ; } -export function AdminTremor() { return ; } - -// --------------------------------------------------------------------------- -// MOBILE scaffolds -// --------------------------------------------------------------------------- - -function MobileFrame({ children }: { children: React.ReactNode }) { - return ( -
-
-
-
-
- {children} -
-
-
- ); -} - -export function MobileNativewind() { - return ( - -
-
-

Good morning

-

Dashboard

-
-
-
- {[{l:"Revenue",v:"$4.2k"},{l:"Users",v:"184"}].map(c=>( -
-

{c.l}

-

{c.v}

-
- ))} -
- {["Fix login bug","Update pricing","Review PR #42"].map((t,i)=>( -
-
-

{t}

-
- ))} -
-
- {["Home","Projects","Chat","Profile"].map((l,i)=>( -
-
- {l} -
- ))} -
-
- - ); -} - -export function MobileGluestack() { - return ( - -
-
-

Dashboard

-
-
-
-
- {[{l:"Revenue",v:"$4.2k",c:"#1976d2"},{l:"Users",v:"184",c:"#7b1fa2"}].map(c=>( -
-

{c.l}

-

{c.v}

-
- ))} -
- {["Fix login bug","Update pricing","Review PR #42"].map((t,i)=>( -
-
-

{t}

-
- ))} -
-
- {["Home","Tasks","Chat","Profile"].map((l,i)=>( -
-
- {l} -
- ))} -
-
- - ); -} - -// --------------------------------------------------------------------------- -// EMAIL scaffolds -// --------------------------------------------------------------------------- - -export function EmailReactEmail() { - return ( -
-
-
-
-
- Acme -
-
-
-

Welcome to Acme! 🎉

-

Hi Alice, thanks for signing up. Your account is ready and you can start building right away.

-
- -
-
-

Your account details

- {["Plan: Starter","Workspace: alice-workspace","Status: Active"].map(d=>( -

{d}

- ))} -
-

If you have any questions, reply to this email or visit our help center. We're here to help.

-
-
-

Acme Inc · 123 Main St · San Francisco CA · Unsubscribe

-
-
-
- ); -} - -// --------------------------------------------------------------------------- -// DOCS scaffolds -// --------------------------------------------------------------------------- - -export function DocsNextra() { - return ( -
-
-
-

Getting Started

- {["Introduction","Installation","Quick Start"].map((item,i)=>( -
{item}
- ))} -
-
-

Components

- {["Button","Card","Input","Modal","Table"].map(item=>( -
{item}
- ))} -
-
-

API Reference

- {["REST API","Webhooks"].map(item=>( -
{item}
- ))} -
-
-
-
-
- Docs/Getting Started/Introduction -
-

Introduction

-

Acme UI is a collection of re-usable components that you can copy and paste into your web apps. Built with Radix UI and Tailwind CSS.

-
-

$ npm install acme-ui

-
-

Key features

- {["Accessible","Customisable","Open source","TypeScript ready"].map(f=>( -
-
{f} -
- ))} -
-
-
- ); -} - -export function DocsShadcnCustom() { - return ( -
-
-
-
-
- Acme Docs -
-
- {[{section:"Guides",items:["Introduction","Installation","Theming"]},{section:"Components",items:["Button","Input","Select","Dialog"]}].map(g=>( -
-

{g.section}

- {g.items.map((item,i)=>( -
{item}
- ))} -
- ))} -
-
-

Introduction

-

A set of beautifully designed components built with Radix UI and Tailwind CSS.

-
-
- bash -
-
-

npx shadcn@latest init

-
-
-
- {["Button","Card","Input","Badge"].map(c=>( -
-

{c}

-

View component →

-
- ))} -
-
-
- ); -} - -// --------------------------------------------------------------------------- -// Registry — maps surface+theme to scaffold component -// --------------------------------------------------------------------------- - -export const SCAFFOLD_REGISTRY: Record>> = { - "web-app": { - "shadcn": WebAppShadcn, - "mantine": WebAppMantine, - "hero-ui": WebAppHeroUI, - "tremor": WebAppTremor, - }, - "marketing": { - "daisy-ui": MarketingDaisy, - "hero-ui": MarketingHeroUI, - "aceternity": MarketingAceternity, - "tailwind-only": MarketingTailwind, - }, - "admin": { - "mantine": AdminMantine, - "shadcn": AdminShadcn, - "tremor": AdminTremor, - }, - "mobile": { - "nativewind": MobileNativewind, - "gluestack": MobileGluestack, - }, - "email": { - "react-email": EmailReactEmail, - }, - "docs": { - "nextra": DocsNextra, - "shadcn": DocsShadcnCustom, - }, -}; - -// Maps surface → library → available theme colors for that library -export const THEME_REGISTRY: Record> = { - "web-app": { - "shadcn": SHADCN_THEMES, - "mantine": MANTINE_THEMES, - "hero-ui": HEROUI_THEMES, - "tremor": TREMOR_THEMES, - }, - "marketing": { - "daisy-ui": DAISY_THEMES, - "hero-ui": HEROUI_MARKETING_THEMES, - }, -}; diff --git a/components/design-scaffolds/admin.tsx b/components/design-scaffolds/admin.tsx new file mode 100644 index 0000000..84d92a6 --- /dev/null +++ b/components/design-scaffolds/admin.tsx @@ -0,0 +1,326 @@ +"use client"; + +import { useState } from "react"; +import { ThemeColor, TABLE_ROWS, MANTINE_THEMES, SHADCN_THEMES, TREMOR_THEMES } from "./types"; + +// Admin Panel surface — internal tool for operating the business. +// Context: the ops/support team, not end users. +// Shows: system health, user moderation, API config — NOT business metrics. + +type AdminPage = "System" | "Moderation" | "Config"; + +const SERVERS = [ + { name: "api-prod-01", region: "us-east-1", status: "healthy", cpu: 34, mem: 58, uptime: "99.98%" }, + { name: "api-prod-02", region: "us-east-1", status: "healthy", cpu: 41, mem: 62, uptime: "99.97%" }, + { name: "worker-01", region: "eu-west-2", status: "warning", cpu: 89, mem: 71, uptime: "99.91%" }, + { name: "db-primary", region: "us-east-1", status: "healthy", cpu: 22, mem: 44, uptime: "100%" }, +]; + +const AUDIT_LOG = [ + { user: "alice@co.com", action: "Banned user", target: "spammer@evil.com", time: "2m ago" }, + { user: "ben@co.com", action: "Promoted to Admin", target: "clara@co.com", time: "14m ago" }, + { user: "system", action: "Rate limit hit", target: "api/v1/search", time: "31m ago" }, + { user: "david@co.com", action: "Reset password", target: "eve@co.com", time: "1h ago" }, +]; + +function StatusDot({ status }: { status: string }) { + const color = status === "healthy" ? "#22c55e" : status === "warning" ? "#f59e0b" : "#ef4444"; + return
; +} + +function MiniBar({ value, color }: { value: number; color: string }) { + const bg = value > 80 ? "#ef444430" : "#f3f4f6"; + const fill = value > 80 ? "#ef4444" : color; + return ( +
+
+
+ ); +} + +// --------------------------------------------------------------------------- +// Admin shell — denser than app shell, breadcrumb + secondary nav +// --------------------------------------------------------------------------- +function AdminShell({ t, page, onNav, children }: { + t: ThemeColor; page: AdminPage; onNav: (p: AdminPage) => void; children: React.ReactNode; +}) { + const NAV: { label: AdminPage; icon: string; badge?: string }[] = [ + { label: "System", icon: "◈", badge: "1 warn" }, + { label: "Moderation", icon: "◉" }, + { label: "Config", icon: "⚙" }, + ]; + return ( +
+ {/* Left nav */} +
+
+
+ Acme Admin +
+
Operations
+ {NAV.map(({ label, icon, badge }) => ( + + ))} +
+ + {/* Main */} +
+ {/* Top bar */} +
+
+ Admin/ + {page} +
+
+ v2.4.1-prod +
A
+
+
+
+ {children} +
+
+
+ ); +} + +// --------------------------------------------------------------------------- +// System tab — server health, error rate, uptime +// --------------------------------------------------------------------------- +function SystemView({ t }: { t: ThemeColor }) { + return ( +
+ {/* Summary row */} +
+ {[ + { l: "Uptime", v: "99.96%", good: true }, + { l: "Error rate", v: "0.12%", good: true }, + { l: "Avg latency", v: "84ms", good: true }, + { l: "Alerts", v: "1 active",good: false }, + ].map(s => ( +
+

{s.l}

+

{s.v}

+
+ ))} +
+ + {/* Server table */} +
+
+ Servers + ● Live +
+
+ {SERVERS.map(s => ( +
+ +
+

{s.name}

+

{s.region}

+
+
+
+ CPU + + 80 ? "#ef4444" : "#374151", width: 24, textAlign: "right" }}>{s.cpu}% +
+
+ MEM + + 80 ? "#ef4444" : "#374151", width: 24, textAlign: "right" }}>{s.mem}% +
+
+ {s.uptime} +
+ ))} +
+
+ + {/* Error timeline */} +
+
Error rate — last 24h
+
+ {[2,1,3,2,1,1,0,0,1,2,8,3,2,1,0,1,2,1,1,0,1,0,1,2].map((h, i) => ( +
5 ? "#ef4444" : h > 2 ? "#f59e0b" : t.activeBg, height: `${Math.max(h * 10, 3)}%`, minHeight: 2 }} /> + ))} +
+
+
+ ); +} + +// --------------------------------------------------------------------------- +// Moderation tab — user management with admin actions +// --------------------------------------------------------------------------- +function ModerationView({ t }: { t: ThemeColor }) { + return ( +
+ {/* User table with actions */} +
+
+ User management +
+ + +
+
+ {TABLE_ROWS.map(r => ( +
+
+ {r.name[0]} +
+
+

{r.name}

+

{r.email}

+
+ {r.role} + {r.status} + {/* Admin action buttons */} +
+ + +
+
+ ))} +
+ + {/* Audit log */} +
+
Audit log
+ {AUDIT_LOG.map((e, i) => ( +
+
+ {e.user} + {e.action} + {e.target} + {e.time} +
+ ))} +
+
+ ); +} + +// --------------------------------------------------------------------------- +// Config tab — API keys, feature flags, webhooks +// --------------------------------------------------------------------------- +function ConfigView({ t }: { t: ThemeColor }) { + return ( +
+ {/* API keys */} +
+
+ API Keys + +
+ {[ + { name: "Production", key: "sk_prod_••••••••••••••3d8f", created: "Jan 2, 2026", last: "2m ago" }, + { name: "Staging", key: "sk_test_••••••••••••••9a2c", created: "Dec 10, 2025", last: "1d ago" }, + ].map(k => ( +
+
+

{k.name}

+

{k.key}

+
+ Created {k.created} + Used {k.last} + +
+ ))} +
+ + {/* Feature flags */} +
+
Feature flags
+ {[ + { flag: "new-onboarding", on: true, env: "production" }, + { flag: "ai-suggestions", on: true, env: "production" }, + { flag: "bulk-export-v2", on: false, env: "staging" }, + { flag: "realtime-collab", on: false, env: "dev" }, + ].map(f => ( +
+

{f.flag}

+ {f.env} +
+
+
+
+ ))} +
+ + {/* Webhooks */} +
+
+ Webhooks + +
+ {[ + { url: "https://hooks.slack.com/T0123/B456/••••", events: "user.created", status: "active" }, + { url: "https://api.pagerduty.com/webhooks/••••", events: "alert.fired", status: "active" }, + ].map((w, i) => ( +
+
+ {w.url} + {w.events} +
+ ))} +
+
+ ); +} + +// --------------------------------------------------------------------------- +// Exported scaffold components +// --------------------------------------------------------------------------- + +export function AdminMantine({ themeColor }: { themeColor?: ThemeColor }) { + const [page, setPage] = useState("System"); + const t = themeColor ?? MANTINE_THEMES[0]; + return ( + + {page === "System" && } + {page === "Moderation" && } + {page === "Config" && } + + ); +} + +export function AdminShadcn({ themeColor }: { themeColor?: ThemeColor }) { + const [page, setPage] = useState("System"); + const t = themeColor ?? SHADCN_THEMES[0]; + return ( + + {page === "System" && } + {page === "Moderation" && } + {page === "Config" && } + + ); +} + +export function AdminTremor({ themeColor }: { themeColor?: ThemeColor }) { + const [page, setPage] = useState("System"); + const t = themeColor ?? TREMOR_THEMES[0]; + return ( + + {page === "System" && } + {page === "Moderation" && } + {page === "Config" && } + + ); +} + +export { MANTINE_THEMES, SHADCN_THEMES, TREMOR_THEMES }; diff --git a/components/design-scaffolds/docs.tsx b/components/design-scaffolds/docs.tsx new file mode 100644 index 0000000..fabd3bc --- /dev/null +++ b/components/design-scaffolds/docs.tsx @@ -0,0 +1,81 @@ +"use client"; + +import { ThemeColor } from "./types"; + +export function DocsNextra({ themeColor }: { themeColor?: ThemeColor }) { + return ( +
+
+ {[ + { section: "Getting Started", items: ["Introduction", "Installation", "Quick Start"] }, + { section: "Components", items: ["Button", "Card", "Input", "Modal", "Table"] }, + { section: "API Reference", items: ["REST API", "Webhooks"] }, + ].map(g => ( +
+

{g.section}

+ {g.items.map((item, i) => ( +
{item}
+ ))} +
+ ))} +
+
+
+ Docs/Getting Started/Introduction +
+

Introduction

+

Acme UI is a collection of re-usable components that you can copy and paste into your web apps. Built with Radix UI and Tailwind CSS.

+
+

$ npm install acme-ui

+
+

Key features

+ {["Accessible by default", "Customisable", "Open source", "TypeScript ready"].map(f => ( +
+
{f} +
+ ))} +
+
+ ); +} + +export function DocsShadcnCustom({ themeColor }: { themeColor?: ThemeColor }) { + return ( +
+
+
+
+ Acme Docs +
+ {[{ section: "Guides", items: ["Introduction", "Installation", "Theming"] }, { section: "Components", items: ["Button", "Input", "Select", "Dialog"] }].map(g => ( +
+

{g.section}

+ {g.items.map((item, i) => ( +
{item}
+ ))} +
+ ))} +
+
+

Introduction

+

A set of beautifully designed components built with Radix UI and Tailwind CSS.

+
+
+ bash +
+
+

npx shadcn@latest init

+
+
+
+ {["Button", "Card", "Input", "Badge"].map(c => ( +
+

{c}

+

View component →

+
+ ))} +
+
+
+ ); +} diff --git a/components/design-scaffolds/email.tsx b/components/design-scaffolds/email.tsx new file mode 100644 index 0000000..983a089 --- /dev/null +++ b/components/design-scaffolds/email.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { ThemeColor } from "./types"; + +export function EmailReactEmail({ themeColor }: { themeColor?: ThemeColor }) { + return ( +
+
+
+
+ Acme +
+
+

Welcome to Acme! 🎉

+

Hi Alice, thanks for signing up. Your account is ready and you can start building right away.

+
+ +
+
+

Your account details

+ {["Plan: Starter", "Workspace: alice-workspace", "Status: Active"].map(d => ( +

{d}

+ ))} +
+

If you have any questions, reply to this email or visit our help center. We're here to help.

+
+
+

Acme Inc · 123 Main St · San Francisco CA · Unsubscribe

+
+
+
+ ); +} diff --git a/components/design-scaffolds/index.ts b/components/design-scaffolds/index.ts new file mode 100644 index 0000000..a712f9e --- /dev/null +++ b/components/design-scaffolds/index.ts @@ -0,0 +1,85 @@ +/** + * Design Scaffolds — modular UI previews for each design surface. + * + * Adding a new surface: + * 1. Create components/design-scaffolds/.tsx + * 2. Export your scaffold component(s) from it + * 3. Add the surface ID to SCAFFOLD_REGISTRY and THEME_REGISTRY below + * 4. Add it to ALL_SURFACES in the design page + */ + +export type { ThemeColor } from "./types"; +export { + SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES, + DAISY_THEMES, HEROUI_MARKETING_THEMES, +} from "./types"; + +import { WebAppShadcn, WebAppMantine, WebAppHeroUI, WebAppTremor } from "./web-app"; +import { MarketingDaisy, MarketingHeroUI, MarketingAceternity, MarketingTailwind } from "./marketing"; +import { AdminMantine, AdminShadcn, AdminTremor } from "./admin"; +import { MobileNativewind, MobileGluestack } from "./mobile"; +import { EmailReactEmail } from "./email"; +import { DocsNextra, DocsShadcnCustom } from "./docs"; + +import type { ThemeColor } from "./types"; +import { + SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES, + DAISY_THEMES, HEROUI_MARKETING_THEMES, +} from "./types"; + +// --------------------------------------------------------------------------- +// SCAFFOLD_REGISTRY — surface → library → preview component +// --------------------------------------------------------------------------- + +export const SCAFFOLD_REGISTRY: Record>> = { + "web-app": { + shadcn: WebAppShadcn, + mantine: WebAppMantine, + "hero-ui": WebAppHeroUI, + tremor: WebAppTremor, + }, + "marketing": { + "daisy-ui": MarketingDaisy, + "hero-ui": MarketingHeroUI, + aceternity: MarketingAceternity, + "tailwind-only": MarketingTailwind, + }, + "admin": { + mantine: AdminMantine, + shadcn: AdminShadcn, + tremor: AdminTremor, + }, + "mobile": { + nativewind: MobileNativewind, + gluestack: MobileGluestack, + }, + "email": { + "react-email": EmailReactEmail, + }, + "docs": { + nextra: DocsNextra, + shadcn: DocsShadcnCustom, + }, +}; + +// --------------------------------------------------------------------------- +// THEME_REGISTRY — surface → library → available color themes +// --------------------------------------------------------------------------- + +export const THEME_REGISTRY: Record> = { + "web-app": { + shadcn: SHADCN_THEMES, + mantine: MANTINE_THEMES, + "hero-ui": HEROUI_THEMES, + tremor: TREMOR_THEMES, + }, + "marketing": { + "daisy-ui": DAISY_THEMES, + "hero-ui": HEROUI_MARKETING_THEMES, + }, + "admin": { + mantine: MANTINE_THEMES, + shadcn: SHADCN_THEMES, + tremor: TREMOR_THEMES, + }, +}; diff --git a/components/design-scaffolds/marketing.tsx b/components/design-scaffolds/marketing.tsx new file mode 100644 index 0000000..0d5a5b9 --- /dev/null +++ b/components/design-scaffolds/marketing.tsx @@ -0,0 +1,211 @@ +"use client"; + +import { ThemeColor, DAISY_THEMES, HEROUI_MARKETING_THEMES } from "./types"; + +// Marketing Site surface — public-facing pages: hero, features, pricing, CTA +// Context: prospective users discovering the product, not signed-in users. + +export function MarketingDaisy({ themeColor }: { themeColor?: ThemeColor }) { + const theme = themeColor ?? DAISY_THEMES[0]; + const text = theme.textColor ?? "#f8f8f2"; + const muted = theme.mutedText ?? "rgba(255,255,255,0.5)"; + const card = theme.cardBg ?? "rgba(255,255,255,0.05)"; + const border = theme.borderColor ?? "rgba(255,255,255,0.1)"; + const bg = theme.bg ?? "#1d232a"; + + return ( +
+ {/* Nav */} + + + {/* Hero */} +
+
+ ✦ {theme.label} theme — v2.0 +
+

Build faster,
ship smarter

+

The all-in-one platform that helps teams build, launch, and scale their products.

+
+ + +
+
+ + {/* Feature cards */} +
+ {[{ icon: "⚡", title: "Lightning fast", desc: "Deploy in seconds" }, { icon: "🔒", title: "Secure by default", desc: "Enterprise-grade security" }, { icon: "📈", title: "Scales with you", desc: "From zero to millions" }].map(f => ( +
+
{f.icon}
+

{f.title}

+

{f.desc}

+
+ ))} +
+ + {/* Pricing strip */} +
+
+

Simple pricing

+
+ {[{ plan: "Starter", price: "Free", highlight: false }, { plan: "Pro", price: "$29/mo", highlight: true }, { plan: "Enterprise", price: "Custom", highlight: false }].map(p => ( +
+

{p.plan}

+

{p.price}

+
+ ))} +
+
+
+
+ ); +} + +export function MarketingHeroUI({ themeColor }: { themeColor?: ThemeColor }) { + const theme = themeColor ?? HEROUI_MARKETING_THEMES[0]; + const bg = theme.bg ?? "#fff"; + const text = theme.textColor ?? "#18181b"; + const muted = theme.mutedText ?? "#71717a"; + const card = theme.cardBg ?? "#fff"; + const border = theme.borderColor ?? "#f4f4f5"; + + return ( +
+ + +
+
+ 🚀 {theme.label} theme — v2.0 +
+

Build faster,
ship smarter

+

The all-in-one platform for teams that move fast.

+
+ + +
+ + {/* Dashboard preview card */} +
+
+ {["#ff5f56", "#ffbd2e", "#27c93f"].map(c =>
)} +
+
+
+ {["Revenue $12k", "Users 2.8k", "Growth +24%", "Churn 2.1%"].map((m, i) => ( +
+

{m.split(" ")[0]}

+

{m.split(" ")[1]}

+
+ ))} +
+
+
+
+
+ ); +} + +export function MarketingAceternity() { + return ( +
+ +
+
+
+ ✦ Open source · 12k GitHub stars +
+

+ Build the future
of the web +

+

Beautifully crafted components built with Tailwind CSS and Framer Motion.

+
+ + +
+
+ {["Animated", "Accessible", "Open source"].map((f, i) => ( +
+
+
+
+

{f}

+

Built for production

+
+ ))} +
+
+
+ ); +} + +export function MarketingTailwind() { + return ( +
+ +
+
+ Now in public beta +

The platform
built for scale

+

Everything your team needs to build, deploy, and monitor production applications.

+
+ + +
+
+ {["99.9% uptime SLA", "10ms avg latency", "SOC2 compliant", "GDPR ready"].map(f => ( +
+
+ ✓ +
+ {f} +
+ ))} +
+
+
+
+ ); +} + +export { DAISY_THEMES, HEROUI_MARKETING_THEMES }; diff --git a/components/design-scaffolds/mobile.tsx b/components/design-scaffolds/mobile.tsx new file mode 100644 index 0000000..065768c --- /dev/null +++ b/components/design-scaffolds/mobile.tsx @@ -0,0 +1,93 @@ +"use client"; + +import { ThemeColor } from "./types"; + +function MobileFrame({ children }: { children: React.ReactNode }) { + return ( +
+
+
+
+
+ {children} +
+
+
+ ); +} + +export function MobileNativewind({ themeColor }: { themeColor?: ThemeColor }) { + return ( + +
+
+

Good morning

+

Dashboard

+
+
+
+ {[["Revenue", "$4.2k"], ["Users", "184"]].map(([l, v]) => ( +
+

{l}

+

{v}

+
+ ))} +
+ {["Fix login bug", "Update pricing", "Review PR #42"].map((t, i) => ( +
+
+ {i === 0 && ✓} +
+

{t}

+
+ ))} +
+
+ {["Home", "Projects", "Chat", "Profile"].map((l, i) => ( +
+
+ {l} +
+ ))} +
+
+ + ); +} + +export function MobileGluestack({ themeColor }: { themeColor?: ThemeColor }) { + return ( + +
+
+

Dashboard

+
+
+
+
+ {[["Revenue", "$4.2k", "#1976d2"], ["Users", "184", "#7b1fa2"]].map(([l, v, c]) => ( +
+

{l}

+

{v}

+
+ ))} +
+ {["Fix login bug", "Update pricing", "Review PR #42"].map((t, i) => ( +
+
+

{t}

+
+ ))} +
+
+ {["Home", "Tasks", "Chat", "Profile"].map((l, i) => ( +
+
+ {l} +
+ ))} +
+
+ + ); +} diff --git a/components/design-scaffolds/types.ts b/components/design-scaffolds/types.ts new file mode 100644 index 0000000..26835c0 --- /dev/null +++ b/components/design-scaffolds/types.ts @@ -0,0 +1,83 @@ +"use client"; + +// --------------------------------------------------------------------------- +// Shared types + theme palettes used across all scaffold surfaces +// --------------------------------------------------------------------------- + +export interface ThemeColor { + id: string; + label: string; + primary: string; + primaryFg: string; + activeBg: string; + activeFg: string; + ring: string; + bg?: string; + cardBg?: string; + textColor?: string; + borderColor?: string; + mutedText?: string; +} + +// Shared mock data +export const TABLE_ROWS = [ + { name: "Alice Martin", email: "alice@co.com", role: "Admin", status: "Active", date: "Jan 12" }, + { name: "Ben Walsh", email: "ben@co.com", role: "Member", status: "Pending", date: "Jan 14" }, + { name: "Clara Kim", email: "clara@co.com", role: "Member", status: "Active", date: "Jan 15" }, + { name: "David Osei", email: "david@co.com", role: "Viewer", status: "Inactive", date: "Jan 16" }, +]; + +// --------------------------------------------------------------------------- +// Theme palettes +// --------------------------------------------------------------------------- + +export const SHADCN_THEMES: ThemeColor[] = [ + { id: "neutral", label: "Neutral", primary: "#18181b", primaryFg: "#fff", activeBg: "#f4f4f5", activeFg: "#18181b", ring: "#e4e4e7" }, + { id: "blue", label: "Blue", primary: "#3b82f6", primaryFg: "#fff", activeBg: "#eff6ff", activeFg: "#1d4ed8", ring: "#bfdbfe" }, + { id: "green", label: "Green", primary: "#22c55e", primaryFg: "#fff", activeBg: "#f0fdf4", activeFg: "#15803d", ring: "#bbf7d0" }, + { id: "orange", label: "Orange", primary: "#f97316", primaryFg: "#fff", activeBg: "#fff7ed", activeFg: "#c2410c", ring: "#fed7aa" }, + { id: "violet", label: "Violet", primary: "#8b5cf6", primaryFg: "#fff", activeBg: "#f5f3ff", activeFg: "#6d28d9", ring: "#ddd6fe" }, + { id: "rose", label: "Rose", primary: "#f43f5e", primaryFg: "#fff", activeBg: "#fff1f2", activeFg: "#be123c", ring: "#fecdd3" }, +]; + +export const MANTINE_THEMES: ThemeColor[] = [ + { id: "blue", label: "Blue", primary: "#228be6", primaryFg: "#fff", activeBg: "#e7f5ff", activeFg: "#1971c2", ring: "#a5d8ff" }, + { id: "teal", label: "Teal", primary: "#12b886", primaryFg: "#fff", activeBg: "#e6fcf5", activeFg: "#087f5b", ring: "#96f2d7" }, + { id: "violet", label: "Violet", primary: "#7950f2", primaryFg: "#fff", activeBg: "#f3f0ff", activeFg: "#5f3dc4", ring: "#d0bfff" }, + { id: "red", label: "Red", primary: "#fa5252", primaryFg: "#fff", activeBg: "#fff5f5", activeFg: "#c92a2a", ring: "#ffc9c9" }, + { id: "orange", label: "Orange", primary: "#fd7e14", primaryFg: "#fff", activeBg: "#fff4e6", activeFg: "#d9480f", ring: "#ffd8a8" }, + { id: "green", label: "Green", primary: "#40c057", primaryFg: "#fff", activeBg: "#ebfbee", activeFg: "#2f9e44", ring: "#b2f2bb" }, +]; + +export const HEROUI_THEMES: ThemeColor[] = [ + { id: "violet", label: "Violet", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.3)", activeFg: "#c084fc", ring: "rgba(168,85,247,0.3)" }, + { id: "blue", label: "Blue", primary: "#2563eb", primaryFg: "#fff", activeBg: "rgba(37,99,235,0.3)", activeFg: "#93c5fd", ring: "rgba(59,130,246,0.3)" }, + { id: "rose", label: "Rose", primary: "#e11d48", primaryFg: "#fff", activeBg: "rgba(225,29,72,0.3)", activeFg: "#fda4af", ring: "rgba(244,63,94,0.3)" }, + { id: "green", label: "Green", primary: "#16a34a", primaryFg: "#fff", activeBg: "rgba(22,163,74,0.3)", activeFg: "#86efac", ring: "rgba(34,197,94,0.3)" }, +]; + +export const TREMOR_THEMES: ThemeColor[] = [ + { id: "blue", label: "Blue", primary: "#2563eb", primaryFg: "#fff", activeBg: "#eff6ff", activeFg: "#1d4ed8", ring: "#bfdbfe" }, + { id: "indigo", label: "Indigo", primary: "#4f46e5", primaryFg: "#fff", activeBg: "#eef2ff", activeFg: "#3730a3", ring: "#c7d2fe" }, + { id: "teal", label: "Teal", primary: "#0d9488", primaryFg: "#fff", activeBg: "#f0fdfa", activeFg: "#0f766e", ring: "#99f6e4" }, + { id: "rose", label: "Rose", primary: "#e11d48", primaryFg: "#fff", activeBg: "#fff1f2", activeFg: "#be123c", ring: "#fecdd3" }, +]; + +export const DAISY_THEMES: ThemeColor[] = [ + { id: "dark", label: "Dark", primary: "#793ef9", primaryFg: "#fff", activeBg: "rgba(121,62,249,0.2)", activeFg: "#a78bfa", ring: "#4c1d95", bg: "#1d232a", cardBg: "#191e24", textColor: "#a6adba", borderColor: "#2a323c", mutedText: "#6b7280" }, + { id: "light", label: "Light", primary: "#570df8", primaryFg: "#fff", activeBg: "#f3f0ff", activeFg: "#4c1d95", ring: "#ddd6fe", bg: "#fff", cardBg: "#fff", textColor: "#1f2937", borderColor: "#e5e7eb", mutedText: "#6b7280" }, + { id: "cupcake", label: "Cupcake", primary: "#65c3c8", primaryFg: "#291334", activeBg: "#d9f5f6", activeFg: "#0e6b70", ring: "#a7eaec", bg: "#faf7f5", cardBg: "#fff", textColor: "#291334", borderColor: "#e9e3df", mutedText: "#9ca3af" }, + { id: "synthwave", label: "Synth", primary: "#e779c1", primaryFg: "#2d1b69", activeBg: "rgba(231,121,193,0.2)", activeFg: "#f0abdc", ring: "#701a75", bg: "#1a103c", cardBg: "#221551", textColor: "#e2e8f0", borderColor: "#4c3585", mutedText: "#a78bfa" }, + { id: "dracula", label: "Dracula", primary: "#ff79c6", primaryFg: "#282a36", activeBg: "rgba(255,121,198,0.15)",activeFg: "#ff79c6", ring: "#bd93f9", bg: "#282a36", cardBg: "#343746", textColor: "#f8f8f2", borderColor: "#44475a", mutedText: "#6272a4" }, + { id: "forest", label: "Forest", primary: "#1eb854", primaryFg: "#fff", activeBg: "rgba(30,184,84,0.15)", activeFg: "#1eb854", ring: "#15803d", bg: "#171212", cardBg: "#1d1d1d", textColor: "#d1d5db", borderColor: "#292929", mutedText: "#4b5563" }, + { id: "retro", label: "Retro", primary: "#ef9995", primaryFg: "#282425", activeBg: "#fde8e7", activeFg: "#7f1d1d", ring: "#fca5a5", bg: "#e4d8b4", cardBg: "#f7f0d8", textColor: "#282425", borderColor: "#d4b483", mutedText: "#6b5745" }, + { id: "winter", label: "Winter", primary: "#047aed", primaryFg: "#fff", activeBg: "#e0f0ff", activeFg: "#0369a1", ring: "#bae6fd", bg: "#fff", cardBg: "#f0f9ff", textColor: "#1e3a5f", borderColor: "#bae6fd", mutedText: "#64748b" }, +]; + +export const HEROUI_MARKETING_THEMES: ThemeColor[] = [ + { id: "purple", label: "Purple", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.08)", activeFg: "#7c3aed", ring: "rgba(124,58,237,0.15)", bg: "#fff" }, + { id: "blue", label: "Blue", primary: "#2563eb", primaryFg: "#fff", activeBg: "rgba(37,99,235,0.08)", activeFg: "#2563eb", ring: "rgba(37,99,235,0.15)", bg: "#fff" }, + { id: "teal", label: "Teal", primary: "#0d9488", primaryFg: "#fff", activeBg: "rgba(13,148,136,0.08)", activeFg: "#0d9488", ring: "rgba(13,148,136,0.15)", bg: "#fff" }, + { id: "dark", label: "Dark", primary: "#7c3aed", primaryFg: "#fff", activeBg: "rgba(124,58,237,0.2)", activeFg: "#c084fc", ring: "rgba(124,58,237,0.3)", bg: "#09090b", cardBg: "#18181b", textColor: "#f4f4f5", borderColor: "#27272a", mutedText: "#71717a" }, + { id: "modern", label: "Modern", primary: "#06b6d4", primaryFg: "#fff", activeBg: "rgba(6,182,212,0.08)", activeFg: "#06b6d4", ring: "rgba(6,182,212,0.15)", bg: "#fff" }, +]; diff --git a/components/design-scaffolds/web-app.tsx b/components/design-scaffolds/web-app.tsx new file mode 100644 index 0000000..0b866c2 --- /dev/null +++ b/components/design-scaffolds/web-app.tsx @@ -0,0 +1,403 @@ +"use client"; + +import { useState } from "react"; +import { ThemeColor, TABLE_ROWS, SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES } from "./types"; + +// Web App surface — shows a logged-in SaaS product: Dashboard, Users, Settings +// This is what the user's customers see after signing in. + +type Page = "Dashboard" | "Users" | "Settings"; + +// --------------------------------------------------------------------------- +// Shared layout shell — nav + header are reused across libraries +// --------------------------------------------------------------------------- +function AppShell({ + brand, navBg, navText, navItems, activePage, onNav, headerBg, header, children, +}: { + brand: string; navBg: string; navText: string; + navItems: { label: Page; icon: string }[]; + activePage: Page; onNav: (p: Page) => void; + headerBg: string; header: React.ReactNode; children: React.ReactNode; +}) { + return ( +
+
+
+
+ Acme Inc +
+ {navItems.map(({ label, icon }) => ( + + ))} +
+
+
+ {header} +
+
+ {children} +
+
+
+ ); +} + +// --------------------------------------------------------------------------- +// shadcn/ui +// --------------------------------------------------------------------------- +export function WebAppShadcn({ themeColor }: { themeColor?: ThemeColor }) { + const [page, setPage] = useState("Dashboard"); + const t = themeColor ?? SHADCN_THEMES[0]; + const NAV = [{ label: "Dashboard" as Page, icon: "▦" }, { label: "Users" as Page, icon: "◎" }, { label: "Settings" as Page, icon: "⚙" }]; + + return ( + + {page} +
+
Export
+
+ New
+
+ } + > + {page === "Dashboard" && ( +
+
+ {[["Total Revenue", "$12,400", "+12%"], ["Active Users", "2,841", "+8%"], ["Conversions", "18.2%", "+3%"]].map(([l, v, d]) => ( +
+

{l}

+

{v}

+

{d} from last month

+
+ ))} +
+
+
Revenue
+
+ {[40,60,45,75,65,85,70,90,55,80,75,95].map((h, i) => ( +
+ ))} +
+
+
+ {TABLE_ROWS.slice(0, 3).map(r => ( +
+
+
+

{r.name}

+

{r.email}

+
+ {r.status} +
+ ))} +
+
+ )} + {page === "Users" && ( +
+
+
+ Team members +
+ +
Invite
+
+
+ {TABLE_ROWS.map(r => ( +
+
+
+

{r.name}

+

{r.email}

+
+ {r.role} + {r.status} + {r.date} +
+ ))} +
+
+ )} + {page === "Settings" && ( +
+
+
General
+
+ {[["Workspace name", "Acme Inc"], ["Slug", "acme-inc"], ["Email", "admin@acme.com"]].map(([l, v]) => ( +
+ + +
+ ))} +
Save changes
+
+
+
+ )} + + ); +} + +// --------------------------------------------------------------------------- +// Mantine +// --------------------------------------------------------------------------- +export function WebAppMantine({ themeColor }: { themeColor?: ThemeColor }) { + const [page, setPage] = useState("Dashboard"); + const t = themeColor ?? MANTINE_THEMES[0]; + const NAV = [{ label: "Dashboard" as Page, icon: "▦" }, { label: "Users" as Page, icon: "◎" }, { label: "Settings" as Page, icon: "⚙" }]; + + return ( + + {page} +
+ + +
+ } + > + {page === "Dashboard" && ( +
+
+ {[["Total Revenue", "$12,400", "#2f9e44"], ["Active Users", "2,841", "#228be6"], ["Conversions", "18.2%", "#e67700"]].map(([l, v, c]) => ( +
+

{l}

+

{v}

+

↑ trending up

+
+ ))} +
+
+
Monthly revenue
+
+ {[40,60,45,75,65,85,70,90,55,80,75,95].map((h, i) => ( +
+ ))} +
+
+
+ {TABLE_ROWS.slice(0, 3).map(r => ( +
+
+
+

{r.name}

+

{r.email}

+
+ {r.status} +
+ ))} +
+
+ )} + {page === "Users" && ( +
+
+
+ Team members + +
+ {TABLE_ROWS.map(r => ( +
+
+
+

{r.name}

+

{r.email}

+
+ {r.role} + {r.status} +
+ ))} +
+
+ )} + {page === "Settings" && ( +
+
+
Workspace
+
+ {[["Name", "Acme Inc"], ["Slug", "acme-inc"], ["Email", "admin@acme.com"]].map(([l, v]) => ( +
+ + +
+ ))} + +
+
+
+ )} + + ); +} + +// --------------------------------------------------------------------------- +// HeroUI +// --------------------------------------------------------------------------- +export function WebAppHeroUI({ themeColor }: { themeColor?: ThemeColor }) { + const [page, setPage] = useState("Dashboard"); + const t = themeColor ?? HEROUI_THEMES[0]; + const NAV = [{ label: "Dashboard" as Page, icon: "▦" }, { label: "Users" as Page, icon: "◎" }, { label: "Settings" as Page, icon: "⚙" }]; + + return ( + + {page} +
+ + +
+ } + > + {page === "Dashboard" && ( +
+
+ {[["Revenue", "$12,400"], ["Users", "2,841"], ["Conversion", "18.2%"]].map(([l, v]) => ( +
+

{l}

+

{v}

+

↑ this month

+
+ ))} +
+
+
+ {[40,60,45,75,65,85,70,90,55,80,75,95].map((h, i) => ( +
+ ))} +
+
+
+ )} + {page === "Users" && ( +
+
+
+ Team + +
+ {TABLE_ROWS.map(r => ( +
+
+
+

{r.name}

+

{r.email}

+
+ {r.role} + {r.status} +
+ ))} +
+
+ )} + {page === "Settings" && ( +
+
+
Profile
+
+ {[["Workspace", "Acme Inc"], ["Slug", "acme-inc"], ["Email", "admin@acme.com"]].map(([l, v]) => ( +
+ + +
+ ))} + +
+
+
+ )} + + ); +} + +// --------------------------------------------------------------------------- +// Tremor (analytics/data-heavy) +// --------------------------------------------------------------------------- +export function WebAppTremor({ themeColor }: { themeColor?: ThemeColor }) { + const [page, setPage] = useState("Dashboard"); + const t = themeColor ?? TREMOR_THEMES[0]; + const NAV = [{ label: "Dashboard" as Page, icon: "▦" }, { label: "Users" as Page, icon: "◎" }, { label: "Settings" as Page, icon: "⚙" }]; + + return ( + + {page} + + } + > + {page === "Dashboard" && ( +
+
+ {[{ l: "Revenue", v: "$12,400", c: t.primary, pct: 65 }, { l: "Users", v: "2,841", c: "#7c3aed", pct: 48 }, { l: "Conversion", v: "18.2%", c: "#059669", pct: 72 }].map(item => ( +
+

{item.l}

+

{item.v}

+
+
+
+
+ ))} +
+
+

Revenue over time

+
+ {[40,65,55,80,70,90,75,85,60,95,80,100].map((h, i) => ( +
+ ))} +
+
+
+ )} + {page === "Users" && ( +
+
+
+ All users + +
+ {TABLE_ROWS.map(r => ( +
+ {r.name} + {r.role} +
+
+ {r.status} +
+
+ ))} +
+
+ )} + {page === "Settings" && ( +
+
+

Workspace

+
+ {[["Name", "Acme Inc"], ["Domain", "acme.com"], ["Timezone", "UTC-8"]].map(([l, v]) => ( +
+ + +
+ ))} + +
+
+
+ )} + + ); +} + +export { SHADCN_THEMES, MANTINE_THEMES, HEROUI_THEMES, TREMOR_THEMES };