svelte icon Svelte 5 UI lib
  • Coverage
  • About
  • Repo

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>

Legend

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">
  <div class="flex items-center"><Indicator size="sm" color="orange" class="me-1.5" />Visitors</div>
  <div class="flex items-center"><Indicator size="sm" color="purple" class="me-1.5" />Sessions</div>
  <div class="flex items-center"><Indicator size="sm" color="indigo" class="me-1.5" />Customers</div>
  <div class="flex items-center"><Indicator size="sm" color="teal" class="me-1.5" />Revenue</div>
</div>

Count

<script lang="ts">
  import { Button, Indicator } from 'svelte-5-ui-lib';
  import { EnvelopeSolid } from "flowbite-svelte-icons";
</script>

<div class="flex justify-center">
  <Button size="lg" class="relative">
    <EnvelopeSolid class="me-2 h-4 w-4 text-white dark:text-white" />
    <span class="sr-only">Notifications</span>
    Messages
    <Indicator color="red" border size="xl" placement="top-right">
      <span class="text-xs font-bold text-white">8</span>
    </Indicator>
  </Button>
</div>

Status

<script lang="ts">
  import { Avatar } from 'svelte-5-ui-lib';
</script>

<div class="flex justify-center">
  <Avatar src="/images/profile-picture-5.webp" dot={{ color: "green", size: "lg", placement: "top-right" }} />
  <Avatar src="/images/profile-picture-5.webp" dot={{ color: "red", size: "lg", placement: "top-right" }} />
</div>

Badge

  • Neil image

    Neil Sims

    email@flowbite.com

    Available
  • Bonnie image

    Bonnie Green

    email@flowbite.com

    Unavailable 
<script lang="ts">
  import { Avatar, Badge, Indicator } from 'svelte-5-ui-lib';
</script>

<div class="flex gap-2">
  <ul class="w-full max-w-sm divide-y divide-gray-200 dark:divide-gray-700">
    <li class="py-3 sm:py-4">
      <div class="flex items-center space-x-3 rtl:space-x-reverse">
        <Avatar src="/images/profile-picture-5.webp" alt="Neil image" />
        <div class="min-w-0 flex-1">
          <p class="truncate text-sm font-semibold text-gray-900 dark:text-white">Neil Sims</p>
          <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
        </div>
        <Badge color="green" rounded class="px-2.5 py-0.5">
          <Indicator color="green" size="xs" class="me-1" />Available
        </Badge>
      </div>
    </li>
    <li class="py-3 sm:py-4">
      <div class="flex items-center space-x-3 rtl:space-x-reverse">
        <div class="flex-shrink-0">
          <Avatar src="/images/profile-picture-4.webp" alt="Bonnie image" />
        </div>
        <div class="min-w-0 flex-1">
          <p class="truncate text-sm font-semibold text-gray-900 dark:text-white">Bonnie Green</p>
          <p class="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
        </div>
        <Badge color="red" rounded class="px-2.5 py-0.5">
          <Indicator color="red" size="xs" class="me-1" />Unavailable
        </Badge>
      </div>
    </li>
  </ul>
</div>

Stepper

  1. Step 1

  2. Step 2

  3. Step 2

  4. Step 3

  1. Step 1

  2. Step 2

  3. Step 2

  4. Step 3

<script lang="ts">
  import { Indicator } from 'svelte-5-ui-lib';
  import { CheckCircleSolid } from "flowbite-svelte-icons";
</script>

