---
name: "@thegridcn"
slug: "thegridcn"
description: "A Tron: Ares-inspired sci-fi design system and component registry for shadcn/ui. Ships 55+ base UI components plus 90+ Tron-flavored components including HUDs, Radars, Timers, 3D Grids, and Tunnel effects via Three.js, with six Greek-god color themes (Ares, Tron, Clu, Athena, Aphrodite, Poseidon) expressed as oklch() CSS variables. Components use React 19, Next.js, and Tailwind v4. Token export outputs per-theme CSS and JSON. Everything is raw TSX — no package lock-in. Free and open source (MIT). Use for: games, developer tools, cyberpunk-aesthetic dashboards, or any project needing a cohesive sci-fi/neon visual system with Three.js 3D effects."
category: "Theming/styling"
tags: ["3d", "accessibility", "aesthetic", "ai", "animation", "audio", "auth", "backgrounds", "buttons", "cards", "charts", "dashboard", "design-system", "developer-tools", "forms", "gaming", "icons", "loaders", "maps", "marketing", "media", "mobile", "navigation", "onboarding", "overlays", "retro", "tables", "theming"]
framework: "react"
license: null
author: "educlopez"
website: "https://thegridcn.com"
github: "https://github.com/educlopez/thegridcn-ui"
registry: "https://thegridcn.com/r/registry.json"
pro: false
pro_url: null
github_stars: 366
component_count: 140
generated_at: "2026-07-28T08:59:05.895Z"
---

# @thegridcn

A Tron: Ares-inspired sci-fi design system and component registry for shadcn/ui. Ships 55+ base UI components plus 90+ Tron-flavored components including HUDs, Radars, Timers, 3D Grids, and Tunnel effects via Three.js, with six Greek-god color themes (Ares, Tron, Clu, Athena, Aphrodite, Poseidon) expressed as oklch() CSS variables. Components use React 19, Next.js, and Tailwind v4. Token export outputs per-theme CSS and JSON. Everything is raw TSX — no package lock-in. Free and open source (MIT). Use for: games, developer tools, cyberpunk-aesthetic dashboards, or any project needing a cohesive sci-fi/neon visual system with Three.js 3D effects.

## Links

