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="bg-primary-200 dark:bg-primary-900 z-10 shrink-0 ring-0 ring-white sm:ring-8 dark:ring-gray-900"
			>
				<CheckCircleSolid class="text-primary-600 dark:text-primary-300 h-6 w-6" />
			</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="bg-primary-200 dark:bg-primary-900 z-10 shrink-0 ring-0 ring-white sm:ring-8 dark:ring-gray-900"
			>
				<CheckCircleSolid class="text-primary-600 dark:text-primary-300 h-6 w-6" />
			</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="bg-primary-200 dark:bg-primary-900 z-10 shrink-0 ring-0 ring-white sm:ring-8 dark:ring-gray-900"
			>
				<CheckCircleSolid class="text-primary-600 dark:text-primary-300 h-6 w-6" />
			</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="bg-primary-200 dark:bg-primary-900 z-10 shrink-0 ring-0 ring-white sm:ring-8 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="bg-primary-200 dark:bg-primary-900 z-10 shrink-0 ring-0 ring-white sm:ring-8 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="bg-primary-200 dark:bg-primary-900 z-10 shrink-0 ring-0 ring-white sm:ring-8 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