Question 1

What is The Gridcn?

Accepted Answer

The Gridcn is a Tron-inspired theme and component library built on top of shadcn/ui. It provides 50+ pre-styled components, 6 Greek god color themes, 3D effects powered by Three.js, and HUD-style UI elements — all designed to create immersive, futuristic interfaces with minimal setup.

Question 2

How do I install The Gridcn components?

Accepted Answer

Pick Radix UI or Base UI, then run the generated shadcn command. It applies @thegridcn/radix-vega or @thegridcn/base-vega plus the component. Primitives come from official shadcn; HUD and themes come from The Gridcn. You can also download components.json.

Question 3

Do I need shadcn/ui already set up?

Accepted Answer

Yes. The Gridcn extends shadcn/ui, so you need a project with shadcn/ui initialized. Run 'pnpm dlx shadcn@latest init' first if you don't have it. The Gridcn components integrate seamlessly with your existing shadcn/ui setup and Tailwind CSS configuration.

Question 4

Radix UI or Base UI?

Accepted Answer

Choose Radix UI or Base UI the same way other shadcn registries do: one style value in components.json (radix-vega or base-vega). Button, Dialog, and other primitives install from official shadcn using that style. Gridcn HUD, themes, and 3D components layer on top.

Question 5

What themes are available?

Accepted Answer

Six Greek god-inspired themes: Ares (red), Tron (cyan), Clu (orange), Athena (gold), Aphrodite (pink), and Poseidon (blue). Each theme uses oklch() color space for precise color control and includes matching glow effects, borders, and background tones.

Question 6

Can I customize the themes or create my own?

Accepted Answer

Absolutely. Themes are defined as CSS variables using the oklch() color space, applied via a data-theme attribute. You can override any variable in your own CSS or create entirely new themes by defining a new set of color tokens following the same pattern.

Question 7

Do the 3D components affect performance?

Accepted Answer

The 3D components (Grid3D, Tunnel, GodAvatar) use Three.js and are dynamically imported with ssr: false so they don't impact server-side rendering or initial bundle size. They only load on the client when needed. You can also use the intensity system to control the level of visual effects.

Question 8

Does it work with frameworks other than Next.js?

Accepted Answer

The Gridcn components work with any React framework that supports shadcn/ui — including Next.js, Vite, Remix, and Astro. Since they're installed directly into your project as source code (not a dependency), you have full control and can adapt them to your stack.

Question 9

Is The Gridcn free to use?

Accepted Answer

Yes, The Gridcn is completely free and open source. You can use it in personal and commercial projects. Components are added to your codebase as source files, giving you full ownership and the freedom to modify anything.

Tron-Inspired UI Components for shadcn/ui