# Solar Loader

> The SolarLoader is a visually stunning, interactive React loader that simulates a miniature 3D solar system. At its center is a glowing sun, surrounded by planets orbiting in realistic, circular paths, each rendered as a 3D spherical body with subtle shading, inner shadows, and reflection spots for a lifelike effect. The loader automatically adapts to dark and light themes, ensuring it fits seamlessly into any UI. A diagonal axis line passes just below the sun, visually connecting the orbits and adding depth and structure to the system. All orbits rotate smoothly using CSS animations, while the entire system features a gentle tilt and perspective to enhance the 3D illusion. Planets like Saturn include rings with gradient styling, and each orbit has configurable speed and size. This loader not only indicates loading activity but also serves as an engaging, futuristic visual centerpiece for applications, dashboards, or landing pages.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/solar-loader

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/solar-loader?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt