> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nubea.com.ar/llms.txt
> Use this file to discover all available pages before exploring further.

# Contador de stock

> Mostrá las unidades restantes de un producto para generar escasez y urgencia.

## ¿Cómo funciona?

El Stock Counter muestra un indicador visual en la página de producto con la
cantidad de unidades disponibles. Cuando el stock es bajo, genera urgencia y
motiva al cliente a comprar antes de que se agote.

Así se ve en la ficha de producto:

<div
  style={{
border: '1px solid #e5e7eb',
borderRadius: 12,
padding: 16,
maxWidth: 320,
background: '#fff'
}}
>
  <div
    style={{
  height: 200,
  background: '#f9fafb',
  borderRadius: 8,
  marginBottom: 12,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
}}
  >
    <svg viewBox="0 0 200 200" style={{ width: '75%', height: '75%' }} xmlns="http://www.w3.org/2000/svg">
      <path d="M 50 40 L 70 25 L 100 35 L 130 25 L 150 40 L 175 60 L 165 90 L 145 80 L 145 175 L 55 175 L 55 80 L 35 90 L 25 60 Z" fill="#111827" stroke="#0a0e16" strokeWidth="1.5" strokeLinejoin="round" />

      <path d="M 80 32 Q 100 50 120 32" fill="none" stroke="#374151" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  </div>

  <div style={{ fontSize: 14, fontWeight: 600, color: '#111827' }}>
    Remera oversize negra
  </div>

  <div style={{ fontSize: 20, fontWeight: 700, marginTop: 4, color: '#111827' }}>
    \$24.990
  </div>

  <div
    style={{
  display: 'inline-flex',
  alignItems: 'center',
  gap: 6,
  marginTop: 10,
  background: '#fee2e2',
  color: '#b91c1c',
  padding: '6px 10px',
  borderRadius: 6,
  fontSize: 12,
  fontWeight: 600
}}
  >
    <span>🔥</span>
    <span>¡Solo quedan 3 unidades!</span>
  </div>

  <div
    style={{
  marginTop: 8,
  height: 6,
  background: '#f3f4f6',
  borderRadius: 3,
  overflow: 'hidden'
}}
  >
    <div style={{ width: '15%', height: '100%', background: '#dc2626' }} />
  </div>
</div>

## Configuración

* **Umbral**: Definí a partir de qué cantidad se muestra el contador (ej: menos
  de 10 unidades)
* **Estilo**: Elegí entre texto simple, barra de progreso o badge
* **Colores**: Configurá colores por nivel de urgencia (verde → amarillo → rojo)
* **Mensaje**: Personalizá el texto que acompaña al contador

<Warning>
  El Stock Counter usa datos reales de tu inventario. Asegurate de tener el
  stock actualizado en tu plataforma para que la información sea precisa.
</Warning>