@aristobyte-ui/spinner

@aristobyte-ui/spinner

A modular, highly customizable React spinner component, optimized for AristoByteUI projects. Supports multiple animation types, semantic color variants, and flexible sizing.

📦 Installation

# Install via Yarn
yarn add -D @aristobyte-ui/spinner

# Or via npm
npm install -D @aristobyte-ui/spinner

# Or via pnpm
pnpm add -D @aristobyte-ui/spinner

🛠 Usage

import { Spinner } from "@aristobyte-ui/spinner";

export const Demo = () => (
  <div>
    <Spinner type="default" variant="primary" size="md" />
    <Spinner type="duo" variant="success" size="lg" />
    <Spinner type="pulse-duo" variant="error" size="sm" />
  </div>
);

| Prop | Type | Default | Description | | | - | -- | -- | | type | "default", "duo", "gradient", "pulse", "pulse-duo" | "default" | Defines the spinner animation style | | variant | "default", "primary", "secondary", "success", "error", "warning" | "default" | Semantic color variant | | size | "xsm", "sm", "md", "lg", "xlg" | "md" | Controls spinner dimensions | | className | string | "" | Optional additional class names |

📂 Presets Available

• Types: default, duo, gradient, pulse, pulse-duo
• Variants: default, primary, secondary, success, error, warning
• Sizes: xsm, sm, md, lg, xlg

🔧 Example in a Package

import { Spinner } from "@aristobyte-ui/spinner";

export const LoadingState = () => (
  <div className="flex justify-center items-center">
    <Spinner type="gradient" variant="primary" size="lg" />
  </div>
);

📊 Why This Matters

• Performance-first: Engineered with lightweight, GPU-accelerated CSS keyframes for smooth, non-blocking animations.
• Fully typed: TypeScript-first API ensures strict type safety and predictable integration across multiple projects.
• AristoByteUI ready: Fully interoperable with AristoByte’s design tokens, semantic color palette, and styling architecture.
• Flexible: Supports multiple animation types, semantic variants, and responsive sizing to fit any UI scenario.

🏆 Philosophy

• Modular architecture: Components are built for maximum reusability and composability.
• Declarative styling: SCSS modules maintain a clean separation of concerns while leveraging design tokens.
• Strict typing & runtime flexibility: Type-safe props with optional runtime overrides.
• Developer experience optimized: Intuitive API with predictable behavior and minimal setup.

📜 License

MIT © AristoByte

🛡 Shields Showcase