The Gridcn

A Tron-inspired theme and component library for shadcn/ui with Greek god color schemes, 3D effects, and HUD-style UI elements.

Published on February 1, 2025

Views
100 views
Reading time:
Reading time: 2 min
The Gridcn

##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

  1. 50+ Pre-styled Components: A comprehensive collection of fully typed TypeScript UI components that seamlessly integrate with existing shadcn/ui projects.

  2. 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.

  3. 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.

  4. 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