Vibes logo

Counter

Installation

Run the following command

npx vibes@latest add counter

Usage

import { Counter } from '@/vibes/soul/primitives/counter';function Usage() {  return (       <Counter />  );}

API Reference

CounterProps

PropTypeDefault
className
string
current
number
0
max
number
10
decrementAriaLabel
string
'Decrease count'
incrementAriaLabel
string
'Increase count'

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --counter-focus: var(--primary);  --counter-font-family: var(--font-family-body);  --counter-background: var(--background);  --counter-background-hover: color-mix(in oklab, var(--contrast-100) 50%, transparent);  --counter-border: var(--contrast-100);  --counter-text: var(--foreground);  --counter-icon-hover: var(--foreground);  --counter-icon: var(--contrast-300);}