UI Den

Small, copyable interface effects and ready-made components extracted from my projects.

Componentslight-dark-effect
reactcssnpx1/2

A masked overlay reveals the next theme in a clean expanding circle from the toggle origin.

Radial theme wipe

A masked overlay reveals the next theme in a clean expanding circle from the toggle origin.

PackageSourceEffect

Use it

2 ways

Install the package

  1. Run .
  2. Import ui-den/styles.css once near your app root.
  3. Wrap your app with ThemeProvider and render ThemeToggle.

Copy the source

  1. Run .
  2. Import the generated CSS file from your target folder.
  3. Import ThemeProvider and ThemeToggle from the generated files.
radial
import { ThemeProvider, ThemeToggle } from "ui-den";
import "ui-den/styles.css";

export function App() {
  return (
    <ThemeProvider defaultTheme="system" transitionEffect="radial">
      <ThemeToggle />
      <YourApp />
    </ThemeProvider>
  );
}