The GridCN

hero

A Tron: Ares inspired theme system for shadcn/ui. Grid-native components, six Greek-god color schemes, three.js effects, and a copy-paste registry that plugs into the shadcn CLI.

What is this

The GridCN turns plain shadcn/ui into a neon, glass-HUD design system modeled after Tron: Ares. It ships 55+ base components, 90+ Tron-flavored components (HUDs, radars, timers, maps, 3D grids), and six themes built on oklch() CSS variables — all installable one-by-one through npx shadcn add.

Nothing is locked behind a package. Every component is raw TSX you own, just like shadcn/ui itself. The site at is both the showcase and the registry.

Features

  • Six themes · Ares, Tron, Clu, Athena, Aphrodite, Poseidon
  • 145+ components · base UI + Tron-specific HUD/3D/effects
  • shadcn CLI native · install any component with npx shadcn add
  • Token export · pnpm tokens:build emits per-theme CSS + JSON under public/tokens/
  • Three.js integration · Grid3D, Tunnel, GridFloor, always SSR-safe
  • Copy-paste friendly · full source visible in the showcase with one-click copy

Quick start

Three ways to use The GridCN, from lightest touch to full clone.

1. Live preview

Browse every component with live switching across the six themes at . Each card shows the rendered component, its variants, and the source.

2. Copy a single component

  1. Open the component at .
  2. Switch to any theme to preview the styling.
  3. Click the copy button on the source block.
  4. Paste into your own components/ directory. Install listed peer deps if any.

3. Install via the registry (recommended)

The site exposes a shadcn-compatible registry. Apply a registry:base preset (Radix or Base UI — Vega is the New York look) or register the namespace yourself:

bash
npx shadcn@latest add @thegridcn/radix-vega# ornpx shadcn@latest add @thegridcn/base-vega
json
{  "registries": {    "@thegridcn": "https://thegridcn.com/r/{name}.json"  }}

Then install anything by short name:

bash
npx shadcn@latest add @thegridcn/buttonnpx shadcn@latest add @thegridcn/data-cardnpx shadcn@latest add @thegridcn/theme-ares
# or several at oncenpx shadcn@latest add @thegridcn/button @thegridcn/hud @thegridcn/radar

See the full walkthrough (namespace vs full URL, theming, tokens, troubleshooting) in .

Theme usage

Wrap your app once, then switch themes anywhere.

tsx
// app/layout.tsximport { ThemeProvider } from "@/components/theme";
export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en" suppressHydrationWarning>      <body>        <ThemeProvider defaultTheme="ares">{children}</ThemeProvider>      </body>    </html>  );}
tsx
// any client component"use client";import { useTheme } from "@/components/theme";
export function Toggle() {  const { theme, setTheme } = useTheme();  return (    <button onClick={() => setTheme(theme === "ares" ? "tron" : "ares")}>      {theme}    </button>  );}

Themes are data-theme attributes on <html>, so any CSS-variable-based component reacts automatically.

Token export

Run pnpm tokens:build to regenerate public/tokens/:

public/tokens/  index.json         · manifest of all themes  tron.css           · copy-paste CSS block  tron.json          · flat vars object { "--primary": "oklch(...)", ... }  ares.{css,json}  clu.{css,json}  athena.{css,json}  aphrodite.{css,json}  poseidon.{css,json}

Drop a CSS file into any project:

css
/* your-app/app/globals.css */@import "https://thegridcn.com/tokens/ares.css";

Or import the JSON into your Tailwind config:

ts
// tailwind.config.tsimport ares from "./tokens/ares.json" with { type: "json" };
export default {  theme: {    extend: {      colors: {        primary: ares.vars["--primary"],        // ... map the rest      },    },  },};

Development

bash
pnpm installpnpm dev          # http://localhost:3000pnpm build        # production build (runs registry:build first)pnpm lint         # eslintpnpm tokens:build # regenerate public/tokens/

Package manager is pnpm. Node 18+.

Project layout:

src/  app/                · Next.js App Router  components/ui/      · 55+ shadcn base components  components/thegridcn/  · Tron-flavored components + 3D + effects  components/theme/   · ThemeProvider + useTheme  lib/                · cn(), registry helpersscripts/              · registry + tokens build scriptspublic/r/             · generated registry JSON (one per component)public/tokens/        · generated theme tokensdocs/install.md       · shadcn CLI install guide

Contributing

PRs are welcome — especially new Tron-flavored components, theme polish, and registry improvements. Open an issue first for anything larger than a tweak so we can align on direction.

License

End of line.