NexoreUI
InstallationComponentsNexore MakeGitHub
GitHub
NexoreUIv0.1.2

Getting Started

Installation

Components

ButtonInputCardBadgeAlertAvatarAccordionModal / DialogTooltipTabsProgressSkeletonSliderSwitchRatingCommandTableStepperScroll AreaFile UploadNavigationIconsDock

Pro

ChartsData DisplayDark Mode ToolkitCommerceCookie ConsentSocialPremium EffectsLoaders

Animated

MarqueeNumber TickerAnimated NumberTyping AnimationThinking IndicatorTool Call CardAgent Status PillBlur FadeBox RevealFile Preview CardImage Compare
MIT License
DocsThinking Indicator

Thinking Indicator

Animated AI reasoning and orbital wave indicator.

Thinking Indicator

New

An animated AI reasoning and thinking indicator built with Framer Motion orbital wave trajectories, continuous hue-shifting, and native reduced-motion accessibility.

When to use which variant

defaultClean, modern AI chats (ChatGPT/Claude/Gemini style) with dominant indigo & accent particles.
neonFuturistic cyberpunk dashboards, gaming interfaces, and high-contrast dark modes.
glowEthereal, warm analytical and finance widgets with soft ambient diffusion.
cyberpunkDeveloper tools, matrix terminals, and command-line style HUD widgets.

Interactive Playground

ThinkingIndicator Playground
nexoreui
Live Preview
Thinking...
Props Panel
select

Visual aesthetic and color palette of the orbital particles.

select

Dimension scale and trajectory radius.

text

Accompanying status message.

select

Orbital rotation and wave oscillation speed.

boolean

Soft breathing pulse on the label text.

Generated Code
Open in GitHub
import { ThinkingIndicator } from "nexoreui"

<ThinkingIndicator />

API Reference (Props)

PropTypeDefaultDescription
variant"default" | "neon" | "glow" | "cyberpunk""default"Visual aesthetic preset for orbital particle colors, aura glow, and typography.
size"sm" | "md" | "lg""md"Physical dimensions and orbital trajectory radius of the particle cluster.
labelReact.ReactNodeundefinedOptional text or node rendered next to the animated orbital indicator.
shimmerLabelbooleantrueEnables subtle opacity pulsing on the label text in sync with reasoning cycles.
speed"slow" | "normal" | "fast""normal"Velocity multiplier for the primary and secondary orbital wave trajectories.
classNamestring—Custom CSS classes passed to the outer flex container.

Usage Examples

Default Reasoning in AI Chat

Nexore Assistant
Thinking through architecture...
Step 2/4
component.tsx

Neon Electric Theme

QUANTUM ENGINE REASONING
FPS: 60 | HUE_SHIFT: ACTIVE
component.tsx

Warm Glow Analytics Indicator

Predictive Revenue Analysis

Synthesizing real-time telemetry from 14 distributed clusters...

component.tsx
Page 1 of 2