whatisgithub

What is thegridcn-ui?

educlopez/thegridcn-ui — explained in plain English

Analysis updated 2026-05-18

★ 348TypeScriptAudience · developerLicense

In one sentence

A neon, sci-fi themed component library for shadcn/ui that lets you build React web apps styled like a Tron-inspired heads-up display.

Mindmap

mindmap
  root((thegridcn-ui))
    What it does
      Neon Tron theme
      145 plus components
      Copy paste code
      Six color themes
    Tech stack
      TypeScript React
      Next.js Tailwind
      Three.js
      shadcn/ui
    Use cases
      Sci-fi styled apps
      Dashboards HUDs
      Landing pages
    Audience
      React developers
      UI designers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Style a React app with a neon, sci-fi HUD look instead of a default minimal design.

USE CASE 2

Add animated radars, countdown timers, and 3D grid floors to a dashboard or landing page.

USE CASE 3

Switch a project between six named color themes like Ares, Tron, and Poseidon.

USE CASE 4

Copy individual restyled shadcn/ui components straight into an existing project.

What is it built with?

TypeScriptReactNext.jsTailwind CSSThree.jsshadcn/ui
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

The GridCN is a Tron: Ares themed design system for shadcn/ui, a popular library of copy-paste web UI components. If you're building a React web app and want it to look like a neon sci-fi interface with glowing grids, radar displays, heads-up displays (HUDs), and 3D effects, instead of the default clean minimal style, this is a ready-made theme system to do that. It ships over 145 components across two tiers: the standard shadcn/ui base components (buttons, cards, inputs, etc.) restyled with neon colors and glass effects, plus 90+ Tron-specific components like animated radars, countdown timers, map displays, and 3D grid floors powered by Three.js. Six named color themes are included, Ares, Tron, Clu, Athena, Aphrodite, and Poseidon, each built on modern CSS color variables so switching between them is a single setting. Like shadcn/ui itself, every component is raw code you paste into your own project and own outright, nothing is locked in a black-box package. You install individual components via the shadcn command-line tool, browse all of them with live theme switching at the project's website, or copy the source directly. The project also exports theme tokens as CSS and JSON files you can drop into any project. It's built on Next.js and Tailwind CSS and is MIT licensed.

Copy-paste prompts

Prompt 1
Show me how to install a component from thegridcn-ui using the shadcn command-line tool.
Prompt 2
Explain the difference between the base shadcn/ui components and the Tron-specific components in thegridcn-ui.
Prompt 3
Help me switch my React app between the Ares and Poseidon color themes from thegridcn-ui.
Prompt 4
Walk me through adding a 3D grid floor component powered by Three.js to my Next.js app.

Frequently asked questions

What is thegridcn-ui?

A neon, sci-fi themed component library for shadcn/ui that lets you build React web apps styled like a Tron-inspired heads-up display.

What language is thegridcn-ui written in?

Mainly TypeScript. The stack also includes TypeScript, React, Next.js.

What license does thegridcn-ui use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

Who is thegridcn-ui for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?