##Project Overview
The Gridcn is a component library and theme system built on top of shadcn/ui, designed to create futuristic, Tron-inspired user interfaces. It combines the reliability of shadcn/ui with distinctive visual styling and interactive 3D elements.
Its tagline — "A Tron-inspired theme and component library for shadcn/ui with Greek god color schemes, 3D effects, and HUD-style UI elements" — captures the essence of the project: bringing cyberpunk and neon aesthetics to reusable, production-ready components.
##Context and Motivation
The motivation behind The Gridcn comes from the need to offer bolder, more visually striking themes within the shadcn/ui ecosystem. While most component libraries opt for minimalist and neutral designs, The Gridcn embraces a futuristic aesthetic with neon glow effects, scanline animations, and HUD elements that transform any interface into an immersive visual experience.
##Key Features
-
50+ Pre-styled Components: A comprehensive collection of fully typed TypeScript UI components that seamlessly integrate with existing shadcn/ui projects.
-
Greek God Theme System: Six unique colour schemes inspired by Greek gods — Ares, Tron, Clu, Athena, Aphrodite, and Poseidon — using the oklch() colour space for precise colour control.
-
Visual Effects: Neon glow utilities, scanline animations, and Three.js-powered 3D components (Grid3D, Tunnel, GodAvatar), dynamically imported to avoid impacting performance or initial bundle size.
-
Customisable Intensity Levels: Control over the intensity of visual effects, allowing adjustment from subtle to fully immersive.
##Technologies Used
- React and TypeScript for the component foundation
- Tailwind CSS for the styling system
- shadcn/ui as the component base
- Three.js for interactive 3D elements
##Compatibility
The project is completely free and open-source, compatible with multiple React frameworks including Next.js, Vite, Remix, and Astro. It installs directly into projects as source code rather than as a dependency, giving developers full customisation control.
Project link: thegridcn.com