Fixel UI — shadcn/ui-Compatible Component Registry.

An open-source shadcn/ui-compatible component registry featuring production-ready React blocks and 40+ SVG illustrations. Features a custom registry generation pipeline that automatically scans components, extracts dependencies via AST parsing, transforms import paths, and generates shadcn-compliant JSON registry files. Includes 59 UI primitives, a category thumbnail system with 58 SVG components, an illustration system with shared base components, and full CLI install support via `npx shadcn@latest add`. Built with a copy-paste philosophy — users own the code with zero runtime dependencies.

Link

fixel-ui.vercel.app , https://github.com/FadyEmad01/Fixel-UI github

Stack

Next.js 16 (App Router), React 19.2, TypeScript 5, Tailwind CSS v4, shadcn/ui / Radix UI / Base UI, Motion (Framer Motion successor), Biome (linting/formatting), Lucide React / @tabler/icons-react, class-variance-authority, next-themes, embla-carousel-react, recharts, react-hook-form, sonner, vaul, cmdk, date-fns, @tanstack/react-table, next-mdx-remote, rehype-pretty-code, React Compiler, posthog-js, @vercel/analytics / speed-insights

Role

Frontend Developer (Solo) | Designed the entire registry architecture, component system, illustration pipeline, and build tooling

Highlights

•Architected a custom registry generation pipeline with 7 modular lib modules (file scanning, AST-based dependency extraction, import path transformation, metadata loading, registry building, schema validation) that automatically generates shadcn-compliant JSON registry files from component source code

•Built 2 production-ready block components (on-hover-01 with Apple-inspired spring animations via Motion, footer-01 with masked background images and gradient overlays) and an illustration system with 40+ SVG category thumbnails using shared composable base components

•Designed and implemented 59 shadcn/ui primitives (accordion, dialog, carousel, chart, sidebar, table, form, etc.) with full TypeScript types, CSS-based dark/light mode via next-themes, and Radix UI / Base UI headless primitives

•Engineered a dual-component registry architecture supporting 3 types (file blocks, directory blocks with multi-file support, and illustrations) with automatic dependency categorization into registry deps (@/components/ui/*) and npm deps (from package.json)

•Implemented an SVG category thumbnail system with 58 hand-crafted components using Lucide icons, Motion animations, and composable base primitives (IllustrationCard, IllustrationIcon, IllustrationText) for consistent visual previews

•Built the entire developer experience around the shadcn CLI — users install components with a single npx command, getting copy-pasted source files with zero runtime dependencies and full ownership

OG Image

No OG image available

Fixel UI — shadcn/ui-Compatible Component Registry.

An open-source shadcn/ui-compatible component registry featuring production-ready React blocks and 40+ SVG illustrations. Features a custom registry generation pipeline that automatically scans components, extracts dependencies via AST parsing, transforms import paths, and generates shadcn-compliant JSON registry files. Includes 59 UI primitives, a category thumbnail system with 58 SVG components, an illustration system with shared base components, and full CLI install support via `npx shadcn@latest add`. Built with a copy-paste philosophy — users own the code with zero runtime dependencies.