{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "matrix-swot-analysis", "title": "Matrix Swot Analysis", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/matrix-swot-analysis/MatrixSwotAnalysis.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertTriangle,\n Calendar,\n Check,\n Clock,\n Download,\n Layers,\n Plus,\n Share2,\n ShieldAlert,\n ShieldCheck,\n Trash2,\n TrendingUp,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\n\nexport interface SwotItem {\n id: string\n title: string\n description: string\n impact: 'high' | 'medium' | 'low'\n tag: string\n}\n\nexport interface StrategicInitiative {\n id: string\n title: string\n description: string\n strategyType: 'SO' | 'WO' | 'ST' | 'WT'\n strategyLabel: string\n priority: 'Critical' | 'High' | 'Strategic'\n timeframe: string\n targetMetric: string\n}\n\nexport interface MatrixSwotAnalysisProps extends React.HTMLAttributes {\n title?: string\n project?: string\n lastUpdated?: string\n initialStrengths?: SwotItem[]\n initialWeaknesses?: SwotItem[]\n initialOpportunities?: SwotItem[]\n initialThreats?: SwotItem[]\n initiatives?: StrategicInitiative[]\n readonly?: boolean\n}\n\nconst defaultStrengths: SwotItem[] = [\n {\n id: 's-1',\n title: 'Zero npm dependency overhead',\n description:\n 'Components are copied directly into consumer project codebases, eliminating semver dependency locks, version skew, and transitive package bloat.',\n impact: 'high',\n tag: 'Core Architecture',\n },\n {\n id: 's-2',\n title: '100% code ownership for consumers',\n description:\n 'Engineering teams retain complete control over markup, styles, accessibility props, and internal behaviors with zero upstream constraints.',\n impact: 'high',\n tag: 'Developer Autonomy',\n },\n {\n id: 's-3',\n title: 'Dual-framework Vue & React parity',\n description:\n 'Strict visual, token, and functional symmetry between Vue 3 (Reka UI) and React (Radix UI) enables cross-stack design system alignment.',\n impact: 'high',\n tag: 'Market Breadth',\n },\n {\n id: 's-4',\n title: 'Tailwind v4 OKLCH token architecture',\n description:\n 'CSS-first theme configuration using semantic surface variables, calibrated dark-mode layering, and WCAG AA compliant contrast ratios.',\n impact: 'medium',\n tag: 'Design System',\n },\n]\n\nconst defaultWeaknesses: SwotItem[] = [\n {\n id: 'w-1',\n title: 'Manual upgrade path without semver',\n description:\n 'Consuming codebases must manually pull code diffs or re-execute CLI add commands when library enhancements or bug fixes are published.',\n impact: 'high',\n tag: 'Maintenance Model',\n },\n {\n id: 'w-2',\n title: 'Initial learning curve for monorepos',\n description:\n 'Junior developers accustomed to single-command npm package installs may face an initial cognitive hurdle managing raw unbundled components.',\n impact: 'medium',\n tag: 'Developer DX',\n },\n {\n id: 'w-3',\n title: 'Build time for 1,300+ SSG pages',\n description:\n 'Synthesizing static island previews, AST code extraction, and multi-format LLM documentation across dual registries requires high memory in CI.',\n impact: 'medium',\n tag: 'Tooling Scale',\n },\n]\n\nconst defaultOpportunities: SwotItem[] = [\n {\n id: 'o-1',\n title: 'AI Copilot workflows demanding raw source code',\n description:\n 'LLM coding assistants (Claude, Cursor, Copilot) perform substantially better when refactoring transparent local SFCs than navigating opaque compiled dependencies.',\n impact: 'high',\n tag: 'AI Ergonomics',\n },\n {\n id: 'o-2',\n title: 'Enterprise design system white-labeling',\n description:\n 'B2B organizations seeking unbranded, custom-styled design systems can adopt UIPKGE as their modular, open-source architectural baseline.',\n impact: 'high',\n tag: 'Enterprise B2B',\n },\n {\n id: 'o-3',\n title: 'E-Commerce and Healthcare template verticals',\n description:\n 'Surging industry appetite for pre-built reference architectures (HRMS, Hospital Management, Logistics tracking) powered by composable blocks.',\n impact: 'high',\n tag: 'Vertical Growth',\n },\n {\n id: 'o-4',\n title: 'Community contributions of domain blocks',\n description:\n 'Open-source contributors can rapidly publish specialized workflow blocks (radar charts, KYC wizards, audit logs) without semver packaging bottlenecks.',\n impact: 'medium',\n tag: 'Community',\n },\n]\n\nconst defaultThreats: SwotItem[] = [\n {\n id: 't-1',\n title: 'Official shadcn expanding into Vue ecosystem',\n description:\n 'Potential first-party Vue support by upstream shadcn could consolidate developer attention away from independent unbundled registries.',\n impact: 'high',\n tag: 'Competitive Risk',\n },\n {\n id: 't-2',\n title: 'Upstream Reka UI headless breaking changes',\n description:\n 'Substantial architectural shifts or breaking release cycles in upstream headless libraries require immediate parity synchronization.',\n impact: 'high',\n tag: 'Upstream Drift',\n },\n {\n id: 't-3',\n title: 'Browser CSS specification shifts',\n description:\n 'Rapid evolution in CSS @scope, anchor positioning, and native light-dark() CSS functions may require recurring baseline refactoring.',\n impact: 'medium',\n tag: 'Web Standards',\n },\n]\n\nconst defaultInitiatives: StrategicInitiative[] = [\n {\n id: 'init-1',\n title: 'Automate Upstream Sync & Breaking Change Detection',\n description:\n 'Implement automated CI regression monitoring against Reka UI and upstream shadcn tokens to maintain 100% runtime compatibility without breaking consumer projects.',\n strategyType: 'SO',\n strategyLabel: 'SO Strategy (Strengths × Opportunities)',\n priority: 'Critical',\n timeframe: 'Q4 2026',\n targetMetric: '< 24h Upstream Parity Turnaround',\n },\n {\n id: 'init-2',\n title: 'AI-Native Context & CLI Smart Upgrade Engine',\n description:\n 'Ship an intelligent CLI diff command and fine-tuned llms.txt vector context to let AI coding agents auto-patch and upgrade local consumer components directly.',\n strategyType: 'WO',\n strategyLabel: 'WO Strategy (Weaknesses × Opportunities)',\n priority: 'High',\n timeframe: 'Q4 2026',\n targetMetric: 'Zero-Friction AST Upgrade Patches',\n },\n {\n id: 'init-3',\n title: 'Curated Vertical Template Packs & Enterprise Baseline',\n description:\n 'Deliver production-grade Nuxt 4 and Next.js vertical boilerplate templates (HRMS, HMS, Logistics) to eliminate monorepo onboarding friction for enterprise builders.',\n strategyType: 'ST',\n strategyLabel: 'ST Strategy (Strengths × Threats)',\n priority: 'Strategic',\n timeframe: 'Q1 2027',\n targetMetric: '4 Turnkey Vertical Reference Apps',\n },\n]\n\nexport function MatrixSwotAnalysis({\n title = 'SWOT Strategic Analysis Canvas',\n project = 'UIPKGE Unbundled UI Registry Strategy · Q3 2026',\n lastUpdated = 'Aug 21, 2026',\n initialStrengths = defaultStrengths,\n initialWeaknesses = defaultWeaknesses,\n initialOpportunities = defaultOpportunities,\n initialThreats = defaultThreats,\n initiatives = defaultInitiatives,\n readonly = false,\n className,\n ...props\n}: MatrixSwotAnalysisProps) {\n const [strengths, setStrengths] = React.useState(initialStrengths)\n const [weaknesses, setWeaknesses] = React.useState(initialWeaknesses)\n const [opportunities, setOpportunities] = React.useState(initialOpportunities)\n const [threats, setThreats] = React.useState(initialThreats)\n\n const [inputStrength, setInputStrength] = React.useState('')\n const [inputWeakness, setInputWeakness] = React.useState('')\n const [inputOpportunity, setInputOpportunity] = React.useState('')\n const [inputThreat, setInputThreat] = React.useState('')\n\n const [isCopied, setIsCopied] = React.useState(false)\n const [isExporting, setIsExporting] = React.useState(false)\n\n const totalCards = strengths.length + weaknesses.length + opportunities.length + threats.length\n\n function handleAddStrength(e: React.FormEvent) {\n e.preventDefault()\n const text = inputStrength.trim()\n if (!text) return\n setStrengths((prev) => [\n ...prev,\n {\n id: `s-${Date.now()}`,\n title: text,\n description: 'Custom strategic strength added during canvas session.',\n impact: 'high',\n tag: 'Internal Strategic Advantage',\n },\n ])\n setInputStrength('')\n }\n\n function handleRemoveStrength(id: string) {\n setStrengths((prev) => prev.filter((item) => item.id !== id))\n }\n\n function handleAddWeakness(e: React.FormEvent) {\n e.preventDefault()\n const text = inputWeakness.trim()\n if (!text) return\n setWeaknesses((prev) => [\n ...prev,\n {\n id: `w-${Date.now()}`,\n title: text,\n description: 'Custom strategic vulnerability identified for remediation.',\n impact: 'medium',\n tag: 'Internal Remediation',\n },\n ])\n setInputWeakness('')\n }\n\n function handleRemoveWeakness(id: string) {\n setWeaknesses((prev) => prev.filter((item) => item.id !== id))\n }\n\n function handleAddOpportunity(e: React.FormEvent) {\n e.preventDefault()\n const text = inputOpportunity.trim()\n if (!text) return\n setOpportunities((prev) => [\n ...prev,\n {\n id: `o-${Date.now()}`,\n title: text,\n description: 'External market dynamic or technological growth tailwind.',\n impact: 'high',\n tag: 'External Opportunity',\n },\n ])\n setInputOpportunity('')\n }\n\n function handleRemoveOpportunity(id: string) {\n setOpportunities((prev) => prev.filter((item) => item.id !== id))\n }\n\n function handleAddThreat(e: React.FormEvent) {\n e.preventDefault()\n const text = inputThreat.trim()\n if (!text) return\n setThreats((prev) => [\n ...prev,\n {\n id: `t-${Date.now()}`,\n title: text,\n description: 'External industry risk factor requiring proactive defensive mitigation.',\n impact: 'high',\n tag: 'External Threat',\n },\n ])\n setInputThreat('')\n }\n\n function handleRemoveThreat(id: string) {\n setThreats((prev) => prev.filter((item) => item.id !== id))\n }\n\n function handleShare() {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(window.location.href)\n setIsCopied(true)\n setTimeout(() => setIsCopied(false), 2000)\n }\n }\n\n function handleExportPdf() {\n setIsExporting(true)\n setTimeout(() => setIsExporting(false), 1500)\n }\n\n return (\n
\n {/* Header Surface */}\n
\n
\n
\n

{title}

\n \n 2×2 TOWS Matrix\n \n \n {totalCards} Strategic Factors\n \n
\n\n
\n
\n \n {project}\n
\n ·\n
\n \n Updated {lastUpdated}\n
\n
\n
\n\n {/* Action Toolbar */}\n
\n \n {!isExporting ? : }\n {isExporting ? 'Generating PDF...' : 'Export Canvas PDF'}\n \n\n \n
\n
\n\n {/* 2x2 Matrix Axis Guide Legend */}\n
\n
\n
\n \n Internal Attributes\n
\n \n Helpful (+)\n \n
\n\n
\n
\n \n Internal Attributes\n
\n \n Harmful (−)\n \n
\n\n
\n
\n \n External Dynamics\n
\n \n Helpful (+)\n \n
\n\n
\n
\n \n External Dynamics\n
\n \n Harmful (−)\n \n
\n
\n\n {/* 2x2 SWOT Grid */}\n
\n {/* QUADRANT 1: STRENGTHS (Internal / Positive) */}\n \n \n
\n
\n
\n \n
\n
\n
\n Strengths\n \n {strengths.length}\n \n
\n \n Internal attributes & distinct technical capabilities\n \n
\n
\n\n
\n
\n
\n \n\n \n {strengths.map((item) => (\n \n
\n
\n
\n

{item.title}

\n \n {item.tag}\n \n
\n

{item.description}

\n
\n\n {!readonly && (\n handleRemoveStrength(item.id)}\n >\n \n \n )}\n
\n
\n ))}\n\n {strengths.length === 0 && (\n
\n No strength items listed. Add a core advantage below.\n
\n )}\n \n\n {!readonly && (\n \n
\n setInputStrength(e.target.value)}\n />\n \n \n Add\n \n \n
\n )}\n \n\n {/* QUADRANT 2: WEAKNESSES (Internal / Negative) */}\n \n \n
\n
\n
\n \n
\n
\n
\n Weaknesses\n \n {weaknesses.length}\n \n
\n \n Internal limitations & operational friction points\n \n
\n
\n\n
\n
\n
\n \n\n \n {weaknesses.map((item) => (\n \n
\n
\n
\n

{item.title}

\n \n {item.tag}\n \n
\n

{item.description}

\n
\n\n {!readonly && (\n handleRemoveWeakness(item.id)}\n >\n \n \n )}\n
\n
\n ))}\n\n {weaknesses.length === 0 && (\n
\n No weakness items listed. Add an area for improvement below.\n
\n )}\n \n\n {!readonly && (\n \n
\n setInputWeakness(e.target.value)}\n />\n \n \n Add\n \n \n
\n )}\n \n\n {/* QUADRANT 3: OPPORTUNITIES (External / Positive) */}\n \n \n
\n
\n
\n \n
\n
\n
\n Opportunities\n \n {opportunities.length}\n \n
\n \n External tailwinds & strategic expansion opportunities\n \n
\n
\n\n
\n
\n
\n \n\n \n {opportunities.map((item) => (\n \n
\n
\n
\n

{item.title}

\n \n {item.tag}\n \n
\n

{item.description}

\n
\n\n {!readonly && (\n handleRemoveOpportunity(item.id)}\n >\n \n \n )}\n
\n \n ))}\n\n {opportunities.length === 0 && (\n
\n No opportunity items listed. Add a market growth vector below.\n
\n )}\n \n\n {!readonly && (\n \n
\n setInputOpportunity(e.target.value)}\n />\n \n \n Add\n \n \n
\n )}\n \n\n {/* QUADRANT 4: THREATS (External / Negative) */}\n \n \n
\n
\n
\n \n
\n
\n
\n Threats\n \n {threats.length}\n \n
\n \n External risks, competitive forces & ecosystem shifts\n \n
\n
\n\n
\n \n \n Negative\n \n
\n
\n \n\n \n {threats.map((item) => (\n \n
\n
\n
\n

{item.title}

\n \n {item.tag}\n \n
\n

{item.description}

\n
\n\n {!readonly && (\n handleRemoveThreat(item.id)}\n >\n \n \n )}\n
\n \n ))}\n\n {threats.length === 0 && (\n
\n No threat items listed. Add an external risk factor below.\n
\n )}\n \n\n {!readonly && (\n \n
\n setInputThreat(e.target.value)}\n />\n \n \n Add\n \n \n
\n )}\n \n \n\n {/* Strategic Synthesis & Key Next Actions Card (TOWS Strategy) */}\n \n \n
\n
\n
\n \n \n Strategic Synthesis & Key Next Actions\n \n
\n \n Actionable strategic initiatives bridging internal capabilities with external market dynamics (TOWS\n matrix formulation).\n \n
\n\n \n {initiatives.length} Active Initiatives\n \n
\n \n\n \n
\n {initiatives.map((initiative) => (\n \n
\n
\n \n {initiative.strategyType} Strategy\n \n\n \n {initiative.priority}\n \n
\n\n
\n

{initiative.title}

\n

{initiative.description}

\n
\n
\n\n
\n
\n \n {initiative.timeframe}\n
\n \n {initiative.targetMetric}\n \n
\n
\n ))}\n \n \n \n \n )\n}\n\nexport default MatrixSwotAnalysis\n", "type": "registry:block", "target": "~/components/blocks/MatrixSwotAnalysis.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json" ], "description": "Strategic planning 2x2 SWOT analysis matrix (Strengths, Weaknesses, Opportunities, Threats) with dynamic card management, quadrant counters, TOWS strategic initiatives, and PDF/share toolbar.", "categories": [ "productivity", "dashboard", "app", "data" ] }