Indicator

Setup

<script>
  import { Indicator } from "svelte-5-ui-lib";
</script>

Interactive indicator

<div class="borer relative h-56 w-56 rounded-lg border-gray-300 m-8">
  <Indicator />
</div>

Examples

Visitors
Sessions
Customers
Revenue
<script lang="ts">
  import { Indicator } from 'svelte-5-ui-lib';
</script>

<div class="flex flex-wrap justify-start gap-4 md:justify-center">
  <span class="flex items-center"><Indicator size="sm" color="orange" class="me-1.5" />Visitors</span>
  <span class="flex items-center"><Indicator size="sm" color="purple" class="me-1.5" />Sessions</span>
  <span class="flex items-center"><Indicator size="sm" color="indigo" class="me-1.5" />Customers</span>
  <span class="flex items-center"><Indicator size="sm" color="teal" class="me-1.5" />Revenue</span>
</div>

Component data