@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.
60 components react shadcn-cli
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
60 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