sh4dcn
Registries
ActiveTheming/styling366

@thegridcn

Theming/styling · data updated 2026-07-28

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.

WebsiteDocsGitHubComponents folderAgent brief (.md)
@thegridcn preview
3daccessibilityaestheticaianimationaudioauthbackgroundsbuttonscardschartsdashboarddesign-systemdeveloper-toolsformsgamingiconsloadersmapsmarketingmediamobilenavigationonboardingoverlaysretrotablestheming

Install

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

Health

StatusActive
Last commit1 month ago
License—
Open issues0
ArchivedNo
Stars366

Components (140)

accordionalertalertalert-dialoganomaly-bannerarrival-panelaspect-ratioavatarbadgebeam-markerbreadcrumbbuttonbutton-groupcalendarcardcarouselchartcheckboxcircuit-backgroundcollapsiblecommandcontext-menucrt-effectdata-carddialogdrawerdropdown-menuemptyfieldfloating-panelformglow-containergridgrid-floorgrid-scan-overlayhover-cardhudhud-corner-frameinputinput-groupinput-otpitemkbdlabellocation-displaymapmenubarnavigation-menupaginationpopoverprogressradio-groupscroll-areaselectseparatorsheetsidebarskeletonslidersonner
Components: accordion, alert, alert, alert-dialog, anomaly-banner, arrival-panel, aspect-ratio, avatar, badge, beam-marker, breadcrumb, button, button-group, calendar, card, carousel, chart, checkbox, circuit-background, collapsible, command, context-menu, crt-effect, data-card, dialog, drawer, dropdown-menu, empty, field, floating-panel, form, glow-container, grid, grid-floor, grid-scan-overlay, hover-card, hud, hud-corner-frame, input, input-group, input-otp, item, kbd, label, location-display, map, menubar, navigation-menu, pagination, popover, progress, radio-group, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, spinner, status-bar, switch, table, tabs, textarea, timeline-bar, timer, toggle, toggle-group, tooltip, tunnel, uplink-header, video-player, video-progress, terminal, energy-meter, progress-ring, diagnostics-panel, identity-disc, gauge, waveform, data-stream, boot-sequence, signal-indicator, notification, stepper, tag, stat-card, sparkline, feature-card, pricing-card, testimonial-card, stats-counter, cta-banner, heatmap, logo-cloud, comparison-table, changelog, progress-bar, avatar-group, bento-grid, marquee, divider, agent-avatar, faq, thegridcn-timeline, announcement-bar, data-table, rating, thegridcn-skeleton, breadcrumb-nav, command-menu, thegridcn-tabs, thegridcn-tooltip, modal, dropdown, thegridcn-toggle, thegridcn-pagination, file-upload, kanban-board, empty-state, thegridcn-badge, toast, thegridcn-slider, thegridcn-select, text-input, number-input, chip, coordinate-display, countdown, derez-timer, hud-frame, map-marker, radar, regen-indicator, reticle, speed-indicator, stat, thegridcn-alert

Preview

Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.

@thegridcn · accordion

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