@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.

140 components react shadcn-cli

website ↗ github ↗ registry ↗ agent brief (.md) ↗ clone source (140 .json) ↗ clone brief (PROMPT.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://thegridcn.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://thegridcn.com/r/registry.json

bun bunx shadcn@latest add https://thegridcn.com/r/registry.json

fetch registry curl -s https://thegridcn.com/r/registry.json

Components

140 total

Accordion component

npx shadcn@latest add https://thegridcn.com/r/accordion.json

Alert component

npx shadcn@latest add https://thegridcn.com/r/alert.json

Alert component

npx shadcn@latest add https://thegridcn.com/r/alert.json

Alert Dialog component

npx shadcn@latest add https://thegridcn.com/r/alert-dialog.json

Anomaly Banner component

npx shadcn@latest add https://thegridcn.com/r/anomaly-banner.json

Arrival Panel component

npx shadcn@latest add https://thegridcn.com/r/arrival-panel.json

Aspect Ratio component

npx shadcn@latest add https://thegridcn.com/r/aspect-ratio.json

Avatar component

npx shadcn@latest add https://thegridcn.com/r/avatar.json

Badge component

npx shadcn@latest add https://thegridcn.com/r/badge.json

Beam Marker component

npx shadcn@latest add https://thegridcn.com/r/beam-marker.json

Breadcrumb component

npx shadcn@latest add https://thegridcn.com/r/breadcrumb.json

Button component

npx shadcn@latest add https://thegridcn.com/r/button.json

Button Group component

npx shadcn@latest add https://thegridcn.com/r/button-group.json

Calendar component

npx shadcn@latest add https://thegridcn.com/r/calendar.json

Card component

npx shadcn@latest add https://thegridcn.com/r/card.json

Carousel component

npx shadcn@latest add https://thegridcn.com/r/carousel.json

Chart component

Helper to extract item config from a payload.

npx shadcn@latest add https://thegridcn.com/r/chart.json

Checkbox component

npx shadcn@latest add https://thegridcn.com/r/checkbox.json

Circuit Background component

npx shadcn@latest add https://thegridcn.com/r/circuit-background.json

Collapsible component

npx shadcn@latest add https://thegridcn.com/r/collapsible.json

Command component

npx shadcn@latest add https://thegridcn.com/r/command.json

Context Menu component

npx shadcn@latest add https://thegridcn.com/r/context-menu.json

Crt Effect 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 component

npx shadcn@latest add https://thegridcn.com/r/data-card.json

Dialog component

npx shadcn@latest add https://thegridcn.com/r/dialog.json

Drawer component

npx shadcn@latest add https://thegridcn.com/r/drawer.json

Dropdown Menu component

npx shadcn@latest add https://thegridcn.com/r/dropdown-menu.json

Empty component

npx shadcn@latest add https://thegridcn.com/r/empty.json

Field component

npx shadcn@latest add https://thegridcn.com/r/field.json

Floating Panel component

npx shadcn@latest add https://thegridcn.com/r/floating-panel.json

Form component

npx shadcn@latest add https://thegridcn.com/r/form.json

Glow Container component

npx shadcn@latest add https://thegridcn.com/r/glow-container.json

Grid component

Convert hex to THREE.Color

npx shadcn@latest add https://thegridcn.com/r/grid.json

Grid Floor component

npx shadcn@latest add https://thegridcn.com/r/grid-floor.json

Grid Scan Overlay component

npx shadcn@latest add https://thegridcn.com/r/grid-scan-overlay.json

Hover Card component

npx shadcn@latest add https://thegridcn.com/r/hover-card.json

Hud component

npx shadcn@latest add https://thegridcn.com/r/hud.json

Hud Corner Frame component

npx shadcn@latest add https://thegridcn.com/r/hud-corner-frame.json

Input component

npx shadcn@latest add https://thegridcn.com/r/input.json

Input Group component

npx shadcn@latest add https://thegridcn.com/r/input-group.json

Input Otp component

npx shadcn@latest add https://thegridcn.com/r/input-otp.json

Item component

npx shadcn@latest add https://thegridcn.com/r/item.json

Kbd component

npx shadcn@latest add https://thegridcn.com/r/kbd.json

Label component

npx shadcn@latest add https://thegridcn.com/r/label.json

Location Display component

npx shadcn@latest add https://thegridcn.com/r/location-display.json

Map component

npx shadcn@latest add https://thegridcn.com/r/map.json

Menubar component

npx shadcn@latest add https://thegridcn.com/r/menubar.json

Navigation Menu component

npx shadcn@latest add https://thegridcn.com/r/navigation-menu.json

Pagination component

npx shadcn@latest add https://thegridcn.com/r/pagination.json

Popover component

npx shadcn@latest add https://thegridcn.com/r/popover.json

Progress component

npx shadcn@latest add https://thegridcn.com/r/progress.json

Radio Group component

npx shadcn@latest add https://thegridcn.com/r/radio-group.json

Scroll Area component

npx shadcn@latest add https://thegridcn.com/r/scroll-area.json

Select component

npx shadcn@latest add https://thegridcn.com/r/select.json

Separator component

npx shadcn@latest add https://thegridcn.com/r/separator.json

Sheet component

npx shadcn@latest add https://thegridcn.com/r/sheet.json

Sidebar component

npx shadcn@latest add https://thegridcn.com/r/sidebar.json

Skeleton component

npx shadcn@latest add https://thegridcn.com/r/skeleton.json

Slider component

npx shadcn@latest add https://thegridcn.com/r/slider.json

Sonner component

npx shadcn@latest add https://thegridcn.com/r/sonner.json

Spinner component

npx shadcn@latest add https://thegridcn.com/r/spinner.json

Status Bar component

npx shadcn@latest add https://thegridcn.com/r/status-bar.json

Switch component

npx shadcn@latest add https://thegridcn.com/r/switch.json

Table component

npx shadcn@latest add https://thegridcn.com/r/table.json

Tabs component

npx shadcn@latest add https://thegridcn.com/r/tabs.json

Textarea component

npx shadcn@latest add https://thegridcn.com/r/textarea.json

Timeline Bar component

npx shadcn@latest add https://thegridcn.com/r/timeline-bar.json

Timer component

npx shadcn@latest add https://thegridcn.com/r/timer.json

Toggle component

npx shadcn@latest add https://thegridcn.com/r/toggle.json

Toggle Group component

npx shadcn@latest add https://thegridcn.com/r/toggle-group.json

Tooltip component

npx shadcn@latest add https://thegridcn.com/r/tooltip.json

Tunnel component

Instanced tunnel rings for better performance

npx shadcn@latest add https://thegridcn.com/r/tunnel.json

Uplink Header component

npx shadcn@latest add https://thegridcn.com/r/uplink-header.json

Video Player component

npx shadcn@latest add https://thegridcn.com/r/video-player.json

Video Progress component

npx shadcn@latest add https://thegridcn.com/r/video-progress.json

Terminal component

npx shadcn@latest add https://thegridcn.com/r/terminal.json

Energy Meter component

npx shadcn@latest add https://thegridcn.com/r/energy-meter.json

Progress Ring component

npx shadcn@latest add https://thegridcn.com/r/progress-ring.json

Diagnostics Panel component

npx shadcn@latest add https://thegridcn.com/r/diagnostics-panel.json

Identity Disc component

npx shadcn@latest add https://thegridcn.com/r/identity-disc.json

Gauge component

npx shadcn@latest add https://thegridcn.com/r/gauge.json

Waveform component

npx shadcn@latest add https://thegridcn.com/r/waveform.json

Data Stream component

npx shadcn@latest add https://thegridcn.com/r/data-stream.json

Boot Sequence component

npx shadcn@latest add https://thegridcn.com/r/boot-sequence.json

Signal Indicator component

npx shadcn@latest add https://thegridcn.com/r/signal-indicator.json

Notification component

npx shadcn@latest add https://thegridcn.com/r/notification.json

Stepper component

npx shadcn@latest add https://thegridcn.com/r/stepper.json

Tag component

npx shadcn@latest add https://thegridcn.com/r/tag.json

Stat Card component

npx shadcn@latest add https://thegridcn.com/r/stat-card.json

Sparkline component

npx shadcn@latest add https://thegridcn.com/r/sparkline.json

Feature Card component

npx shadcn@latest add https://thegridcn.com/r/feature-card.json

Pricing Card component

npx shadcn@latest add https://thegridcn.com/r/pricing-card.json

Testimonial Card component

npx shadcn@latest add https://thegridcn.com/r/testimonial-card.json

Stats Counter component

npx shadcn@latest add https://thegridcn.com/r/stats-counter.json

CTA Banner component

npx shadcn@latest add https://thegridcn.com/r/cta-banner.json

Heatmap component

npx shadcn@latest add https://thegridcn.com/r/heatmap.json

Logo Cloud component

npx shadcn@latest add https://thegridcn.com/r/logo-cloud.json

Comparison Table component

npx shadcn@latest add https://thegridcn.com/r/comparison-table.json

Changelog component

npx shadcn@latest add https://thegridcn.com/r/changelog.json

Progress Bar component

npx shadcn@latest add https://thegridcn.com/r/progress-bar.json

Avatar Group component

npx shadcn@latest add https://thegridcn.com/r/avatar-group.json

Bento Grid component

npx shadcn@latest add https://thegridcn.com/r/bento-grid.json

Marquee component

npx shadcn@latest add https://thegridcn.com/r/marquee.json

Divider component

npx shadcn@latest add https://thegridcn.com/r/divider.json

Agent Avatar component

npx shadcn@latest add https://thegridcn.com/r/agent-avatar.json

FAQ component

npx shadcn@latest add https://thegridcn.com/r/faq.json

Timeline component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-timeline.json

Announcement Bar component

npx shadcn@latest add https://thegridcn.com/r/announcement-bar.json

Data Table component

npx shadcn@latest add https://thegridcn.com/r/data-table.json

Rating component

npx shadcn@latest add https://thegridcn.com/r/rating.json

Skeleton component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-skeleton.json

Breadcrumb Nav component

npx shadcn@latest add https://thegridcn.com/r/breadcrumb-nav.json

Command Menu component

npx shadcn@latest add https://thegridcn.com/r/command-menu.json

Tabs component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-tabs.json

Tooltip component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-tooltip.json

Modal component

npx shadcn@latest add https://thegridcn.com/r/modal.json

Dropdown component

npx shadcn@latest add https://thegridcn.com/r/dropdown.json

Toggle component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-toggle.json

Pagination component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-pagination.json

File Upload component

npx shadcn@latest add https://thegridcn.com/r/file-upload.json

Kanban Board component

npx shadcn@latest add https://thegridcn.com/r/kanban-board.json

Empty State component

npx shadcn@latest add https://thegridcn.com/r/empty-state.json

Badge component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-badge.json

Toast component

npx shadcn@latest add https://thegridcn.com/r/toast.json

Slider component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-slider.json

Select component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-select.json

Text Input component

npx shadcn@latest add https://thegridcn.com/r/text-input.json

Number Input component

npx shadcn@latest add https://thegridcn.com/r/number-input.json

Chip component

npx shadcn@latest add https://thegridcn.com/r/chip.json

Coordinate Display component

npx shadcn@latest add https://thegridcn.com/r/coordinate-display.json

Countdown component

npx shadcn@latest add https://thegridcn.com/r/countdown.json

Derez Timer component

npx shadcn@latest add https://thegridcn.com/r/derez-timer.json

HUD Frame component

npx shadcn@latest add https://thegridcn.com/r/hud-frame.json

Map Marker component

npx shadcn@latest add https://thegridcn.com/r/map-marker.json

Radar component

npx shadcn@latest add https://thegridcn.com/r/radar.json

Regen Indicator component

npx shadcn@latest add https://thegridcn.com/r/regen-indicator.json

Reticle component

npx shadcn@latest add https://thegridcn.com/r/reticle.json

Speed Indicator component

npx shadcn@latest add https://thegridcn.com/r/speed-indicator.json

Stat component

npx shadcn@latest add https://thegridcn.com/r/stat.json

Tron Alert component

npx shadcn@latest add https://thegridcn.com/r/thegridcn-alert.json