@tanglemedia/svelte-starter-ui NPM

@tanglemedia/svelte-starter-ui

UI package with some simple yet effective UI components, that when used together with Svelte, and Flowbite-Svelte will make your front-end just look absolutely stunning.

The UI library packages is built on top of Flowbite-Svelte, so the recomendation from the developers of the packages are to use it with Flowbite-Svelte and most importantly:

if the UI package has the component you are looking for, use it, else look for the component on the Flowbite-Svelte library, they probably will have it.

Demo

On this section we are going to display how you can use some of the components that the UI package provides on your svelte app.

Button

In this case the Button component would act as a anchor tag.

<script lang='ts'>
	import { Button } from "@tanglemedia/svelte-starter-ui";
	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
</script>

<Button href="/posts/add" class="h-32">
    <div class="text-center flex flex-col gap-2 text-3xl">
        <FontAwesomeIcon icon={['far', 'square-plus']} size={'xl'}/>
        <span class="text-sm font-bold">{`UI Button`.toUpperCase()}</span>
    </div>
</Button>

Another interesting case you can do with the Button component from the UI package is background images and filter effect:

On this case the button will now display a background image and that image would have a filter with the primary color of the project, you can change that by changing the props of the component: Button

<script lang='ts'>
	import { Button } from "@tanglemedia/svelte-starter-ui";
	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
</script>

<Button href="/posts/add" class="h-32" backgroundImage={background}>
    <div class="text-center flex flex-col gap-2 text-3xl">
        <FontAwesomeIcon icon={['far', 'square-plus']} size={'xl'}/>
        <span class="text-sm font-bold">{`UI Button with image`.toUpperCase()}</span>
    </div>
</Button>