Solar System

Interactive 3D technology ecosystem orbit animation

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/solar-system.json

Preparing preview…

Installation

Run the following command

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/solar-system.json

Usage

code

1import { SolarSystem } from "@/components/ui/solar-system"
2
3export function SolarSystemDemo() {
4  return (
5    <SolarSystem
6      title="Interactive Orbit Component"
7      description="Showcase your integrations or technology ecosystem with our highly interactive 3D solar system component."
8    />
9  )
10}

Props

Prop Name	Type	Default	Description
centerLogo	`string \| React.ReactNode`	`OrbitIcon`	Logo element rendered in the center core. If not provided, renders a spinning Orbit icon.
centerLogoAlt	`string`	`"Core Engine"`	Alternate text description for screen readers.
title	`string`	`"Compatible with your stack"`	Headline text displayed in the header information section.
description	`string`	`"Connect from any framework..."`	Sub-headline text displayed in the header information section.
orbits	`OrbitConfig[]`	`DEFAULT_ORBITS`	Array of orbit configurations mapping items, radius classes, and speeds.
className	`string`	`-`	Additional CSS classes to override the outer container.

OrbitConfig Interface

Prop Name	Type	Default	Description
id	`string`	`-`	Unique identifier for the orbit ring (e.g. 'inner', 'mid').
name	`string`	`-`	Display name for the ring in filter options.
radiusClass	`string`	`-`	CSS variable representing orbit size (e.g. 'var(--radius-inner)').
radiusPx	`number`	`-`	Absolute radius in pixels for positioning calculations.
speed	`number`	`-`	Standard rotation duration in seconds for one full loop.
items	`SolarSystemItem[]`	`-`	Collection of technology node items orbiting on this ring.

SolarSystemItem Interface

Prop Name	Type	Default	Description
id	`string`	`-`	Unique identifier for the technology node.
label	`string`	`-`	Display label for the node.
type	`string`	`-`	Classification category label (e.g. 'Frontend Library').
badge	`string`	`-`	Highlight badge text (e.g. 'Official SDK').
desc	`string`	`-`	Detailed summary description of the technology.
color	`string`	`-`	Hex value of theme highlight color (e.g. '#61DAFB' for React).
svg	`React.ReactNode`	`-`	Inline SVG element/icon to render inside the node.
code	`string`	`-`	Sample code snippet to display in the editor sidebar.

Credits

contributor

Siddh2024

Designed and contributed the interactive 3D Solar System component to the Vengeance UI catalog.

GitHub LinkedIn

Loading component…

Components /Solar System