Counter

Buttons 51

About

a simple counter

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Counter to your project and fits it to your theme.

Code

How Counter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// src/components/ui/demo.tsx

import { Component } from "@/components/ui/counter";

const DemoOne = () => {
  return (
    // The parent div uses Tailwind's dark mode classes to change its background.
    // This allows the component's internal theme to be clearly visible against the appropriate background.
    <div className="flex w-full h-screen justify-center items-center bg-black dark:bg-white transition-colors duration-300">
      <Component
        initialValue={5}
        places={[100, 10, 1]}
        fontSize={80}
        padding={5}
        fontWeight={900}
        min={0}
        max={999}
        step={1}
      />
    </div>
  );
};

export { DemoOne };