SkillsAdd

crafter-station/elements

theme-elements

Install theme switcher components from the Elements registry.

First seen Feb 27, 2026

Installation

$ npx skills add crafter-station/elements --skill theme-elements
View on skills.sh ↗ GitHub repository ↗

Summary

  • Install theme switcher components from the Elements registry.
  • Use when user needs dark mode toggles, theme switchers, light/dark buttons, or theme dropdowns.
  • Triggers on "theme switcher", "dark mode", "light mode", "theme toggle", "theme button", "switch theme", "dark mode toggle".

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

ai-elements Similar name
vercel/ai-elements

Build AI chat interfaces using ai-elements components — conversations, messages, tool displays,…

18.2K installs
agent-elements Similar name
21st-dev/agent-elements

Use whenever the user wants to build or modify a chat, agent, or tool-calling UI in a React 19 …

694 installs
sticky-and-fixed-elements Similar name
dembrandt/dembrandt-skills

Sticky and fixed positioning keeps critical UI persistent as the user scrolls — headers at the …

6 installs
universal-elements Similar name
dylantarre/animation-principles

Use when animating any UI element not covered by specific skills, or when applying general anim…

386 installs
forgotten-elements-reminder Similar name
wordflowlab/novel-writer-skills

Automatically reminds when important story elements (characters, plot lines, foreshadowing) hav…

296 installs
react-native-elements Similar name
pproenca/dot-skills

React Native Elements UI component library best practices for performance, theming, and proper …

223 installs

Also in this package

Other skills from crafter-station/elements · top by installs.

npx skills add crafter-station/elements
tech-logos 100 sfx-elements 74 logo-with-variants 72 create-element 61 ai-elements 50 elements 50 polar-elements 44 devtools-elements 33 uploadthing-elements 30 github-elements 29

Browse all from crafter-station/elements

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 520
License LICENSE
Default branch main
Open issues 15
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,732 B
  • docs SUMMARY.md 304 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 50 installs

SKILL.md

Theme Switcher Elements

6 theme switcher variants. Requires next-themes (auto-installed).

Install Pattern

npx shadcn@latest add @elements/theme-switcher-{variant}

Variants

Variant Install Description
Button @elements/theme-switcher-button Simple icon button
Classic @elements/theme-switcher-classic Classic toggle with label
Dropdown @elements/theme-switcher-dropdown Dropdown menu with options
Multi-Button @elements/theme-switcher-multi-button Button group (Light/Dark/System)
Switch @elements/theme-switcher-switch Toggle switch
Toggle @elements/theme-switcher-toggle Animated toggle

Quick Patterns

# Minimal (navbar icon)
npx shadcn@latest add @elements/theme-switcher-button

# Full control
npx shadcn@latest add @elements/theme-switcher-dropdown

# Settings page
npx shadcn@latest add @elements/theme-switcher-multi-button

Setup

Requires ThemeProvider from next-themes wrapping your app in the root layout:

import { ThemeProvider } from "next-themes";

export default function Layout({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  );
}

All variants are hydration-safe by default.

Discovery

Browse https://tryelements.dev/docs/theme