<ol class="flex items-center">
  <li class="relative mb-6 w-full">
    <div class="flex items-center">
      <Indicator size="xl" class="z-10 shrink-0 bg-primary-200 ring-0 ring-white sm:ring-8 dark:bg-primary-900 dark:ring-gray-900">
        <CheckCircleSolid class="h-6 w-6 text-primary-600 dark:text-primary-300" />
      </Indicator>
      <div class="flex h-0.5 w-full bg-gray-200 dark:bg-gray-700"></div>
    </div>
    <div class="mt-3">
      <h3 class="font-medium text-gray-900 dark:text-white">Step 1</h3>
    </div>
  </li>
  <li class="relative mb-6 w-full">
    <div class="flex items-center">
      <Indicator size="xl" class="z-10 shrink-0 bg-primary-200 ring-0 ring-white sm:ring-8 dark:bg-primary-900 dark:ring-gray-900">
        <CheckCircleSolid class="h-6 w-6 text-primary-600 dark:text-primary-300" />
      </Indicator>
      <div class="flex h-0.5 w-full bg-gray-200 dark:bg-gray-700"></div>
    </div>
    <div class="mt-3">
      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
    </div>
  </li>
  <li class="relative mb-6 w-full">
    <div class="flex items-center">
      <Indicator size="xl" class="z-10 shrink-0 bg-primary-200 ring-0 ring-white sm:ring-8 dark:bg-primary-900 dark:ring-gray-900">
        <CheckCircleSolid class="h-6 w-6 text-primary-600 dark:text-primary-300" />
      </Indicator>
      <div class="flex h-0.5 w-full bg-gray-200 dark:bg-gray-700"></div>
    </div>
    <div class="mt-3">
      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
    </div>
  </li>
  <li class="relative mb-6 w-full">
    <div class="flex items-center">
      <Indicator size="xl" color="blue" class="z-10 shrink-0 ring-0 ring-white sm:ring-8 dark:bg-gray-700 dark:ring-gray-900">
        <CheckCircleSolid class="h-6 w-6 text-gray-800 dark:text-gray-300" />
      </Indicator>
    </div>
    <div class="mt-3">
      <h3 class="font-medium text-gray-900 dark:text-white">Step 3</h3>
    </div>
  </li>
</ol>
<ol class="flex items-center">
  <li class="relative mb-6 w-full">
    <div class="flex items-center">
      <Indicator size="xl" class="z-10 shrink-0 bg-primary-200 ring-0 ring-white sm:ring-8 dark:bg-primary-900 dark:ring-gray-900">
        <Indicator color="orange" />
      </Indicator>
      <div class="flex h-0.5 w-full bg-gray-200 dark:bg-gray-700"></div>
    </div>
    <div class="mt-3">
      <h3 class="font-medium text-gray-900 dark:text-white">Step 1</h3>
    </div>
  </li>
  <li class="relative mb-6 w-full">
    <div class="flex items-center">
      <Indicator size="xl" class="z-10 shrink-0 bg-primary-200 ring-0 ring-white sm:ring-8 dark:bg-primary-900 dark:ring-gray-900">
        <Indicator color="orange" />
      </Indicator>
      <div class="flex h-0.5 w-full bg-gray-200 dark:bg-gray-700"></div>
    </div>
    <div class="mt-3">
      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
    </div>
  </li>
  <li class="relative mb-6 w-full">
    <div class="flex items-center">
      <Indicator size="xl" class="z-10 shrink-0 bg-primary-200 ring-0 ring-white sm:ring-8 dark:bg-primary-900 dark:ring-gray-900">
        <Indicator color="orange" />
      </Indicator>
      <div class="flex h-0.5 w-full bg-gray-200 dark:bg-gray-700"></div>
    </div>
    <div class="mt-3">
      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
    </div>
  </li>
  <li class="relative mb-6 w-full">
    <div class="flex items-center">
      <Indicator size="xl" class="z-10 shrink-0 ring-0 ring-white sm:ring-8 dark:bg-gray-700 dark:ring-gray-900">
        <Indicator color="emerald" class="dark:!bg-gray-300" />
      </Indicator>
    </div>
    <div class="mt-3">
      <h3 class="font-medium text-gray-900 dark:text-white">Step 3</h3>
    </div>
  </li>
</ol>

Component data

codewithshin.com
  • Repo
  • About