beUI Pro for mobile presale is open — Lifetime $129 for the until launch
AI Thinking Loaders
6 variants
Six compact pixel and node animations for AI thinking, analysis, and generation states.
Pixel orbit
index.tsxPixel orbit animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardGrid scan
index.tsxGrid scan animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardDiagonal wave
index.tsxDiagonal wave animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardAssembling tiles
index.tsxAssembling tiles animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardDiamond loop
index.tsxDiamond loop animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardConnected nodes
index.tsxConnected nodes animation for compact AI status indicators.
TSXcomponents/previews/premium/ai-thinking-loader-preview.tsx
"use client";
import { AIThinkingLoader } from "@/components/premium/ai-thinking-loader";
export function OrbitThinkingPreview() {
return <AIThinkingLoader variant="orbit" />;
}
export function ScanThinkingPreview() {
return <AIThinkingLoader variant="scan" />;
}
export function WaveThinkingPreview() {
return <AIThinkingLoader variant="wave" />;
}
export function AssembleThinkingPreview() {
return <AIThinkingLoader variant="assemble" />;
}
export function DiamondThinkingPreview() {
return <AIThinkingLoader variant="diamond" />;
}
export function NodesThinkingPreview() {
return <AIThinkingLoader variant="nodes" />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
Add this component with the shadcn CLI.
$ bunx --bun shadcn add @beui-pro/ai-thinking-loader