Animated components for Replit Agent

A dark mode switch in one file

Free pieces also ship as the qodesign-free npm package. Install it, then copy the file below.

"use client";
import { useState } from "react";
import DayNightToggle from "qodesign-free/day-night-toggle";

export function ThemeSwitch() {
  const [night, setNight] = useState(false);

  return (
    <DayNightToggle
      width={120}
      night={night}
      label="Dark mode"
      onChange={(next) => {
        setNight(next);
        document.documentElement.classList.toggle("dark", next);
      }}
    />
  );
}

Pair it with Tailwind's class-based dark variant, or read the dark class in your own CSS.

Guides with the code and props

• Auth.js credentials login page
• Animated analytics dashboard
• AI chat UI demo for your landing page
• Supabase login page for Next.js
• Day / night theme toggle
• Monthly / yearly pricing toggle

Paid pieces start at $3 each, or get every one with the Shelf for $29, once.

Comparing libraries for Replit Agent

• qodesign vs AnimataAnimata is best for: free animated building blocks you copy and adapt.
• qodesign vs UiverseUiverse is best for: single small elements: buttons, loaders, toggles, checkboxes, inputs.

All comparisons, with prices read on each library's own site.