Usage

<Stats>67.81%</Stats>

Variants

Los stats pueden tener diferentes variantes. La variante predeterminada es primary. Las variantes disponibles son: primary, secondary, success, error, light y dark.

<Stats variant='primary'>67.81%</Stats>
<Stats variant='secondary'>67.81%</Stats>
<Stats variant='success'>67.81%</Stats>
<Stats variant='error'>67.81%</Stats>
<Stats variant='dark'>67.81%</Stats>

Light

<Stats variant='light'>67.81%</Stats>

No fill

<Stats variant='primary' fill={false}>67.81%</Stats>
<Stats variant='secondary' fill={false}>67.81%</Stats>
<Stats variant='success' fill={false}>67.81%</Stats>
<Stats variant='error' fill={false}>67.81%</Stats>
<Stats variant='dark' fill={false}>67.81%</Stats>

No fill light

<Stats variant='light' fill={false}>67.81%</Stats>

Sizes

Los stats pueden tener diferentes tamaños. El tamaño predeterminado es md. Los tamaños disponibles son: xs, sm, md, lg y xl.

<Stats size='xs'>67.81%</Stats>
<Stats size='sm'>67.81%</Stats>
<Stats size='md'>67.81%</Stats>
<Stats size='lg'>67.81%</Stats>
<Stats size='xl'>67.81%</Stats>

Remove icon

<Stats icon={false}>67.81%</Stats>

Custom icon

<Stats>
  <span slot='icon'>🖐️</span>
  <span>67.81%</span>
</Stats>

Example

<h1 class='flex items-center justify-center font-bold text-3xl sm:text-5xl gap-2'>
  Astron trends 
  <Stats class='mt-2'>
    +2.5%
  </Stats>
</h1>