diff --git a/app/[workspace]/project/[projectId]/design/page.tsx b/app/[workspace]/project/[projectId]/design/page.tsx index 69b43e3..5c37b86 100644 --- a/app/[workspace]/project/[projectId]/design/page.tsx +++ b/app/[workspace]/project/[projectId]/design/page.tsx @@ -22,6 +22,11 @@ interface Theme { description: string; tags: string[]; url: string; + // Richer metadata shown in the capability card picker + highlights?: string[]; // 3 key things this library does well + hasTemplates?: boolean; // pre-built page templates available + bestFor?: string; // one-line "best for" summary + darkFirst?: boolean; // dark-mode-first aesthetic } const ALL_SURFACES: Surface[] = [ @@ -31,10 +36,37 @@ const ALL_SURFACES: Surface[] = [ icon: "⬡", description: "The core product users log into — dashboards, features, settings", themes: [ - { id: "shadcn", name: "shadcn/ui", description: "Copy-paste components on Radix primitives. You own the code, fully customisable.", tags: ["Tailwind", "Radix", "Copy-paste"], url: "https://ui.shadcn.com" }, - { id: "mantine", name: "Mantine", description: "100+ components with hooks, forms, charts. Best for data-heavy apps.", tags: ["React", "Charts", "Forms"], url: "https://mantine.dev" }, - { id: "hero-ui", name: "HeroUI", description: "Beautiful, accessible components with smooth animations and dark mode.", tags: ["Tailwind", "Animations", "Accessible"], url: "https://heroui.com" }, - { id: "tremor", name: "Tremor", description: "Dashboard components — charts, KPIs, tables — designed for analytics UIs.", tags: ["Charts", "Dashboard", "Analytics"], url: "https://tremor.so" }, + { + id: "shadcn", name: "shadcn/ui", url: "https://ui.shadcn.com", + description: "Copy-paste components on Radix primitives. You own the code.", + tags: ["Tailwind", "Radix", "Copy-paste"], + bestFor: "Most SaaS apps — you control every pixel", + highlights: ["Code lives in your repo, not node_modules", "Radix primitives for full accessibility", "New York & Default variants built in"], + hasTemplates: true, + }, + { + id: "mantine", name: "Mantine", url: "https://mantine.dev", + description: "100+ fully featured components including charts, forms, date pickers.", + tags: ["React", "Charts", "Forms", "Hooks"], + bestFor: "Data-heavy apps that need charts and complex forms", + highlights: ["Built-in charts, tables, and data grid", "60+ hooks (useForm, useLocalStorage, etc.)", "Date/time pickers, rich text editor included"], + }, + { + id: "hero-ui", name: "HeroUI", url: "https://heroui.com", + description: "Smooth animations, blur effects, and dark mode out of the box.", + tags: ["Tailwind", "Framer Motion", "Dark mode"], + bestFor: "Modern SaaS with polished animations", + highlights: ["Blur backdrop navigation built in", "Framer Motion on every interaction", "Dark mode first, light mode included"], + hasTemplates: true, + }, + { + id: "tremor", name: "Tremor", url: "https://tremor.so", + description: "Purpose-built dashboard components — charts, KPIs, tables.", + tags: ["Charts", "Dashboard", "Analytics"], + bestFor: "Analytics products and internal dashboards", + highlights: ["Chart library built in (area, bar, donut)", "KPI cards, progress bars, trackers", "Area chart with tooltip out of the box"], + hasTemplates: true, + }, ], }, { @@ -43,10 +75,37 @@ const ALL_SURFACES: Surface[] = [ icon: "◎", description: "Public-facing landing page, blog, pricing — brand expression and conversion", themes: [ - { id: "daisy-ui", name: "DaisyUI", description: "Tailwind plugin with 48 built-in themes. Fastest path to a beautiful site.", tags: ["Tailwind", "Themes", "Plugin"], url: "https://daisyui.com" }, - { id: "hero-ui", name: "HeroUI", description: "Beautiful components with gradients and smooth animations.", tags: ["Tailwind", "Animations", "Modern"], url: "https://heroui.com" }, - { id: "aceternity", name: "Aceternity UI", description: "Animated, visually striking components for premium landing pages.", tags: ["Animations", "Dark", "Premium"], url: "https://ui.aceternity.com" }, - { id: "tailwind-only", name: "Tailwind only", description: "No component library — full creative control with pure Tailwind CSS.", tags: ["Custom", "Flexible", "Minimal"], url: "https://tailwindcss.com" }, + { + id: "daisy-ui", name: "DaisyUI", url: "https://daisyui.com", + description: "Tailwind plugin with 48 built-in themes — swap the entire look with one word.", + tags: ["Tailwind", "48 Themes", "Plugin"], + bestFor: "Teams that want theme variety without custom CSS", + highlights: ["48 built-in themes (dark, cupcake, synthwave, cyberpunk…)", "One-line theme switching: data-theme=\"synthwave\"", "Hero, Features, Pricing, CTA, Footer all included"], + hasTemplates: true, + }, + { + id: "hero-ui", name: "HeroUI", url: "https://heroui.com", + description: "Gradient buttons, animated badges, blur nav — high-end SaaS look.", + tags: ["Tailwind", "Framer Motion", "Gradients"], + bestFor: "Modern SaaS landing page with a premium feel", + highlights: ["Gradient & glassmorphism components", "Animated feature cards with hover depth", "Navbar with blur-backdrop effect"], + hasTemplates: true, + }, + { + id: "aceternity", name: "Aceternity UI", url: "https://ui.aceternity.com", + description: "Signature background effects — beams, meteors, sparkles, wavy gradients.", + tags: ["Framer Motion", "Background FX", "Dark-first"], + bestFor: "Premium, visually striking launch pages", + highlights: ["Background Beams, Meteors, Sparkles effects", "Infinite moving cards, Lamp effect, Wavy BG", "Text generate & typewriter animations"], + darkFirst: true, + }, + { + id: "tailwind-only", name: "Tailwind only", url: "https://tailwindcss.com", + description: "Zero component library. Full creative control — design exactly what you want.", + tags: ["Custom", "Zero constraints", "Typography-first"], + bestFor: "Strong design opinions, no library overhead", + highlights: ["No component library constraints", "Typography-first editorial layouts", "Fastest builds, smallest bundle"], + }, ], }, { @@ -55,9 +114,28 @@ const ALL_SURFACES: Surface[] = [ icon: "◫", description: "Internal tool for managing your business — users, support, billing, analytics", themes: [ - { id: "mantine", name: "Mantine", description: "The best choice for admin — comprehensive tables, forms, and data components.", tags: ["Tables", "Forms", "Charts"], url: "https://mantine.dev" }, - { id: "shadcn", name: "shadcn/ui", description: "Clean, neutral components. Great if you want the admin to match the main app.", tags: ["Tailwind", "Consistent", "Clean"], url: "https://ui.shadcn.com" }, - { id: "tremor", name: "Tremor", description: "Analytics-first — built for KPI dashboards, charts, and data tables.", tags: ["Analytics", "Charts", "KPIs"], url: "https://tremor.so" }, + { + id: "mantine", name: "Mantine", url: "https://mantine.dev", + description: "Comprehensive component set built for admin — tables, forms, charts.", + tags: ["Tables", "Forms", "Charts", "Date picker"], + bestFor: "Feature-rich internal tools", + highlights: ["Data grid with sorting, filtering, pagination", "Complex form handling with validation", "Stats, charts, and KPI components"], + }, + { + id: "shadcn", name: "shadcn/ui", url: "https://ui.shadcn.com", + description: "Clean components that match your main app if it uses shadcn.", + tags: ["Tailwind", "Consistent", "Copy-paste"], + bestFor: "Keeping admin and app visually consistent", + highlights: ["Matches the web app if using shadcn", "Data table with react-table built in", "Command palette, sheets, dialogs"], + }, + { + id: "tremor", name: "Tremor", url: "https://tremor.so", + description: "Analytics-first admin — built for KPI dashboards and data tables.", + tags: ["Analytics", "Charts", "KPIs"], + bestFor: "Analytics-heavy operations dashboards", + highlights: ["KPI cards, area charts, bar lists built in", "Data table with search + filter", "Progress bars, badges, trackers"], + hasTemplates: true, + }, ], }, { @@ -66,8 +144,20 @@ const ALL_SURFACES: Surface[] = [ icon: "▢", description: "iOS and Android companion app — touch-first, native feel", themes: [ - { id: "nativewind", name: "NativeWind", description: "Use Tailwind CSS in React Native. Consistent style across web and mobile.", tags: ["Tailwind", "React Native", "Expo"], url: "https://nativewind.dev" }, - { id: "gluestack", name: "Gluestack UI", description: "Universal components for React Native — accessible, well-tested, comprehensive.", tags: ["Universal", "Accessible", "Expo"], url: "https://gluestack.io" }, + { + id: "nativewind", name: "NativeWind", url: "https://nativewind.dev", + description: "Use Tailwind classes in React Native. Consistent web + mobile styling.", + tags: ["Tailwind", "React Native", "Expo"], + bestFor: "Teams already using Tailwind on web", + highlights: ["Same Tailwind classes on web and mobile", "Expo compatible, dark mode support", "Platform-specific variants built in"], + }, + { + id: "gluestack", name: "Gluestack UI", url: "https://gluestack.io", + description: "Universal component library for React Native with accessibility baked in.", + tags: ["Universal", "Accessible", "Expo"], + bestFor: "Comprehensive native component coverage", + highlights: ["50+ components (ActionSheet, Toast, FAB…)", "ARIA accessible out of the box", "Works on iOS, Android, and web"], + }, ], }, { @@ -76,7 +166,14 @@ const ALL_SURFACES: Surface[] = [ icon: "✉", description: "Transactional and marketing emails — welcome, billing, notifications", themes: [ - { id: "react-email", name: "React Email", description: "Build emails with React components. Works with any email provider.", tags: ["React", "Resend", "Cross-client"], url: "https://react.email" }, + { + id: "react-email", name: "React Email", url: "https://react.email", + description: "Build beautiful emails with React. Test across 90+ email clients.", + tags: ["React", "Resend", "Cross-client", "Preview"], + bestFor: "Teams wanting React-based email workflows", + highlights: ["Live preview across Gmail, Outlook, Apple Mail", "Works with Resend, SendGrid, Postmark", "50+ pre-built email components"], + hasTemplates: true, + }, ], }, { @@ -85,8 +182,21 @@ const ALL_SURFACES: Surface[] = [ icon: "☰", description: "Documentation, knowledge base, or blog for your product", themes: [ - { id: "nextra", name: "Nextra", description: "Next.js-based docs site. Markdown-first, fast, with great search.", tags: ["Next.js", "Markdown", "Search"], url: "https://nextra.site" }, - { id: "shadcn", name: "shadcn/ui + custom", description: "Build a fully custom docs site that matches your product exactly.", tags: ["Custom", "Tailwind", "Flexible"], url: "https://ui.shadcn.com" }, + { + id: "nextra", name: "Nextra", url: "https://nextra.site", + description: "Next.js-based docs with built-in search, MDX, and versioning.", + tags: ["Next.js", "MDX", "Search", "Dark mode"], + bestFor: "Developer-facing documentation", + highlights: ["Full-text search out of the box (Pagefind)", "MDX — React components inside Markdown", "Auto-generated sidebar from file structure"], + hasTemplates: true, + }, + { + id: "shadcn", name: "shadcn/ui + custom", url: "https://ui.shadcn.com", + description: "Fully custom docs site that matches your product exactly.", + tags: ["Custom", "Tailwind", "Flexible"], + bestFor: "Brand-consistent docs that stand out", + highlights: ["Matches your app's exact design language", "Full control over layout and navigation", "Blog, changelog, and API ref in one"], + }, ], }, ]; @@ -170,39 +280,99 @@ function SurfaceSection({ {/* Controls below render */}
- {/* Library tabs */} -
+ {/* Library capability cards */} +
{surface.themes.map(theme => { const isActive = theme.id === previewId; const isThisLocked = theme.id === lockedThemeId; + const dimmed = isLocked && !isThisLocked; return ( ); })}
- {/* Color swatches */} + {/* Color swatches — shown below the cards when available */} {availableColorThemes.length > 0 && (
- Theme + Colour
{availableColorThemes.map(ct => (