DEV Community

Cover image for The GridCN: shadcn/ui Components With Tron Aesthetics and 3D Effects
jQueryScript
jQueryScript

Posted on

The GridCN: shadcn/ui Components With Tron Aesthetics and 3D Effects

The GridCN: a Tron: Ares-inspired design system built on shadcn/ui for React and Next.js.

Key highlights:

  • 50+ fully styled shadcn/ui components with Tron visuals and neon accents
  • 6 Greek god-inspired color themes (Ares, Tron, Clu, Athena, Aphrodite, Poseidon) using the oklch() color space
  • HUD-style components: radar displays, dossier cards, countdown timers, and status strips
  • Three.js 3D effects: interactive grid floors, particle systems, and fly-through tunnels
  • CSS glow, scanline, and pulse utilities tied to each active theme
  • Full TypeScript definitions throughout
  • Dynamic theme switching with persistent storage

Components install directly as editable source files. Open source, MIT licensed.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)