{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feature-matrix-table-dense", "title": "Feature Matrix Table Dense", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/feature-matrix-table-dense/FeatureMatrixTableDense.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, CheckCircle2, ChevronDown, ChevronRight, Filter, Minus, Search } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface MatrixFeature {\n name: string\n description: string\n uipkge: boolean | string\n npmMonolith: boolean | string\n inHouse: boolean | string\n}\n\nexport interface MatrixCategory {\n id: string\n title: string\n features: MatrixFeature[]\n}\n\nexport interface FeatureMatrixTableDenseProps {\n title?: string\n description?: string\n categories?: MatrixCategory[]\n className?: string\n}\n\nconst DEFAULT_CATEGORIES: MatrixCategory[] = [\n {\n id: 'architecture',\n title: 'Architecture & Runtime Ownership',\n features: [\n {\n name: 'Zero NPM Runtime Dependency',\n description: 'Source code copied directly into your repository with 100% ownership.',\n uipkge: true,\n npmMonolith: false,\n inHouse: true,\n },\n {\n name: 'Dual Framework 1:1 Parity',\n description: 'Synchronized Vue 3.5 and React 19 primitives with identical token bindings.',\n uipkge: true,\n npmMonolith: false,\n inHouse: 'High Cost',\n },\n {\n name: 'Deterministic Tree-Shaking',\n description: 'Zero dead code in final production bundles; only imported components compile.',\n uipkge: true,\n npmMonolith: 'Partial',\n inHouse: true,\n },\n {\n name: 'Tailwind CSS v4 Native Tokens',\n description: 'Direct @theme inline OKLCH bindings without legacy tailwind.config.js overhead.',\n uipkge: true,\n npmMonolith: false,\n inHouse: 'Manual',\n },\n ],\n },\n {\n id: 'developer-experience',\n title: 'Developer Experience & Tooling',\n features: [\n {\n name: 'Headless Primitive Foundation',\n description: 'Powered by battle-tested Reka UI and Radix UI accessible state machines.',\n uipkge: true,\n npmMonolith: 'Proprietary',\n inHouse: 'Custom',\n },\n {\n name: 'CLI Direct Add Workflow',\n description: 'Install via npx shadcn add @uipkge/ with automated dependency resolution.',\n uipkge: true,\n npmMonolith: false,\n inHouse: false,\n },\n {\n name: 'Automated Parity Check Suite',\n description: 'Built-in AST parity verification scripts guarding against framework drift.',\n uipkge: true,\n npmMonolith: false,\n inHouse: false,\n },\n ],\n },\n {\n id: 'enterprise',\n title: 'Enterprise & Security Compliance',\n features: [\n {\n name: 'Zero Supply-Chain Vulnerabilities',\n description: 'No third-party registry packages or compromised transitive semver updates.',\n uipkge: true,\n npmMonolith: false,\n inHouse: true,\n },\n {\n name: 'Full Customization Freedom',\n description: 'Modify any CSS class, DOM attribute, or internal logic without breaking upstream.',\n uipkge: true,\n npmMonolith: 'Limited',\n inHouse: true,\n },\n {\n name: 'WCAG 2.1 AA Accessibility',\n description: 'Keyboard ergonomics, focus rings, ARIA roles, and screen-reader audited.',\n uipkge: true,\n npmMonolith: 'Partial',\n inHouse: 'Manual',\n },\n ],\n },\n]\n\nexport function FeatureMatrixTableDense({\n title = 'Engineered for teams who demand complete source code control.',\n description = 'Compare how unbundled registry components stack up against traditional monolithic npm packages and bespoke in-house design systems.',\n categories = DEFAULT_CATEGORIES,\n className,\n}: FeatureMatrixTableDenseProps) {\n const [searchQuery, setSearchQuery] = React.useState('')\n const [onlyDifferences, setOnlyDifferences] = React.useState(false)\n const [collapsedCategories, setCollapsedCategories] = React.useState>({})\n\n function toggleCategory(catId: string) {\n setCollapsedCategories((prev) => ({\n ...prev,\n [catId]: !prev[catId],\n }))\n }\n\n const filteredCategories = React.useMemo(() => {\n const query = searchQuery.toLowerCase().trim()\n\n return categories\n .map((cat) => {\n const filteredFeatures = cat.features.filter((f) => {\n const matchesQuery =\n !query || f.name.toLowerCase().includes(query) || f.description.toLowerCase().includes(query)\n\n if (!matchesQuery) return false\n\n if (onlyDifferences) {\n const isSame = f.uipkge === f.npmMonolith && f.npmMonolith === f.inHouse\n if (isSame) return false\n }\n\n return true\n })\n\n return {\n ...cat,\n features: filteredFeatures,\n }\n })\n .filter((cat) => cat.features.length > 0)\n }, [categories, searchQuery, onlyDifferences])\n\n return (\n \n
\n {/* Section Header */}\n
\n \n \n Technical Architecture Comparison\n \n \n\n

{title}

\n\n

{description}

\n
\n\n {/* Controls Strip: Search & Filter Toggles */}\n
\n
\n \n setSearchQuery(e.target.value)}\n className=\"border-border bg-muted/40 text-foreground placeholder:text-muted-foreground focus-visible:ring-primary h-8 w-full rounded-md border pr-3 pl-8 text-xs focus-visible:ring-1 focus-visible:outline-none\"\n />\n
\n\n
\n setOnlyDifferences((prev) => !prev)}\n >\n \n Show Differences Only\n \n
\n
\n\n {/* Dense Comparison Matrix Table */}\n
\n \n {/* Table Sticky Header */}\n \n \n \n \n
\n UIPKGE Registry\n Unbundled Code Ownership\n
\n \n \n \n \n \n\n {/* Table Body with Collapsible Category Rows */}\n \n {filteredCategories.map((category) => (\n \n {/* Category Header Row */}\n toggleCategory(category.id)}\n >\n \n \n\n {/* Feature Items Rows */}\n {!collapsedCategories[category.id] &&\n category.features.map((feature, fIdx) => (\n \n {/* Feature Info (Col 1) */}\n \n\n {/* UIPKGE (Col 2 - Highlighted) */}\n \n\n {/* NPM Monolith (Col 3) */}\n \n\n {/* In-House Bespoke (Col 4) */}\n \n \n ))}\n \n ))}\n \n
\n Capability & Specification\n \n
\n NPM Monolith\n e.g. MUI / AntD\n
\n 		\n
\n In-House Bespoke\n Built from scratch\n
\n
\n
\n {!collapsedCategories[category.id] ? (\n \n ) : (\n \n )}\n {category.title}\n \n ({category.features.length})\n \n
\n
\n
{feature.name}
\n
{feature.description}
\n 		\n
\n {feature.uipkge === true ? (\n \n \n \n ) : typeof feature.uipkge === 'string' ? (\n \n {feature.uipkge}\n \n ) : (\n \n \n \n )}\n
\n 		\n
\n {feature.npmMonolith === true ? (\n \n \n \n ) : typeof feature.npmMonolith === 'string' ? (\n \n {feature.npmMonolith}\n \n ) : (\n \n \n \n )}\n
\n 		\n
\n {feature.inHouse === true ? (\n \n \n \n ) : typeof feature.inHouse === 'string' ? (\n \n {feature.inHouse}\n \n ) : (\n \n \n \n )}\n
\n
\n
\n
\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/feature-matrix-table-dense/FeatureMatrixTableDense.tsx" }, { "path": "packages/registry-react/blocks/feature-matrix-table-dense/index.ts", "content": "export { FeatureMatrixTableDense } from './FeatureMatrixTableDense'\nexport type { FeatureMatrixTableDenseProps, MatrixCategory, MatrixFeature } from './FeatureMatrixTableDense'\n", "type": "registry:block", "target": "~/components/blocks/feature-matrix-table-dense/index.ts" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [], "description": "Dense Linear-style technical specification matrix table with collapsible sections and search filtering.", "categories": [ "feature", "marketing" ] }