[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
formatting
+154
-154
+1
-1
README.md
+1
-1
README.md
+1
-1
src/lib/cli.ts
+1
-1
src/lib/cli.ts
+1
-1
src/lib/components.json
+1
-1
src/lib/components.json
-1
src/lib/index.ts
-1
src/lib/index.ts
···
39
39
40
40
export { default as AddCopyCodeButtons } from '$lib/components/base/copy-code-button/AddCopyCodeButtons.svelte';
41
41
42
-
43
42
// colors components
44
43
export { default as ColorGradientPicker } from '$lib/components/colors/color-gradient-picker/ColorGradientPicker.svelte';
45
44
export { ColorPicker, PopoverColorPicker } from '$lib/components/colors/color-picker';
+1
-1
src/routes/+layout.svelte
+1
-1
src/routes/+layout.svelte
+2
-2
src/routes/+page.svelte
+2
-2
src/routes/+page.svelte
···
15
15
16
16
<div class="mx-auto flex w-full max-w-6xl flex-col items-start justify-center gap-8 px-8 py-24">
17
17
<h1
18
-
class="text-base-950 dark:text-base-50 mb-4 mt-16 max-w-2xl text-4xl font-bold tracking-tight text-pretty md:text-5xl md:leading-14"
18
+
class="text-base-950 dark:text-base-50 mt-16 mb-4 max-w-2xl text-4xl font-bold tracking-tight text-pretty md:text-5xl md:leading-14"
19
19
>
20
20
{count} UI components built with Tailwind 4 and Svelte 5
21
21
</h1>
22
22
23
-
<div class="flex gap-2 mb-16">
23
+
<div class="mb-16 flex gap-2">
24
24
<Button href={base + '/docs/quick-start'} class="mb-8">Quick Start</Button>
25
25
<Button variant="link" href={base + '/docs/philosophy'} class="mb-8"
26
26
>Learn more <span>→</span></Button
+1
-1
src/docs/preview/VideoPlayerPreview.svelte
+1
-1
src/docs/preview/VideoPlayerPreview.svelte
+2
-1
src/docs/site-components/Cards.svelte
+2
-1
src/docs/site-components/Cards.svelte
···
32
32
href={base + `/components/${category.href}/${card.href}`}
33
33
class="focus-visible:outline-accent-500 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2"
34
34
>
35
-
<span class="text-base-900 dark:text-base-50 mx-2 text-sm font-semibold group-hover:text-accent-600 group-hover:dark:text-accent-400 transition-colors duration-150"
35
+
<span
36
+
class="text-base-900 dark:text-base-50 group-hover:text-accent-600 group-hover:dark:text-accent-400 mx-2 text-sm font-semibold transition-colors duration-150"
36
37
>{card.label}</span
37
38
>
38
39
<span class="absolute inset-0"></span>
+7
-2
src/docs/cards/3d/CardModelPicker.svelte
+7
-2
src/docs/cards/3d/CardModelPicker.svelte
···
9
9
</script>
10
10
11
11
<div class="flex h-44 max-h-44 w-full max-w-full items-center justify-center gap-6">
12
-
<Image src={image} alt="Vehicle Monster Truck" class="scale-125" />
13
-
<Image src={image2} alt="Vehicle Racer" class="scale-125" containerClasses="bg-base-200 rounded-xl dark:bg-base-900" />
12
+
<Image src={image} alt="Vehicle Monster Truck" class="scale-125" />
13
+
<Image
14
+
src={image2}
15
+
alt="Vehicle Racer"
16
+
class="scale-125"
17
+
containerClasses="bg-base-200 rounded-xl dark:bg-base-900"
18
+
/>
14
19
<Image src={image3} alt="Vehicle Racer Low" class="scale-125" />
15
20
</div>
+1
-1
src/docs/cards/base/CardCard.svelte
+1
-1
src/docs/cards/base/CardCard.svelte
+10
-10
src/docs/cards/extras/CardSwiperCards.svelte
+10
-10
src/docs/cards/extras/CardSwiperCards.svelte
···
1
1
<script>
2
-
3
-
import { Button } from "$lib";
4
-
2
+
import { Button } from '$lib';
5
3
</script>
6
4
7
-
<div class="flex relative p-8">
8
-
<div class="bg-base-200/50 dark:bg-base-800/50 rounded-xl p-4 h-24 w-16 border border-base-300/50 dark:border-base-700/50">
9
-
</div>
10
-
<div class="-ml-8 bg-base-200 dark:bg-base-800 rounded-xl p-4 h-24 w-16 rotate-12 border border-base-300 dark:border-base-700">
11
-
</div>
5
+
<div class="relative flex p-8">
6
+
<div
7
+
class="bg-base-200/50 dark:bg-base-800/50 border-base-300/50 dark:border-base-700/50 h-24 w-16 rounded-xl border p-4"
8
+
></div>
9
+
<div
10
+
class="bg-base-200 dark:bg-base-800 border-base-300 dark:border-base-700 -ml-8 h-24 w-16 rotate-12 rounded-xl border p-4"
11
+
></div>
12
12
13
-
<div class="absolute bottom-2 flex w-full justify-between px-2 -ml-10">
13
+
<div class="absolute bottom-2 -ml-10 flex w-full justify-between px-2">
14
14
<Button size="iconSm">
15
15
<svg
16
16
xmlns="http://www.w3.org/2000/svg"
···
36
36
</svg>
37
37
</Button>
38
38
</div>
39
-
</div>
39
+
</div>
+1
-1
src/lib/components/base/number-input/NumberInput.svelte
+1
-1
src/lib/components/base/number-input/NumberInput.svelte
+1
-1
src/lib/components/base/popover/index.ts
+1
-1
src/lib/components/base/popover/index.ts
+1
-1
src/lib/components/base/prose/Prose.svelte
+1
-1
src/lib/components/base/prose/Prose.svelte
+11
-11
src/routes/(main)/components/base/alert/Example.svelte
+11
-11
src/routes/(main)/components/base/alert/Example.svelte
···
36
36
37
37
<h3>Preset Alerts</h3>
38
38
39
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
39
+
<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
40
40
<Alert title="Warning alert" type="warning">
41
41
<span>Alert Description</span>
42
42
</Alert>
43
43
44
-
<Alert title="Error alert" type="error">
45
-
<span>Alert Description</span>
46
-
</Alert>
44
+
<Alert title="Error alert" type="error">
45
+
<span>Alert Description</span>
46
+
</Alert>
47
47
48
-
<Alert title="Success alert" type="success">
49
-
<span>Alert Description</span>
50
-
</Alert>
48
+
<Alert title="Success alert" type="success">
49
+
<span>Alert Description</span>
50
+
</Alert>
51
51
52
-
<Alert title="Info alert" type="info">
53
-
<span>Alert Description</span>
54
-
</Alert>
55
-
</div>
52
+
<Alert title="Info alert" type="info">
53
+
<span>Alert Description</span>
54
+
</Alert>
55
+
</div>
+1
-1
src/routes/(main)/components/base/avatar/Example.svelte
+1
-1
src/routes/(main)/components/base/avatar/Example.svelte
+1
-1
src/routes/(main)/components/base/cards/Example.svelte
+1
-1
src/routes/(main)/components/base/cards/Example.svelte
+17
-18
src/routes/(main)/components/base/chat-bubble/Example.svelte
+17
-18
src/routes/(main)/components/base/chat-bubble/Example.svelte
···
4
4
import cute from '$docs/assets/images/cute.jpg?as=run';
5
5
</script>
6
6
7
-
8
-
<Box class="flex flex-col gap-3 not-prose">
7
+
<Box class="not-prose flex flex-col gap-3">
9
8
<ChatBubble side="right">
10
9
<p>Hello there</p>
11
10
</ChatBubble>
12
11
13
-
<ChatBubble>
14
-
<p>General Kenobi</p>
15
-
</ChatBubble>
12
+
<ChatBubble>
13
+
<p>General Kenobi</p>
14
+
</ChatBubble>
16
15
17
-
<ChatBubble side="right">
18
-
<p>This is a really long message that should wrap around the chat bubble and not overflow</p>
19
-
</ChatBubble>
20
-
<ChatBubble>
21
-
<p>
22
-
This is another really long message that should wrap around the chat bubble and not overflow
23
-
</p>
24
-
</ChatBubble>
16
+
<ChatBubble side="right">
17
+
<p>This is a really long message that should wrap around the chat bubble and not overflow</p>
18
+
</ChatBubble>
19
+
<ChatBubble>
20
+
<p>
21
+
This is another really long message that should wrap around the chat bubble and not overflow
22
+
</p>
23
+
</ChatBubble>
25
24
26
-
<ChatBubble side="right">
27
-
<p>This is me sending you an image</p>
25
+
<ChatBubble side="right">
26
+
<p>This is me sending you an image</p>
28
27
29
-
<ImageContainer src={cute} alt="cute cat" containerClasses="-mx-1.5 rounded-xl" />
30
-
</ChatBubble>
31
-
</Box>
28
+
<ImageContainer src={cute} alt="cute cat" containerClasses="-mx-1.5 rounded-xl" />
29
+
</ChatBubble>
30
+
</Box>
+1
-1
src/routes/(main)/components/base/checkbox/Example.svelte
+1
-1
src/routes/(main)/components/base/checkbox/Example.svelte
+6
-2
src/routes/(main)/components/base/image/Example.svelte
+6
-2
src/routes/(main)/components/base/image/Example.svelte
···
5
5
import cute2 from '$docs/assets/images/cute2.jpg?as=run';
6
6
</script>
7
7
8
-
9
8
<ImageContainer src={cute} alt="Such a cute animal" containerClasses="not-prose max-w-64" />
10
9
11
10
<h3>Overlay theme color</h3>
12
11
13
-
<ImageContainer src={cute2} alt="Another cute animal" useThemeColor={true} containerClasses="max-w-44 not-prose" />
12
+
<ImageContainer
13
+
src={cute2}
14
+
alt="Another cute animal"
15
+
useThemeColor={true}
16
+
containerClasses="max-w-44 not-prose"
17
+
/>
14
18
15
19
<h3>Show normal image on hover</h3>
16
20
+3
-3
src/routes/(main)/components/base/input/Example.svelte
+3
-3
src/routes/(main)/components/base/input/Example.svelte
···
4
4
5
5
<h3>Primary</h3>
6
6
7
-
<div class="flex flex-col gap-4 w-fit">
7
+
<div class="flex w-fit flex-col gap-4">
8
8
<Input sizeVariant="sm" placeholder="Enter text here (small)" />
9
9
<Input placeholder="Enter text here (default)" />
10
10
<Input sizeVariant="lg" placeholder="Enter text here (large)" />
···
12
12
13
13
<h3>Secondary</h3>
14
14
15
-
<div class="flex flex-col gap-4 w-fit">
15
+
<div class="flex w-fit flex-col gap-4">
16
16
<Input variant="secondary" sizeVariant="sm" placeholder="Enter text here (small)" />
17
17
<Input variant="secondary" placeholder="Enter text here (default)" />
18
18
<Input variant="secondary" sizeVariant="lg" placeholder="Enter text here (large)" />
19
-
</div>
19
+
</div>
+1
-1
src/routes/(main)/components/base/slider/Example.svelte
+1
-1
src/routes/(main)/components/base/slider/Example.svelte
+23
-24
src/routes/(main)/components/base/sonner/Example.svelte
+23
-24
src/routes/(main)/components/base/sonner/Example.svelte
···
2
2
import { Button, toast } from '$lib';
3
3
</script>
4
4
5
-
<div class="flex flex-wrap gap-4 not-prose">
5
+
<div class="not-prose flex flex-wrap gap-4">
6
6
<Button
7
7
onclick={() =>
8
8
toast('Hello there', {
···
10
10
})}>Default</Button
11
11
>
12
12
13
-
<Button
14
-
variant="green"
15
-
onclick={() =>
16
-
toast.success('Success!', {
17
-
description: "You are strong and wise and I'm very proud of you!"
18
-
})}>Success</Button
19
-
>
20
-
<Button
21
-
variant="red"
22
-
onclick={() =>
23
-
toast.error('Error!', {
24
-
description: 'These are not the droids you are looking for.'
25
-
})}>Error</Button
26
-
>
27
-
<Button
28
-
variant="blue"
29
-
onclick={() =>
30
-
toast.info('Info!', {
31
-
description: 'I heard spinning is a good trick.'
32
-
})}>Info</Button
33
-
>
34
-
35
-
</div>
13
+
<Button
14
+
variant="green"
15
+
onclick={() =>
16
+
toast.success('Success!', {
17
+
description: "You are strong and wise and I'm very proud of you!"
18
+
})}>Success</Button
19
+
>
20
+
<Button
21
+
variant="red"
22
+
onclick={() =>
23
+
toast.error('Error!', {
24
+
description: 'These are not the droids you are looking for.'
25
+
})}>Error</Button
26
+
>
27
+
<Button
28
+
variant="blue"
29
+
onclick={() =>
30
+
toast.info('Info!', {
31
+
description: 'I heard spinning is a good trick.'
32
+
})}>Info</Button
33
+
>
34
+
</div>
+2
-2
src/routes/(main)/components/base/switch/Example.svelte
+2
-2
src/routes/(main)/components/base/switch/Example.svelte
···
5
5
let checked2 = $state(true);
6
6
</script>
7
7
8
-
<div class="flex flex-col gap-2 not-prose">
8
+
<div class="not-prose flex flex-col gap-2">
9
9
<Switch bind:checked onCheckedChange={() => (checked2 = !checked2)} />
10
10
<Switch bind:checked={checked2} onCheckedChange={() => (checked = !checked)} />
11
11
<Switch disabled />
···
13
13
14
14
<h3>With Label</h3>
15
15
16
-
<div class="flex items-center space-x-2 not-prose">
16
+
<div class="not-prose flex items-center space-x-2">
17
17
<Switch id="terms-switch" aria-labelledby="terms-switch-label" />
18
18
<Label
19
19
id="terms-switch-label"
+2
-3
src/routes/(main)/components/base/tooltip/Example.svelte
+2
-3
src/routes/(main)/components/base/tooltip/Example.svelte
···
2
2
import { Tooltip, Button, toast } from '$lib';
3
3
4
4
function handleClick() {
5
-
toast.error('Don\'t click, just hover!')
5
+
toast.error("Don't click, just hover!");
6
6
}
7
7
</script>
8
-
9
8
10
9
<div class="flex w-full flex-col items-start gap-2 py-12">
11
10
<Tooltip text="Hello there!" withContext>
···
13
12
<Button {...props} onclick={handleClick}>Hover me</Button>
14
13
{/snippet}
15
14
</Tooltip>
16
-
</div>
15
+
</div>
+1
-1
src/routes/(main)/components/colors/color-gradient-picker/Example.svelte
+1
-1
src/routes/(main)/components/colors/color-gradient-picker/Example.svelte
+1
-1
src/routes/(main)/components/extras/swiper-cards/Example.svelte
+1
-1
src/routes/(main)/components/extras/swiper-cards/Example.svelte
+1
-5
src/routes/(main)/components/extras/swiper-cards/SwiperCards.md
+1
-5
src/routes/(main)/components/extras/swiper-cards/SwiperCards.md