@aristobyte-ui/switch

A highly flexible and type-safe Switch component for React with multiple sizes, variants, and label alignment options.

📦 Installation

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

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

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

🛠 Usage

import { Switch } from "@aristobyte-ui/switch";

export const Demo = () => (
  <Switch
    label="Enable notifications"
    alignLabel="horizontal"
    switchSize="md"
    variant="primary"
    checked={true}
    onChange={() => console.log("Toggled!")}
  />
);

📂 Presets Available

alignLabel: "horizontal" | "vertical" (default: "vertical")

switchSize: "xsm" | "sm" | "md" | "lg" | "xlg" (default: "md")

variant: "default" | "primary" | "secondary" | "success" | "error" | "warning" (default: "default")

trackIcon & thumbIcon: Optional React components for custom icons

disabled: Boolean flag to disable switch

🔧 Example in a Package

<Switch
  label="Dark Mode"
  switchSize="lg"
  variant="secondary"
  trackIcon={{ checked: CheckIcon, unchecked: CloseIcon }}
  thumbIcon={StarIcon}
  checked={false}
/>

📊 Why This Matters

• Performance-first: Lightweight CSS transitions ensure smooth toggling with zero layout thrashing.
• Fully typed: TypeScript-first API for predictable integration and IDE autocomplete.
• AristoByteUI ready: Integrates seamlessly with design tokens and SCSS modules.
• Flexible: Supports multiple sizes, label alignments, variants, and custom icons.

🏆 Philosophy

• Modular architecture: Switch component is fully composable.
• Declarative styling: SCSS modules keep styles maintainable and scoped.
• Strict typing & runtime flexibility: Props fully typed while allowing runtime overrides.
• Developer experience optimized: Easy to use with predictable behavior and minimal boilerplate.

📜 License

MIT © AristoByte

🛡 Shields Showcase