#What is The Gridcn?

The Gridcn is a stunning Tron-inspired theme and component system for shadcn/ui that transforms ordinary React interfaces into immersive, cyberpunk-style UIs reminiscent of the Tron universe. It's designed for developers building futuristic dashboards, SaaS products, admin panels, or creative portfolios who want that signature neon glow, holographic feel, and high-tech aesthetic without starting from scratch. Built on React, Next.js, Tailwind CSS, and shadcn/ui, with Three.js for 3D enhancements, it delivers core value through 50+ pre-styled components, 6 thematic color schemes, and movie-accurate HUD elements — all installable via the familiar shadcn CLI. Perfect for projects where visual impact and premium sci-fi vibes matter.

#Features ⚡

• 50+ Tron-Styled shadcn/ui Components: Buttons, cards, inputs, tables, modals, and more with neon borders, glow effects, and scanline details.

• 6 Greek God Themes: Tron (cyan), Ares (red), Clu (orange), Athena (blue), Aphrodite (pink), Poseidon (deep blue) — each with its own primary color and personality.

• Movie-Accurate HUD Elements: Data cards, radar displays, timers, alerts, status bars, and dossier-style panels.

• Three.js 3D Effects: Interactive grid floors, particle systems, light cycles, and fly-through tunnels that react to the active theme.

• Glow Utilities & Animations: Pulsing neon outlines, CRT effects, energy meters, and boot sequences.

• Production Templates: Fully built Dashboard (analytics + sidebar) and Landing Page (hero + features + pricing).

• Easy Installation: shadcn CLI registry support for adding individual components or the full theme.

#Pros ✅

• Instantly gives your app a premium, futuristic Tron aesthetic that stands out.

• Perfect extension of shadcn/ui — same familiar workflow with CLI installation.

• Rich variety of themed components and 3D effects for immersive experiences.

• Strong visual consistency across 6 beautiful color palettes.

• Free to use with full code access and TypeScript support.

#Cons ⚠️

• Very stylized (Tron/cyberpunk) — may not suit minimal, corporate, or neutral design systems without heavy customization.

• Three.js 3D effects add performance overhead if overused.

• Requires an existing shadcn/ui setup in your project.

• Niche aesthetic — best for creative/tech-forward projects rather than conservative finance or enterprise apps.

#Included Components - Templates

• Core shadcn/ui Components: All native components restyled with Tron neon aesthetics (Button, Card, Table, Input, Modal, etc.).

• HUD & Movie Elements: Data Card, Radar, Timer, Alert Banner, Status Bar, Energy Meter, Dossier Panel.

• 3D & Effects: Grid 3D, Circuit Background, Particle Systems, Light Beams, CRT Effect, Glow Container.

• Special Components: Tron Accordion, Tron Card, Tron Carousel, Tron Drawer, Tron Popover, Identity Disc, Boot Sequence.

• Templates: Complete Dashboard (with sidebar, real-time metrics) and Landing Page (hero, features, testimonials, pricing).

#Pricing 💸

• Completely free to use and open-source (MIT licensed).

• No paid tiers or Pro version mentioned — full access to all components, themes, and 3D effects at no cost.

• Source code available on GitHub for forking and customization.

#Integrations 🧰

• shadcn/ui: Built directly on top with full CLI registry support.

• React & Next.js: Optimized for modern React ecosystems.

• Tailwind CSS: Styling foundation with custom Tron-themed tokens.

• Three.js: Powers the immersive 3D grid, particles, and effects.

• TypeScript: Full type safety across all components.