The Gridcn is a Tron-inspired theme and component library for shadcn/ui. It started from a frustration: almost every shadcn/ui theme goes minimal and neutral. I wanted the opposite — neon, scanlines, HUD aesthetics — but without giving up reliable, production-ready components.
The project has passed 350 stars on GitHub and is fully open source.
The problem it solves
shadcn/ui is the base of thousands of projects, but its default look is deliberately understated. If you want an interface with a futuristic personality, you have to build it from scratch: effects, colors, animations. The Gridcn packages all of that into a coherent system that installs on top of shadcn/ui without breaking what you already have.
What I built
- 50+ components, fully typed with TypeScript, that integrate with existing shadcn/ui projects.
- Six color themes inspired by Greek gods — Ares, Tron, Clu, Athena, Aphrodite and Poseidon — defined in the
oklch()color space for precise control. - Visual effects: neon glow and scanlines, plus 3D components powered by Three.js (Grid3D, Tunnel, GodAvatar) that load dynamically so they don't affect the initial bundle size.
- Adjustable intensity levels, from subtle to fully immersive.
Key decisions
The biggest risk with such a visual theme is performance. Three.js 3D elements are heavy, so I import them dynamically: they only load when used, and never block the initial page load. The result is a striking aesthetic that doesn't cost you load time.
Results
- Over 350 stars on GitHub and real adoption in the shadcn/ui community.
- Compatible with Next.js, Vite, Remix and Astro.
- Installs as source code, not as a dependency, giving every developer full customization control.
Project link: thegridcn.com