Counter

import { Counter, NumberCounter } from "@raydenui/ui";

<Counter />

const [value, setValue] = useState(5);
 
<Counter value={value} onChange={setValue} />

<Counter size="sm" />
<Counter size="md" />
<Counter size="lg" />

<Counter shape="rounded" />
<Counter shape="block" />
<Counter shape="pill" />

<Counter min={0} max={10} defaultValue={5} />

<Counter step={5} defaultValue={0} />

<Counter disabled defaultValue={3} />

<NumberCounter value={5} />

<NumberCounter value={3} size="sm" />
<NumberCounter value={12} size="md" />
<NumberCounter value={99} size="lg" />

<NumberCounter value={5} color="orange" />
<NumberCounter value={3} color="red" />
<NumberCounter value={8} color="grey" />
<NumberCounter value={2} color="white" />

// Shopping cart badge
<div className="relative">
  <ShoppingCartIcon className="w-6 h-6" />
  <NumberCounter
    value={3}
    size="sm"
    color="red"
    className="absolute -top-2 -right-2"
  />
</div>
 
// Notification count
<div className="flex items-center gap-2">
  <span>Messages</span>
  <NumberCounter value={12} size="sm" />
</div>