Shadcn Button Theme Toggle

Theme toggle button with animated moon and sun icons. Built with the Button component. Uses cn alongside the shadcn primitives. A free, open source shadcn button example you can install with npx shadcn@latest add @reui/c-button-61 and edit as your own code.

Theme toggle button with animated moon and sun icons

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

Best for: A square sun and moon swap that rotates between light and dark, labelled with the next mode

When to use

Page, form and dialog actions in primary, secondary, outline, ghost, destructive and link weights
Icon only controls and sign in rows, such as close, search, copy, menu or theme switches and provider logos
Actions that report state or carry extras, such as a spinner, a saved check, a count or a shortcut

When not to use

A light, dark and system choice shown as 3 options at once: use the Toggle Group component
Several related actions joined edge to edge as one segmented control: use the Button Group component
A control that stays pressed on or off, such as bold in an editor toolbar: use the Toggle component
An action attached inside a text field, such as a search submit or a clear: use the Input Group component

Agent notes

theme is local useState, so a click never changes the page theme; call your theme provider from setTheme
The base twin Button defaults to type button, so pass type submit inside a form; the radix twin renders a plain button that submits by default
A link needs its anchor passed through render with nativeButton false on the base twin, or wrapped with asChild on the radix twin
Set data-icon to inline-start or inline-end on a leading or trailing icon so the text sizes trim the padding on that side

Markdownhttps://reui.io/components/button/c-button-61.md

MCPget_example("c-button-61")

Installnpx shadcn@latest add @reui/c-button-61

Full index for agents:llms.txtReUI MCP setup

Shadcn Components in Button Theme Toggle

Button

Dependencies

About Shadcn Button Theme Toggle

What You Can Build With Shadcn Button Theme Toggle

Composes Button, so it drops into any project already using those components.
Install it with the shadcn CLI: npx shadcn@latest add @reui/c-button-61
Open source and free, with the full source on this page to copy or adapt.

More Shadcn Button Examples

Default Default button
Secondary Secondary button
Outline Outline button
Ghost Ghost button
Destructive Destructive button
Link Link button variant
Extra Small Extra small button
Small Small button
Large Large button
Disabled Disabled button
Icon Button Icon button
Icon Right Button with an icon on the right

Related Shadcn Component Categories

Button Group
Open-source shadcn button group components for segmented controls, toolbar actions, and view switchers.
Calendar
Open-source shadcn calendar components for date picking, scheduling flows, and booking interfaces.
Card
Open-source shadcn card components for content previews, dashboard widgets, and product summaries.
Carousel
Open-source shadcn carousel components for image galleries, feature showcases, and testimonials.
Cascader
Nested multi-level selection with drill-down navigation, breadcrumbs, search and custom rows.
Chart
Open-source shadcn chart components for analytics dashboards, KPI tracking, and reports.

Frequently Asked Questions

When should I use Shadcn Button Theme Toggle?

Use it for a square sun and moon swap that rotates between light and dark, labelled with the next mode.

Shadcn Button as a whole fits:

Page, form and dialog actions in primary, secondary, outline, ghost, destructive and link weights
Icon only controls and sign in rows, such as close, search, copy, menu or theme switches and provider logos
Actions that report state or carry extras, such as a spinner, a saved check, a count or a shortcut

For a light, dark and system choice shown as 3 options at once, use the Toggle Group component. For several related actions joined edge to edge as one segmented control, use the Button Group component. For a control that stays pressed on or off, such as bold in an editor toolbar, use the Toggle component. For an action attached inside a text field, such as a search submit or a clear, use the Input Group component.

How do I install Shadcn Button Theme Toggle?

Run npx shadcn@latest add @reui/c-button-61. The CLI copies the source into your project, so you own the code and can edit it freely.

Is Shadcn Button Theme Toggle free to use?

Yes. Every ReUI component example is open source and free for personal and commercial projects.

Which components does Shadcn Button Theme Toggle use?

It composes Button. The shadcn CLI installs those alongside the example.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.