---
name: "@toggles"
slug: "toggles"
description: "Animated dark/light mode toggles"
category: "Animated components"
tags: ["animation", "buttons"]
framework: "react"
license: null
author: "alfiejones"
website: "https://toggles.dev"
github: "https://github.com/alfiejones/theme-toggles"
registry: "https://toggles.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 787
component_count: 14
generated_at: "2026-09-21T01:50:16.753Z"
---

# @toggles

Animated dark/light mode toggles

## Links

- Website: https://toggles.dev
- GitHub: https://github.com/alfiejones/theme-toggles
- Registry JSON: https://toggles.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/toggles
- This file: https://sh4dcn.vercel.app/md/toggles.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://toggles.dev/r/registry.json
pnpm dlx shadcn@latest add https://toggles.dev/r/registry.json
bunx shadcn@latest add https://toggles.dev/r/registry.json
# clone the source repo
git clone https://github.com/alfiejones/theme-toggles.git
# fetch the raw registry index
curl -s https://toggles.dev/r/registry.json
```

## Components (14)

| name | type | description | install |
| --- | --- | --- | --- |
| around | registry:block | An animated sun-and-moon theme toggle with a sweeping transition. | `npx shadcn@latest add https://toggles.dev/r/around.json` |
| classic | registry:block | An animated classic sun-and-moon theme toggle. | `npx shadcn@latest add https://toggles.dev/r/classic.json` |
| dark-inner | registry:block | An animated theme toggle with an inward rotating icon. | `npx shadcn@latest add https://toggles.dev/r/dark-inner.json` |
| dark-side | registry:block | An animated theme toggle with a side-rotating icon. | `npx shadcn@latest add https://toggles.dev/r/dark-side.json` |
| eclipse | registry:block | An animated theme toggle with an eclipse transition. | `npx shadcn@latest add https://toggles.dev/r/eclipse.json` |
| expand | registry:block | An animated theme toggle with an expanding sun-and-moon transition. | `npx shadcn@latest add https://toggles.dev/r/expand.json` |
| spin | registry:block | An animated theme toggle with a spinning sun-and-moon transition. | `npx shadcn@latest add https://toggles.dev/r/spin.json` |
| half-sun | registry:block | An animated theme toggle with a half-sun rotation. | `npx shadcn@latest add https://toggles.dev/r/half-sun.json` |
| horizon | registry:block | An animated theme toggle with a horizon-inspired reveal. | `npx shadcn@latest add https://toggles.dev/r/horizon.json` |
| inner-moon | registry:block | An animated theme toggle with an inner-moon rotation. | `npx shadcn@latest add https://toggles.dev/r/inner-moon.json` |
| lightbulb | registry:block | An animated theme toggle inspired by a lightbulb. | `npx shadcn@latest add https://toggles.dev/r/lightbulb.json` |
| light-switch | registry:block | An animated theme toggle inspired by a wall switch. | `npx shadcn@latest add https://toggles.dev/r/light-switch.json` |
| simple | registry:block | A compact animated sun-and-moon theme toggle. | `npx shadcn@latest add https://toggles.dev/r/simple.json` |
| within | registry:block | An animated theme toggle with a nested sun-and-moon transition. | `npx shadcn@latest add https://toggles.dev/r/within.json` |

## For AI agents

```text
You are adding components from @toggles to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/toggles.md) for the component list.
2. Fetch the machine-readable index: https://toggles.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: toggles).
```