- Website: https://thegridcn.com
- GitHub: https://github.com/educlopez/thegridcn-ui
- Registry JSON: https://thegridcn.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/thegridcn
- This file: https://sh4dcn.vercel.app/md/thegridcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://thegridcn.com/r/registry.json
pnpm dlx shadcn@latest add https://thegridcn.com/r/registry.json
bunx shadcn@latest add https://thegridcn.com/r/registry.json
# clone the source repo
git clone https://github.com/educlopez/thegridcn-ui.git
# fetch the raw registry index
curl -s https://thegridcn.com/r/registry.json
```

## Components (140)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:component | Accordion | `npx shadcn@latest add https://thegridcn.com/r/accordion.json` |
| alert | registry:component | Alert | `npx shadcn@latest add https://thegridcn.com/r/alert.json` |
| alert | registry:component | Alert | `npx shadcn@latest add https://thegridcn.com/r/alert.json` |
| alert-dialog | registry:component | Alert Dialog | `npx shadcn@latest add https://thegridcn.com/r/alert-dialog.json` |
| anomaly-banner | registry:component | Anomaly Banner | `npx shadcn@latest add https://thegridcn.com/r/anomaly-banner.json` |
| arrival-panel | registry:component | Arrival Panel | `npx shadcn@latest add https://thegridcn.com/r/arrival-panel.json` |
| aspect-ratio | registry:component | Aspect Ratio | `npx shadcn@latest add https://thegridcn.com/r/aspect-ratio.json` |
| avatar | registry:component | Avatar | `npx shadcn@latest add https://thegridcn.com/r/avatar.json` |
| badge | registry:component | Badge | `npx shadcn@latest add https://thegridcn.com/r/badge.json` |
| beam-marker | registry:component | Beam Marker | `npx shadcn@latest add https://thegridcn.com/r/beam-marker.json` |
| breadcrumb | registry:component | Breadcrumb | `npx shadcn@latest add https://thegridcn.com/r/breadcrumb.json` |
| button | registry:component | Button | `npx shadcn@latest add https://thegridcn.com/r/button.json` |
| button-group | registry:component | Button Group | `npx shadcn@latest add https://thegridcn.com/r/button-group.json` |
| calendar | registry:component | Calendar | `npx shadcn@latest add https://thegridcn.com/r/calendar.json` |
| card | registry:component | Card | `npx shadcn@latest add https://thegridcn.com/r/card.json` |
| carousel | registry:component | Carousel | `npx shadcn@latest add https://thegridcn.com/r/carousel.json` |
| chart | registry:component | Helper to extract item config from a payload. | `npx shadcn@latest add https://thegridcn.com/r/chart.json` |
| checkbox | registry:component | Checkbox | `npx shadcn@latest add https://thegridcn.com/r/checkbox.json` |
| circuit-background | registry:component | Circuit Background | `npx shadcn@latest add https://thegridcn.com/r/circuit-background.json` |
| collapsible | registry:component | Collapsible | `npx shadcn@latest add https://thegridcn.com/r/collapsible.json` |
| command | registry:component | Command | `npx shadcn@latest add https://thegridcn.com/r/command.json` |
| context-menu | registry:component | Context Menu | `npx shadcn@latest add https://thegridcn.com/r/context-menu.json` |
| crt-effect | registry:component | CRT monitor effect with scanlines, vignette, flicker, and scan sweep animation. * Wrap any content to give it a retro CRT monitor appearance. | `npx shadcn@latest add https://thegridcn.com/r/crt-effect.json` |
| data-card | registry:component | Data Card | `npx shadcn@latest add https://thegridcn.com/r/data-card.json` |
| dialog | registry:component | Dialog | `npx shadcn@latest add https://thegridcn.com/r/dialog.json` |
| drawer | registry:component | Drawer | `npx shadcn@latest add https://thegridcn.com/r/drawer.json` |
| dropdown-menu | registry:component | Dropdown Menu | `npx shadcn@latest add https://thegridcn.com/r/dropdown-menu.json` |
| empty | registry:component | Empty | `npx shadcn@latest add https://thegridcn.com/r/empty.json` |
| field | registry:component | Field | `npx shadcn@latest add https://thegridcn.com/r/field.json` |
| floating-panel | registry:component | Floating Panel | `npx shadcn@latest add https://thegridcn.com/r/floating-panel.json` |
| form | registry:component | Form | `npx shadcn@latest add https://thegridcn.com/r/form.json` |
| glow-container | registry:component | Glow Container | `npx shadcn@latest add https://thegridcn.com/r/glow-container.json` |
| grid | registry:component | Convert hex to THREE.Color | `npx shadcn@latest add https://thegridcn.com/r/grid.json` |
| grid-floor | registry:component | Grid Floor | `npx shadcn@latest add https://thegridcn.com/r/grid-floor.json` |
| grid-scan-overlay | registry:component | Grid Scan Overlay | `npx shadcn@latest add https://thegridcn.com/r/grid-scan-overlay.json` |
| hover-card | registry:component | Hover Card | `npx shadcn@latest add https://thegridcn.com/r/hover-card.json` |
| hud | registry:component | Hud | `npx shadcn@latest add https://thegridcn.com/r/hud.json` |
| hud-corner-frame | registry:component | Hud Corner Frame | `npx shadcn@latest add https://thegridcn.com/r/hud-corner-frame.json` |
| input | registry:component | Input | `npx shadcn@latest add https://thegridcn.com/r/input.json` |
| input-group | registry:component | Input Group | `npx shadcn@latest add https://thegridcn.com/r/input-group.json` |
| input-otp | registry:component | Input Otp | `npx shadcn@latest add https://thegridcn.com/r/input-otp.json` |
| item | registry:component | Item | `npx shadcn@latest add https://thegridcn.com/r/item.json` |
| kbd | registry:component | Kbd | `npx shadcn@latest add https://thegridcn.com/r/kbd.json` |
| label | registry:component | Label | `npx shadcn@latest add https://thegridcn.com/r/label.json` |
| location-display | registry:component | Location Display | `npx shadcn@latest add https://thegridcn.com/r/location-display.json` |
| map | registry:component | Map | `npx shadcn@latest add https://thegridcn.com/r/map.json` |
| menubar | registry:component | Menubar | `npx shadcn@latest add https://thegridcn.com/r/menubar.json` |
| navigation-menu | registry:component | Navigation Menu | `npx shadcn@latest add https://thegridcn.com/r/navigation-menu.json` |
| pagination | registry:component | Pagination | `npx shadcn@latest add https://thegridcn.com/r/pagination.json` |
| popover | registry:component | Popover | `npx shadcn@latest add https://thegridcn.com/r/popover.json` |
| progress | registry:component | Progress | `npx shadcn@latest add https://thegridcn.com/r/progress.json` |
| radio-group | registry:component | Radio Group | `npx shadcn@latest add https://thegridcn.com/r/radio-group.json` |
| scroll-area | registry:component | Scroll Area | `npx shadcn@latest add https://thegridcn.com/r/scroll-area.json` |
| select | registry:component | Select | `npx shadcn@latest add https://thegridcn.com/r/select.json` |
| separator | registry:component | Separator | `npx shadcn@latest add https://thegridcn.com/r/separator.json` |
| sheet | registry:component | Sheet | `npx shadcn@latest add https://thegridcn.com/r/sheet.json` |
| sidebar | registry:component | Sidebar | `npx shadcn@latest add https://thegridcn.com/r/sidebar.json` |
| skeleton | registry:component | Skeleton | `npx shadcn@latest add https://thegridcn.com/r/skeleton.json` |
| slider | registry:component | Slider | `npx shadcn@latest add https://thegridcn.com/r/slider.json` |
| sonner | registry:component | Sonner | `npx shadcn@latest add https://thegridcn.com/r/sonner.json` |
| spinner | registry:component | Spinner | `npx shadcn@latest add https://thegridcn.com/r/spinner.json` |
| status-bar | registry:component | Status Bar | `npx shadcn@latest add https://thegridcn.com/r/status-bar.json` |
| switch | registry:component | Switch | `npx shadcn@latest add https://thegridcn.com/r/switch.json` |
| table | registry:component | Table | `npx shadcn@latest add https://thegridcn.com/r/table.json` |
| tabs | registry:component | Tabs | `npx shadcn@latest add https://thegridcn.com/r/tabs.json` |
| textarea | registry:component | Textarea | `npx shadcn@latest add https://thegridcn.com/r/textarea.json` |
| timeline-bar | registry:component | Timeline Bar | `npx shadcn@latest add https://thegridcn.com/r/timeline-bar.json` |
| timer | registry:component | Timer | `npx shadcn@latest add https://thegridcn.com/r/timer.json` |
| toggle | registry:component | Toggle | `npx shadcn@latest add https://thegridcn.com/r/toggle.json` |
| toggle-group | registry:component | Toggle Group | `npx shadcn@latest add https://thegridcn.com/r/toggle-group.json` |
| tooltip | registry:component | Tooltip | `npx shadcn@latest add https://thegridcn.com/r/tooltip.json` |
| tunnel | registry:component | Instanced tunnel rings for better performance | `npx shadcn@latest add https://thegridcn.com/r/tunnel.json` |
| uplink-header | registry:component | Uplink Header | `npx shadcn@latest add https://thegridcn.com/r/uplink-header.json` |
| video-player | registry:component | Video Player | `npx shadcn@latest add https://thegridcn.com/r/video-player.json` |
| video-progress | registry:component | Video Progress | `npx shadcn@latest add https://thegridcn.com/r/video-progress.json` |
| terminal | registry:component | Terminal | `npx shadcn@latest add https://thegridcn.com/r/terminal.json` |
| energy-meter | registry:component | Energy Meter | `npx shadcn@latest add https://thegridcn.com/r/energy-meter.json` |
| progress-ring | registry:component | Progress Ring | `npx shadcn@latest add https://thegridcn.com/r/progress-ring.json` |
| diagnostics-panel | registry:component | Diagnostics Panel | `npx shadcn@latest add https://thegridcn.com/r/diagnostics-panel.json` |
| identity-disc | registry:component | Identity Disc | `npx shadcn@latest add https://thegridcn.com/r/identity-disc.json` |
| gauge | registry:component | Gauge | `npx shadcn@latest add https://thegridcn.com/r/gauge.json` |
| waveform | registry:component | Waveform | `npx shadcn@latest add https://thegridcn.com/r/waveform.json` |
| data-stream | registry:component | Data Stream | `npx shadcn@latest add https://thegridcn.com/r/data-stream.json` |
| boot-sequence | registry:component | Boot Sequence | `npx shadcn@latest add https://thegridcn.com/r/boot-sequence.json` |
| signal-indicator | registry:component | Signal Indicator | `npx shadcn@latest add https://thegridcn.com/r/signal-indicator.json` |
| notification | registry:component | Notification | `npx shadcn@latest add https://thegridcn.com/r/notification.json` |
| stepper | registry:component | Stepper | `npx shadcn@latest add https://thegridcn.com/r/stepper.json` |
| tag | registry:component | Tag | `npx shadcn@latest add https://thegridcn.com/r/tag.json` |
| stat-card | registry:component | Stat Card | `npx shadcn@latest add https://thegridcn.com/r/stat-card.json` |
| sparkline | registry:component | Sparkline | `npx shadcn@latest add https://thegridcn.com/r/sparkline.json` |
| feature-card | registry:component | Feature Card | `npx shadcn@latest add https://thegridcn.com/r/feature-card.json` |
| pricing-card | registry:component | Pricing Card | `npx shadcn@latest add https://thegridcn.com/r/pricing-card.json` |
| testimonial-card | registry:component | Testimonial Card | `npx shadcn@latest add https://thegridcn.com/r/testimonial-card.json` |
| stats-counter | registry:component | Stats Counter | `npx shadcn@latest add https://thegridcn.com/r/stats-counter.json` |
| cta-banner | registry:component | CTA Banner | `npx shadcn@latest add https://thegridcn.com/r/cta-banner.json` |
| heatmap | registry:component | Heatmap | `npx shadcn@latest add https://thegridcn.com/r/heatmap.json` |
| logo-cloud | registry:component | Logo Cloud | `npx shadcn@latest add https://thegridcn.com/r/logo-cloud.json` |
| comparison-table | registry:component | Comparison Table | `npx shadcn@latest add https://thegridcn.com/r/comparison-table.json` |
| changelog | registry:component | Changelog | `npx shadcn@latest add https://thegridcn.com/r/changelog.json` |
| progress-bar | registry:component | Progress Bar | `npx shadcn@latest add https://thegridcn.com/r/progress-bar.json` |
| avatar-group | registry:component | Avatar Group | `npx shadcn@latest add https://thegridcn.com/r/avatar-group.json` |
| bento-grid | registry:component | Bento Grid | `npx shadcn@latest add https://thegridcn.com/r/bento-grid.json` |
| marquee | registry:component | Marquee | `npx shadcn@latest add https://thegridcn.com/r/marquee.json` |
| divider | registry:component | Divider | `npx shadcn@latest add https://thegridcn.com/r/divider.json` |
| agent-avatar | registry:component | Agent Avatar | `npx shadcn@latest add https://thegridcn.com/r/agent-avatar.json` |
| faq | registry:component | FAQ | `npx shadcn@latest add https://thegridcn.com/r/faq.json` |
| thegridcn-timeline | registry:component | Timeline | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-timeline.json` |
| announcement-bar | registry:component | Announcement Bar | `npx shadcn@latest add https://thegridcn.com/r/announcement-bar.json` |
| data-table | registry:component | Data Table | `npx shadcn@latest add https://thegridcn.com/r/data-table.json` |
| rating | registry:component | Rating | `npx shadcn@latest add https://thegridcn.com/r/rating.json` |
| thegridcn-skeleton | registry:component | Skeleton | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-skeleton.json` |
| breadcrumb-nav | registry:component | Breadcrumb Nav | `npx shadcn@latest add https://thegridcn.com/r/breadcrumb-nav.json` |
| command-menu | registry:component | Command Menu | `npx shadcn@latest add https://thegridcn.com/r/command-menu.json` |
| thegridcn-tabs | registry:component | Tabs | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-tabs.json` |
| thegridcn-tooltip | registry:component | Tooltip | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-tooltip.json` |
| modal | registry:component | Modal | `npx shadcn@latest add https://thegridcn.com/r/modal.json` |
| dropdown | registry:component | Dropdown | `npx shadcn@latest add https://thegridcn.com/r/dropdown.json` |
| thegridcn-toggle | registry:component | Toggle | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-toggle.json` |
| thegridcn-pagination | registry:component | Pagination | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-pagination.json` |
| file-upload | registry:component | File Upload | `npx shadcn@latest add https://thegridcn.com/r/file-upload.json` |
| kanban-board | registry:component | Kanban Board | `npx shadcn@latest add https://thegridcn.com/r/kanban-board.json` |
| empty-state | registry:component | Empty State | `npx shadcn@latest add https://thegridcn.com/r/empty-state.json` |
| thegridcn-badge | registry:component | Badge | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-badge.json` |
| toast | registry:component | Toast | `npx shadcn@latest add https://thegridcn.com/r/toast.json` |
| thegridcn-slider | registry:component | Slider | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-slider.json` |
| thegridcn-select | registry:component | Select | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-select.json` |
| text-input | registry:component | Text Input | `npx shadcn@latest add https://thegridcn.com/r/text-input.json` |
| number-input | registry:component | Number Input | `npx shadcn@latest add https://thegridcn.com/r/number-input.json` |
| chip | registry:component | Chip | `npx shadcn@latest add https://thegridcn.com/r/chip.json` |
| coordinate-display | registry:component | Coordinate Display | `npx shadcn@latest add https://thegridcn.com/r/coordinate-display.json` |
| countdown | registry:component | Countdown | `npx shadcn@latest add https://thegridcn.com/r/countdown.json` |
| derez-timer | registry:component | Derez Timer | `npx shadcn@latest add https://thegridcn.com/r/derez-timer.json` |
| hud-frame | registry:component | HUD Frame | `npx shadcn@latest add https://thegridcn.com/r/hud-frame.json` |
| map-marker | registry:component | Map Marker | `npx shadcn@latest add https://thegridcn.com/r/map-marker.json` |
| radar | registry:component | Radar | `npx shadcn@latest add https://thegridcn.com/r/radar.json` |
| regen-indicator | registry:component | Regen Indicator | `npx shadcn@latest add https://thegridcn.com/r/regen-indicator.json` |
| reticle | registry:component | Reticle | `npx shadcn@latest add https://thegridcn.com/r/reticle.json` |
| speed-indicator | registry:component | Speed Indicator | `npx shadcn@latest add https://thegridcn.com/r/speed-indicator.json` |
| stat | registry:component | Stat | `npx shadcn@latest add https://thegridcn.com/r/stat.json` |
| thegridcn-alert | registry:component | Tron Alert | `npx shadcn@latest add https://thegridcn.com/r/thegridcn-alert.json` |

## For AI agents

```text
You are adding components from @thegridcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/thegridcn.md) for the component list.
2. Fetch the machine-readable index: https://thegridcn.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: thegridcn).
```