@aristobyte-ui/switch

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

📦 Installation

``bash


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

`tsx
import { Switch } from '@aristobyte-ui/switch';

export const Demo = () => (
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

`tsx
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