[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
update readme, exports
+91
-81
+6
-6
README.md
+6
-6
README.md
···
5
5
6
6
svelte v5 + tailwind v4
7
7
8
-
demo: https://flo-bit.dev/ui-kit
8
+
See all components here: https://flo-bit.dev/ui-kit
9
9
10
-
## How to use
10
+
## Quickstart
11
11
12
12
**Work in progress, only for testing purposes**
13
13
14
-
## 1. Create a new svelte project with tailwind css (including `@tailwindcss/typography` and `@tailwindcss/forms` plugins)
14
+
### 1. Create a new svelte project with tailwind css (including `@tailwindcss/typography` and `@tailwindcss/forms` plugins)
15
15
16
16
```bash
17
17
npx sv create my-project
18
18
```
19
19
20
-
## 2. Install fox-ui-svelte
20
+
### 2. Install fox-ui-svelte
21
21
22
22
```bash
23
23
npm install fox-ui-svelte
24
24
```
25
25
26
-
## 3. set theme variables in your app.css (changing `gray` and `blue` to your preferred colors, using find and replace).
26
+
### 3. set theme variables in your app.css (changing `gray` and `blue` to your preferred colors, using find and replace).
27
27
28
28
```css
29
29
@source "../node_modules/fox-ui-svelte";
···
55
55
}
56
56
```
57
57
58
-
## 4. Use the components
58
+
### 4. Use the components
59
59
60
60
```svelte
61
61
<script>
+21
src/lib/index.ts
+21
src/lib/index.ts
···
6
6
export { Avatar, AvatarGroup } from '$lib/components/base/avatar';
7
7
export { Badge } from '$lib/components/base/badge';
8
8
export { Button } from '$lib/components/base/button';
9
+
export { default as ImageCard } from '$lib/components/base/card/ImageCard.svelte';
10
+
export { default as ChatBubble } from '$lib/components/base/chat-bubble/ChatBubble.svelte';
11
+
export { Checkbox } from '$lib/components/base/checkbox';
12
+
export { default as Head } from '$lib/components/base/head/Head.svelte';
13
+
export { default as Heading } from '$lib/components/base/heading/Heading.svelte';
14
+
export { default as Image } from '$lib/components/base/image/Image.svelte';
15
+
export { default as ImageContainer } from '$lib/components/base/image-container/ImageContainer.svelte';
16
+
export { Input } from '$lib/components/base/input/';
17
+
export { Label } from '$lib/components/base/label/';
18
+
export { default as Modal } from '$lib/components/base/modal/Modal.svelte';
19
+
export { default as NumberInput } from '$lib/components/base/number-input/NumberInput.svelte';
20
+
export { default as Prose } from '$lib/components/base/prose/Prose.svelte';
21
+
export { default as ScrollArea } from '$lib/components/base/scroll-area/ScrollArea.svelte';
22
+
export { Slider } from '$lib/components/base/slider';
23
+
export { Toaster } from '$lib/components/base/sonner/';
24
+
export { toast } from 'svelte-sonner';
25
+
export { Switch } from '$lib/components/base/switch/';
26
+
export { Text as Paragraph } from '$lib/components/base/text/';
27
+
export { Textarea } from '$lib/components/base/textarea';
28
+
export { Tooltip } from '$lib/components/base/tooltip';
29
+
+1
-1
src/docs/preview/GithubCornerPreview.svelte
+1
-1
src/docs/preview/GithubCornerPreview.svelte
+1
-1
src/docs/cards/base/CardGithubCorner.svelte
+1
-1
src/docs/cards/base/CardGithubCorner.svelte
+62
src/lib/components/github-corner/GithubCorner.svelte
+62
src/lib/components/github-corner/GithubCorner.svelte
···
1
+
<script lang="ts">
2
+
import { cn } from '$lib/utils';
3
+
import type { HTMLAnchorAttributes } from 'svelte/elements';
4
+
5
+
type Props = HTMLAnchorAttributes;
6
+
let { target = '_blank', class: className, ...restProps }: Props = $props();
7
+
</script>
8
+
9
+
<a
10
+
{target}
11
+
class={cn(
12
+
'github-corner fill-accent-600 text-base-50 dark:fill-accent-500 dark:text-base-950 fixed -top-1 -right-1 z-50',
13
+
className
14
+
)}
15
+
{...restProps}
16
+
>
17
+
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
18
+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
19
+
<path
20
+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
21
+
fill="currentColor"
22
+
style="transform-origin: 130px 106px;"
23
+
class="octo-arm"
24
+
></path>
25
+
<path
26
+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
27
+
fill="currentColor"
28
+
class="octo-body"
29
+
></path>
30
+
</svg>
31
+
<span class="sr-only">View source on GitHub</span>
32
+
</a>
33
+
34
+
<style>
35
+
.github-corner:hover .octo-arm {
36
+
animation: octocat-wave 560ms ease-in-out;
37
+
}
38
+
39
+
@keyframes octocat-wave {
40
+
0%,
41
+
100% {
42
+
transform: rotate(0);
43
+
}
44
+
20%,
45
+
60% {
46
+
transform: rotate(-25deg);
47
+
}
48
+
40%,
49
+
80% {
50
+
transform: rotate(10deg);
51
+
}
52
+
}
53
+
54
+
@media (max-width: 500px) {
55
+
.github-corner:hover .octo-arm {
56
+
animation: none;
57
+
}
58
+
.github-corner .octo-arm {
59
+
animation: octocat-wave 560ms ease-in-out;
60
+
}
61
+
}
62
+
</style>
-11
src/lib/components/base/container/Container.svelte
-11
src/lib/components/base/container/Container.svelte
···
1
-
<script lang="ts">
2
-
import ScrollArea from '$lib/components/base/scroll-area/ScrollArea.svelte';
3
-
4
-
let { children } = $props();
5
-
</script>
6
-
7
-
<ScrollArea type="scroll" class="h-[100dvh] w-full" scrollbarYClasses="z-50">
8
-
<div class="mx-auto flex w-full max-w-2xl flex-col items-center justify-center gap-2 px-4 py-24">
9
-
{@render children?.()}
10
-
</div>
11
-
</ScrollArea>
-62
src/lib/components/base/github-corner/GithubCorner.svelte
-62
src/lib/components/base/github-corner/GithubCorner.svelte
···
1
-
<script lang="ts">
2
-
import { cn } from '$lib/utils';
3
-
import type { HTMLAnchorAttributes } from 'svelte/elements';
4
-
5
-
type Props = HTMLAnchorAttributes;
6
-
let { target = '_blank', class: className, ...restProps }: Props = $props();
7
-
</script>
8
-
9
-
<a
10
-
{target}
11
-
class={cn(
12
-
'github-corner fill-accent-600 text-base-50 dark:fill-accent-500 dark:text-base-950 fixed -top-1 -right-1 z-50',
13
-
className
14
-
)}
15
-
{...restProps}
16
-
>
17
-
<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
18
-
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
19
-
<path
20
-
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
21
-
fill="currentColor"
22
-
style="transform-origin: 130px 106px;"
23
-
class="octo-arm"
24
-
></path>
25
-
<path
26
-
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
27
-
fill="currentColor"
28
-
class="octo-body"
29
-
></path>
30
-
</svg>
31
-
<span class="sr-only">View source on GitHub</span>
32
-
</a>
33
-
34
-
<style>
35
-
.github-corner:hover .octo-arm {
36
-
animation: octocat-wave 560ms ease-in-out;
37
-
}
38
-
39
-
@keyframes octocat-wave {
40
-
0%,
41
-
100% {
42
-
transform: rotate(0);
43
-
}
44
-
20%,
45
-
60% {
46
-
transform: rotate(-25deg);
47
-
}
48
-
40%,
49
-
80% {
50
-
transform: rotate(10deg);
51
-
}
52
-
}
53
-
54
-
@media (max-width: 500px) {
55
-
.github-corner:hover .octo-arm {
56
-
animation: none;
57
-
}
58
-
.github-corner .octo-arm {
59
-
animation: octocat-wave 560ms ease-in-out;
60
-
}
61
-
}
62
-
</style>