Shadcn Templates
toggles

Toggles

Animated dark/light mode toggles

Visit website
Free
Price
Sep 16, 2026
Listed
Toggles screenshotOpen Toggles

Overview

Toggles is an open-source collection of animated dark/light theme toggle components for React, Svelte and Vue, built by Alfie Jones. Each toggle can be installed with the shadcn CLI, installed from npm, or copied as source.

The shadcn registry contains 14 toggle blocks, each with a different animation.

Features

  • 14 animated toggles: Classic, Around, Dark Inner, Dark Side, Eclipse, Expand, Spin, Half Sun, Horizon, Inner Moon, Lightbulb, Light Switch, Simple and Within.
  • Three frameworks: Toggles are offered for React, Svelte and Vue.
  • Three install paths: Install with shadcn/ui, from npm, or by copying the source.
  • Per-toggle pages: Each toggle links to its own page on the site.

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @toggles/component-name

Similar listings

All Component Library
Shadcn UI screenshot
shadcn-ui's avatar

Shadcn UI

shadcn/ui is a collection of beautifully designed, accessible, and customizable UI components for React, built on top of Radix UI and styled with Tailwind CSS. Shadcn revolutionized UI libraries with a copy-paste model, giving developers full control without dependencies. Its component registry l...

Kibo UI screenshot
haydenbleasel's avatar

Kibo UI

A custom registry of composable, accessible and open source shadcn/ui components.

Magic UI screenshot
magicuidesign's avatar

Magic UI

UI library for design engineers — animated components and effects to copy and paste, plus 50+ premium sections and templates with Framer Motion.

React Bits screenshot
react-bits's avatar

React Bits

React Bits is a comprehensive collection of animated, interactive, and fully customizable React components designed for developers looking to create memorable websites.