[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 package.json, README, add license to all packages, bump all to 0.2.0
+327
-477
+21
packages/3d/LICENSE
+21
packages/3d/LICENSE
···
1
+
MIT License Copyright (c) 2025 flo-bit
2
+
3
+
Permission is hereby granted, free of
4
+
charge, to any person obtaining a copy of this software and associated
5
+
documentation files (the "Software"), to deal in the Software without
6
+
restriction, including without limitation the rights to use, copy, modify, merge,
7
+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8
+
permit persons to whom the Software is furnished to do so, subject to the
9
+
following conditions:
10
+
11
+
The above copyright notice and this permission notice
12
+
(including the next paragraph) shall be included in all copies or substantial
13
+
portions of the Software.
14
+
15
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16
+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18
+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19
+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20
+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+
THE SOFTWARE.
+9
-72
packages/3d/README.md
+9
-72
packages/3d/README.md
···
1
1
# 🦊 fox ui
2
2
3
+
svelte 5 + tailwind 4 ui kit, 3d components
4
+
5
+
- [Depth 3D](https://flo-bit.dev/ui-kit/components/3d/depth-3d)
6
+
- [Model Picker](https://flo-bit.dev/ui-kit/components/3d/model-picker)
7
+
- [Voxel Art](https://flo-bit.dev/ui-kit/components/3d/voxel-art)
8
+
3
9
> **This is a public alpha release. Expect bugs and breaking changes.**
4
10
5
-
svelte v5 + tailwind v4
11
+
[See all components here](https://flo-bit.dev/ui-kit)
6
12
7
-
[See all components here](https://flo-bit.dev/ui-kit)
13
+
For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
8
14
9
15
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
10
16
11
-
## Quickstart
12
-
13
-
### 1. Create a new svelte project with tailwind css (including `@tailwindcss/typography` and `@tailwindcss/forms` plugins)
14
-
15
-
```bash
16
-
npx sv create my-project
17
-
```
18
-
19
-
### 2. Install fuchs-ui
20
-
21
-
```bash
22
-
npm install @fuxui/base
23
-
```
24
-
25
-
### 3. set theme variables in your app.css (changing `zinc` and `emerald` to your preferred colors, using find and replace).
26
-
27
-
```css
28
-
@source "../node_modules/@fuxui";
29
-
30
-
@theme {
31
-
--color-base-50: var(--color-zinc-50);
32
-
--color-base-100: var(--color-zinc-100);
33
-
--color-base-200: var(--color-zinc-200);
34
-
--color-base-300: var(--color-zinc-300);
35
-
--color-base-400: var(--color-zinc-400);
36
-
--color-base-500: var(--color-zinc-500);
37
-
--color-base-600: var(--color-zinc-600);
38
-
--color-base-700: var(--color-zinc-700);
39
-
--color-base-800: var(--color-zinc-800);
40
-
--color-base-900: var(--color-zinc-900);
41
-
--color-base-950: var(--color-zinc-950);
42
-
43
-
--color-accent-50: var(--color-emerald-50);
44
-
--color-accent-100: var(--color-emerald-100);
45
-
--color-accent-200: var(--color-emerald-200);
46
-
--color-accent-300: var(--color-emerald-300);
47
-
--color-accent-400: var(--color-emerald-400);
48
-
--color-accent-500: var(--color-emerald-500);
49
-
--color-accent-600: var(--color-emerald-600);
50
-
--color-accent-700: var(--color-emerald-700);
51
-
--color-accent-800: var(--color-emerald-800);
52
-
--color-accent-900: var(--color-emerald-900);
53
-
--color-accent-950: var(--color-emerald-950);
54
-
}
55
-
```
56
-
57
-
### 4. Use the components
58
-
59
-
```svelte
60
-
<script>
61
-
import { Button } from '@fuxui/base';
62
-
</script>
63
-
64
-
<Button onclick={() => alert('clicked')}>Click me</Button>
65
-
```
66
-
67
-
## Development
68
-
69
-
If you want to contribute to the project, please open an issue first describing the feature you want to add.
70
-
71
-
Clone the repo, install dependencies and run the dev server
72
-
73
-
```bash
74
-
git clone https://github.com/flo-bit/ui-kit.git
75
-
cd ui-kit
76
-
pnpm install
77
-
pnpm run dev
78
-
```
79
-
80
-
The ui-kit library is located in `packages/` (`packages/base` for the base package), the documentation is in `apps/docs`.
17
+
For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).
+17
-2
packages/3d/package.json
+17
-2
packages/3d/package.json
···
1
1
{
2
2
"name": "@fuxui/3d",
3
3
"private": false,
4
-
"version": "0.0.9",
4
+
"version": "0.2.0",
5
5
"type": "module",
6
6
"scripts": {
7
7
"dev": "vite dev",
···
78
78
"peerDependencies": {
79
79
"svelte": ">=5",
80
80
"tailwindcss": ">=3"
81
-
}
81
+
},
82
+
"keywords": [
83
+
"svelte",
84
+
"ui-kit",
85
+
"3d",
86
+
"components"
87
+
],
88
+
"description": "ui kit - svelte 5 + tailwind 4 - 3d components",
89
+
"homepage": "https://flo-bit.dev/ui-kit",
90
+
"repository": {
91
+
"type": "git",
92
+
"url": "git+https://github.com/flo-bit/ui-kit.git"
93
+
},
94
+
"author": "flo-bit (http://flo-bit.dev/)",
95
+
"bugs": "https://github.com/flo-bit/ui-kit/issues",
96
+
"license": "MIT"
82
97
}
+21
packages/base/LICENSE
+21
packages/base/LICENSE
···
1
+
MIT License Copyright (c) 2025 flo-bit
2
+
3
+
Permission is hereby granted, free of
4
+
charge, to any person obtaining a copy of this software and associated
5
+
documentation files (the "Software"), to deal in the Software without
6
+
restriction, including without limitation the rights to use, copy, modify, merge,
7
+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8
+
permit persons to whom the Software is furnished to do so, subject to the
9
+
following conditions:
10
+
11
+
The above copyright notice and this permission notice
12
+
(including the next paragraph) shall be included in all copies or substantial
13
+
portions of the Software.
14
+
15
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16
+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18
+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19
+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20
+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+
THE SOFTWARE.
+32
-72
packages/base/README.md
+32
-72
packages/base/README.md
···
1
1
# 🦊 fox ui
2
2
3
-
> **This is a public alpha release. Expect bugs and breaking changes.**
4
-
5
-
svelte v5 + tailwind v4
6
-
7
-
[See all components here](https://flo-bit.dev/ui-kit)
8
-
9
-
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
10
-
11
-
## Quickstart
12
-
13
-
### 1. Create a new svelte project with tailwind css (including `@tailwindcss/typography` and `@tailwindcss/forms` plugins)
14
-
15
-
```bash
16
-
npx sv create my-project
17
-
```
18
-
19
-
### 2. Install fuchs-ui
20
-
21
-
```bash
22
-
npm install @fuxui/base
23
-
```
24
-
25
-
### 3. set theme variables in your app.css (changing `zinc` and `emerald` to your preferred colors, using find and replace).
26
-
27
-
```css
28
-
@source "../node_modules/@fuxui";
29
-
30
-
@theme {
31
-
--color-base-50: var(--color-zinc-50);
32
-
--color-base-100: var(--color-zinc-100);
33
-
--color-base-200: var(--color-zinc-200);
34
-
--color-base-300: var(--color-zinc-300);
35
-
--color-base-400: var(--color-zinc-400);
36
-
--color-base-500: var(--color-zinc-500);
37
-
--color-base-600: var(--color-zinc-600);
38
-
--color-base-700: var(--color-zinc-700);
39
-
--color-base-800: var(--color-zinc-800);
40
-
--color-base-900: var(--color-zinc-900);
41
-
--color-base-950: var(--color-zinc-950);
42
-
43
-
--color-accent-50: var(--color-emerald-50);
44
-
--color-accent-100: var(--color-emerald-100);
45
-
--color-accent-200: var(--color-emerald-200);
46
-
--color-accent-300: var(--color-emerald-300);
47
-
--color-accent-400: var(--color-emerald-400);
48
-
--color-accent-500: var(--color-emerald-500);
49
-
--color-accent-600: var(--color-emerald-600);
50
-
--color-accent-700: var(--color-emerald-700);
51
-
--color-accent-800: var(--color-emerald-800);
52
-
--color-accent-900: var(--color-emerald-900);
53
-
--color-accent-950: var(--color-emerald-950);
54
-
}
55
-
```
3
+
svelte 5 + tailwind 4 ui kit, base components
56
4
57
-
### 4. Use the components
58
-
59
-
```svelte
60
-
<script>
61
-
import { Button } from '@fuxui/base';
62
-
</script>
63
-
64
-
<Button onclick={() => alert('clicked')}>Click me</Button>
65
-
```
5
+
- [Accordion](https://flo-bit.dev/ui-kit/components/base/accordion)
6
+
- [Alert](https://flo-bit.dev/ui-kit/components/base/alert)
7
+
- [Avatar](https://flo-bit.dev/ui-kit/components/base/avatar)
8
+
- [Badge](https://flo-bit.dev/ui-kit/components/base/badge)
9
+
- [Box](https://flo-bit.dev/ui-kit/components/base/box)
10
+
- [Button](https://flo-bit.dev/ui-kit/components/base/button)
11
+
- [Card](https://flo-bit.dev/ui-kit/components/base/cards)
12
+
- [Chat Bubble](https://flo-bit.dev/ui-kit/components/base/chat-bubble)
13
+
- [Checkbox](https://flo-bit.dev/ui-kit/components/base/checkbox)
14
+
- [Head](https://flo-bit.dev/ui-kit/components/base/head)
15
+
- [Heading](https://flo-bit.dev/ui-kit/components/base/image)
16
+
- [Modals](https://flo-bit.dev/ui-kit/components/base/modal)
17
+
- [Number Input](https://flo-bit.dev/ui-kit/components/base/number-input)
18
+
- [Popover](https://flo-bit.dev/ui-kit/components/base/popover)
19
+
- [Prose](https://flo-bit.dev/ui-kit/components/base/prose)
20
+
- [Scroll Area](https://flo-bit.dev/ui-kit/components/base/scroll-area)
21
+
- [Select](https://flo-bit.dev/ui-kit/components/base/select)
22
+
- [Sidebar](https://flo-bit.dev/ui-kit/components/base/sidebar)
23
+
- [Slider](https://flo-bit.dev/ui-kit/components/base/slider)
24
+
- [Sonner](https://flo-bit.dev/ui-kit/components/base/sonner)
25
+
- [Switch](https://flo-bit.dev/ui-kit/components/base/switch)
26
+
- [Tabs](https://flo-bit.dev/ui-kit/components/base/tabs)
27
+
- [Textarea](https://flo-bit.dev/ui-kit/components/base/textarea)
28
+
- [Toggle](https://flo-bit.dev/ui-kit/components/base/toggle)
29
+
- [Toggle Group](https://flo-bit.dev/ui-kit/components/base/toggle-group)
30
+
- [Tooltip](https://flo-bit.dev/ui-kit/components/base/tooltip)
66
31
67
-
## Development
32
+
> **This is a public alpha release. Expect bugs and breaking changes.**
68
33
69
-
If you want to contribute to the project, please open an issue first describing the feature you want to add.
34
+
[See all components here](https://flo-bit.dev/ui-kit)
70
35
71
-
Clone the repo, install dependencies and run the dev server
36
+
For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
72
37
73
-
```bash
74
-
git clone https://github.com/flo-bit/ui-kit.git
75
-
cd ui-kit
76
-
pnpm install
77
-
pnpm run dev
78
-
```
38
+
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
79
39
80
-
The ui-kit library is located in `packages/` (`packages/base` for the base package), the documentation is in `apps/docs`.
40
+
For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).
+17
-2
packages/base/package.json
+17
-2
packages/base/package.json
···
1
1
{
2
2
"name": "@fuxui/base",
3
3
"private": false,
4
-
"version": "0.0.9",
4
+
"version": "0.2.0",
5
5
"type": "module",
6
6
"scripts": {
7
7
"dev": "vite dev",
···
78
78
"peerDependencies": {
79
79
"svelte": ">=5",
80
80
"tailwindcss": ">=3"
81
-
}
81
+
},
82
+
"keywords": [
83
+
"svelte",
84
+
"ui-kit",
85
+
"3d",
86
+
"components"
87
+
],
88
+
"description": "ui kit - svelte 5 + tailwind 4 - base components",
89
+
"homepage": "https://flo-bit.dev/ui-kit",
90
+
"repository": {
91
+
"type": "git",
92
+
"url": "git+https://github.com/flo-bit/ui-kit.git"
93
+
},
94
+
"author": "flo-bit (http://flo-bit.dev/)",
95
+
"bugs": "https://github.com/flo-bit/ui-kit/issues",
96
+
"license": "MIT"
82
97
}
+21
packages/colors/LICENSE
+21
packages/colors/LICENSE
···
1
+
MIT License Copyright (c) 2025 flo-bit
2
+
3
+
Permission is hereby granted, free of
4
+
charge, to any person obtaining a copy of this software and associated
5
+
documentation files (the "Software"), to deal in the Software without
6
+
restriction, including without limitation the rights to use, copy, modify, merge,
7
+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8
+
permit persons to whom the Software is furnished to do so, subject to the
9
+
following conditions:
10
+
11
+
The above copyright notice and this permission notice
12
+
(including the next paragraph) shall be included in all copies or substantial
13
+
portions of the Software.
14
+
15
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16
+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18
+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19
+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20
+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+
THE SOFTWARE.
+10
-31
packages/colors/README.md
+10
-31
packages/colors/README.md
···
1
-
# sv
1
+
# 🦊 fox ui
2
2
3
-
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
3
+
svelte 5 + tailwind 4 ui kit, colors components
4
4
5
-
## Creating a project
5
+
- [Color Gradient Picker](https://flo-bit.dev/ui-kit/components/colors/color-gradient-picker)
6
+
- [Color Picker](https://flo-bit.dev/ui-kit/components/colors/color-picker)
7
+
- [Color Select](https://flo-bit.dev/ui-kit/components/colors/color-select)
6
8
7
-
If you're seeing this, you've probably already done this step. Congrats!
9
+
> **This is a public alpha release. Expect bugs and breaking changes.**
8
10
9
-
```bash
10
-
# create a new project in the current directory
11
-
npx sv create
11
+
[See all components here](https://flo-bit.dev/ui-kit)
12
12
13
-
# create a new project in my-app
14
-
npx sv create my-app
15
-
```
13
+
For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
16
14
17
-
## Developing
15
+
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
18
16
19
-
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20
-
21
-
```bash
22
-
npm run dev
23
-
24
-
# or start the server and open the app in a new browser tab
25
-
npm run dev -- --open
26
-
```
27
-
28
-
## Building
29
-
30
-
To create a production version of your app:
31
-
32
-
```bash
33
-
npm run build
34
-
```
35
-
36
-
You can preview the production build with `npm run preview`.
37
-
38
-
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
17
+
For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).
+11
-2
packages/colors/package.json
+11
-2
packages/colors/package.json
···
1
1
{
2
2
"name": "@fuxui/colors",
3
3
"private": false,
4
-
"version": "0.1.9",
4
+
"version": "0.2.0",
5
5
"type": "module",
6
6
"scripts": {
7
7
"dev": "vite dev",
···
78
78
"peerDependencies": {
79
79
"svelte": ">=5",
80
80
"tailwindcss": ">=3"
81
-
}
81
+
},
82
+
"description": "ui kit - svelte 5 + tailwind 4 - colors components",
83
+
"homepage": "https://flo-bit.dev/ui-kit",
84
+
"repository": {
85
+
"type": "git",
86
+
"url": "git+https://github.com/flo-bit/ui-kit.git"
87
+
},
88
+
"author": "flo-bit (http://flo-bit.dev/)",
89
+
"bugs": "https://github.com/flo-bit/ui-kit/issues",
90
+
"license": "MIT"
82
91
}
+21
packages/text/LICENSE
+21
packages/text/LICENSE
···
1
+
MIT License Copyright (c) 2025 flo-bit
2
+
3
+
Permission is hereby granted, free of
4
+
charge, to any person obtaining a copy of this software and associated
5
+
documentation files (the "Software"), to deal in the Software without
6
+
restriction, including without limitation the rights to use, copy, modify, merge,
7
+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8
+
permit persons to whom the Software is furnished to do so, subject to the
9
+
following conditions:
10
+
11
+
The above copyright notice and this permission notice
12
+
(including the next paragraph) shall be included in all copies or substantial
13
+
portions of the Software.
14
+
15
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16
+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18
+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19
+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20
+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+
THE SOFTWARE.
+8
-72
packages/text/README.md
+8
-72
packages/text/README.md
···
1
1
# 🦊 fox ui
2
2
3
-
> **This is a public alpha release. Expect bugs and breaking changes.**
4
-
5
-
svelte v5 + tailwind v4
6
-
7
-
[See all components here](https://flo-bit.dev/ui-kit)
8
-
9
-
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
10
-
11
-
## Quickstart
12
-
13
-
### 1. Create a new svelte project with tailwind css (including `@tailwindcss/typography` and `@tailwindcss/forms` plugins)
14
-
15
-
```bash
16
-
npx sv create my-project
17
-
```
18
-
19
-
### 2. Install fuchs-ui
20
-
21
-
```bash
22
-
npm install @fuxui/base
23
-
```
24
-
25
-
### 3. set theme variables in your app.css (changing `zinc` and `emerald` to your preferred colors, using find and replace).
26
-
27
-
```css
28
-
@source "../node_modules/@fuxui";
29
-
30
-
@theme {
31
-
--color-base-50: var(--color-zinc-50);
32
-
--color-base-100: var(--color-zinc-100);
33
-
--color-base-200: var(--color-zinc-200);
34
-
--color-base-300: var(--color-zinc-300);
35
-
--color-base-400: var(--color-zinc-400);
36
-
--color-base-500: var(--color-zinc-500);
37
-
--color-base-600: var(--color-zinc-600);
38
-
--color-base-700: var(--color-zinc-700);
39
-
--color-base-800: var(--color-zinc-800);
40
-
--color-base-900: var(--color-zinc-900);
41
-
--color-base-950: var(--color-zinc-950);
42
-
43
-
--color-accent-50: var(--color-emerald-50);
44
-
--color-accent-100: var(--color-emerald-100);
45
-
--color-accent-200: var(--color-emerald-200);
46
-
--color-accent-300: var(--color-emerald-300);
47
-
--color-accent-400: var(--color-emerald-400);
48
-
--color-accent-500: var(--color-emerald-500);
49
-
--color-accent-600: var(--color-emerald-600);
50
-
--color-accent-700: var(--color-emerald-700);
51
-
--color-accent-800: var(--color-emerald-800);
52
-
--color-accent-900: var(--color-emerald-900);
53
-
--color-accent-950: var(--color-emerald-950);
54
-
}
55
-
```
56
-
57
-
### 4. Use the components
58
-
59
-
```svelte
60
-
<script>
61
-
import { Button } from '@fuxui/base';
62
-
</script>
3
+
svelte 5 + tailwind 4 ui kit, text components
63
4
64
-
<Button onclick={() => alert('clicked')}>Click me</Button>
65
-
```
5
+
- [Plain Text Editor](https://flo-bit.dev/ui-kit/components/text/plain-text-editor)
6
+
- [Rich Text Editor](https://flo-bit.dev/ui-kit/components/text/rich-text-editor)
66
7
67
-
## Development
8
+
> **This is a public alpha release. Expect bugs and breaking changes.**
68
9
69
-
If you want to contribute to the project, please open an issue first describing the feature you want to add.
10
+
[See all components here](https://flo-bit.dev/ui-kit)
70
11
71
-
Clone the repo, install dependencies and run the dev server
12
+
For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
72
13
73
-
```bash
74
-
git clone https://github.com/flo-bit/ui-kit.git
75
-
cd ui-kit
76
-
pnpm install
77
-
pnpm run dev
78
-
```
14
+
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
79
15
80
-
The ui-kit library is located in `packages/` (`packages/base` for the base package), the documentation is in `apps/docs`.
16
+
For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).
+11
-2
packages/text/package.json
+11
-2
packages/text/package.json
···
1
1
{
2
2
"name": "@fuxui/text",
3
3
"private": false,
4
-
"version": "0.0.9",
4
+
"version": "0.2.0",
5
5
"type": "module",
6
6
"scripts": {
7
7
"dev": "vite dev",
···
89
89
"peerDependencies": {
90
90
"svelte": ">=5",
91
91
"tailwindcss": ">=3"
92
-
}
92
+
},
93
+
"description": "ui kit - svelte 5 + tailwind 4 - text components",
94
+
"homepage": "https://flo-bit.dev/ui-kit",
95
+
"repository": {
96
+
"type": "git",
97
+
"url": "git+https://github.com/flo-bit/ui-kit.git"
98
+
},
99
+
"author": "flo-bit (http://flo-bit.dev/)",
100
+
"bugs": "https://github.com/flo-bit/ui-kit/issues",
101
+
"license": "MIT"
93
102
}
+21
packages/time/LICENSE
+21
packages/time/LICENSE
···
1
+
MIT License Copyright (c) 2025 flo-bit
2
+
3
+
Permission is hereby granted, free of
4
+
charge, to any person obtaining a copy of this software and associated
5
+
documentation files (the "Software"), to deal in the Software without
6
+
restriction, including without limitation the rights to use, copy, modify, merge,
7
+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8
+
permit persons to whom the Software is furnished to do so, subject to the
9
+
following conditions:
10
+
11
+
The above copyright notice and this permission notice
12
+
(including the next paragraph) shall be included in all copies or substantial
13
+
portions of the Software.
14
+
15
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16
+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18
+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19
+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20
+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+
THE SOFTWARE.
+8
-72
packages/time/README.md
+8
-72
packages/time/README.md
···
1
1
# 🦊 fox ui
2
2
3
-
> **This is a public alpha release. Expect bugs and breaking changes.**
4
-
5
-
svelte v5 + tailwind v4
6
-
7
-
[See all components here](https://flo-bit.dev/ui-kit)
8
-
9
-
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
10
-
11
-
## Quickstart
12
-
13
-
### 1. Create a new svelte project with tailwind css (including `@tailwindcss/typography` and `@tailwindcss/forms` plugins)
14
-
15
-
```bash
16
-
npx sv create my-project
17
-
```
18
-
19
-
### 2. Install fuchs-ui
20
-
21
-
```bash
22
-
npm install @fuxui/base
23
-
```
24
-
25
-
### 3. set theme variables in your app.css (changing `zinc` and `emerald` to your preferred colors, using find and replace).
26
-
27
-
```css
28
-
@source "../node_modules/@fuxui";
29
-
30
-
@theme {
31
-
--color-base-50: var(--color-zinc-50);
32
-
--color-base-100: var(--color-zinc-100);
33
-
--color-base-200: var(--color-zinc-200);
34
-
--color-base-300: var(--color-zinc-300);
35
-
--color-base-400: var(--color-zinc-400);
36
-
--color-base-500: var(--color-zinc-500);
37
-
--color-base-600: var(--color-zinc-600);
38
-
--color-base-700: var(--color-zinc-700);
39
-
--color-base-800: var(--color-zinc-800);
40
-
--color-base-900: var(--color-zinc-900);
41
-
--color-base-950: var(--color-zinc-950);
42
-
43
-
--color-accent-50: var(--color-emerald-50);
44
-
--color-accent-100: var(--color-emerald-100);
45
-
--color-accent-200: var(--color-emerald-200);
46
-
--color-accent-300: var(--color-emerald-300);
47
-
--color-accent-400: var(--color-emerald-400);
48
-
--color-accent-500: var(--color-emerald-500);
49
-
--color-accent-600: var(--color-emerald-600);
50
-
--color-accent-700: var(--color-emerald-700);
51
-
--color-accent-800: var(--color-emerald-800);
52
-
--color-accent-900: var(--color-emerald-900);
53
-
--color-accent-950: var(--color-emerald-950);
54
-
}
55
-
```
56
-
57
-
### 4. Use the components
58
-
59
-
```svelte
60
-
<script>
61
-
import { Button } from '@fuxui/base';
62
-
</script>
3
+
svelte 5 + tailwind 4 ui kit, time components
63
4
64
-
<Button onclick={() => alert('clicked')}>Click me</Button>
65
-
```
5
+
- [Stopwatch](https://flo-bit.dev/ui-kit/components/time/stopwatch)
6
+
- [Timer](https://flo-bit.dev/ui-kit/components/time/timer)
66
7
67
-
## Development
8
+
> **This is a public alpha release. Expect bugs and breaking changes.**
68
9
69
-
If you want to contribute to the project, please open an issue first describing the feature you want to add.
10
+
[See all components here](https://flo-bit.dev/ui-kit)
70
11
71
-
Clone the repo, install dependencies and run the dev server
12
+
For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
72
13
73
-
```bash
74
-
git clone https://github.com/flo-bit/ui-kit.git
75
-
cd ui-kit
76
-
pnpm install
77
-
pnpm run dev
78
-
```
14
+
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
79
15
80
-
The ui-kit library is located in `packages/` (`packages/base` for the base package), the documentation is in `apps/docs`.
16
+
For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).
+11
-2
packages/time/package.json
+11
-2
packages/time/package.json
···
1
1
{
2
2
"name": "@fuxui/time",
3
3
"private": false,
4
-
"version": "0.0.9",
4
+
"version": "0.2.0",
5
5
"type": "module",
6
6
"scripts": {
7
7
"dev": "vite dev",
···
75
75
"peerDependencies": {
76
76
"svelte": ">=5",
77
77
"tailwindcss": ">=3"
78
-
}
78
+
},
79
+
"description": "ui kit - svelte 5 + tailwind 4 - time components",
80
+
"homepage": "https://flo-bit.dev/ui-kit",
81
+
"repository": {
82
+
"type": "git",
83
+
"url": "git+https://github.com/flo-bit/ui-kit.git"
84
+
},
85
+
"author": "flo-bit (http://flo-bit.dev/)",
86
+
"bugs": "https://github.com/flo-bit/ui-kit/issues",
87
+
"license": "MIT"
79
88
}
+21
packages/visual/LICENSE
+21
packages/visual/LICENSE
···
1
+
MIT License Copyright (c) 2025 flo-bit
2
+
3
+
Permission is hereby granted, free of
4
+
charge, to any person obtaining a copy of this software and associated
5
+
documentation files (the "Software"), to deal in the Software without
6
+
restriction, including without limitation the rights to use, copy, modify, merge,
7
+
publish, distribute, sublicense, and/or sell copies of the Software, and to
8
+
permit persons to whom the Software is furnished to do so, subject to the
9
+
following conditions:
10
+
11
+
The above copyright notice and this permission notice
12
+
(including the next paragraph) shall be included in all copies or substantial
13
+
portions of the Software.
14
+
15
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
16
+
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
18
+
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
19
+
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
20
+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+
THE SOFTWARE.
+12
-72
packages/visual/README.md
+12
-72
packages/visual/README.md
···
1
1
# 🦊 fox ui
2
2
3
-
> **This is a public alpha release. Expect bugs and breaking changes.**
4
-
5
-
svelte v5 + tailwind v4
6
-
7
-
[See all components here](https://flo-bit.dev/ui-kit)
8
-
9
-
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
10
-
11
-
## Quickstart
12
-
13
-
### 1. Create a new svelte project with tailwind css (including `@tailwindcss/typography` and `@tailwindcss/forms` plugins)
14
-
15
-
```bash
16
-
npx sv create my-project
17
-
```
18
-
19
-
### 2. Install fuchs-ui
20
-
21
-
```bash
22
-
npm install @fuxui/base
23
-
```
24
-
25
-
### 3. set theme variables in your app.css (changing `zinc` and `emerald` to your preferred colors, using find and replace).
26
-
27
-
```css
28
-
@source "../node_modules/@fuxui";
29
-
30
-
@theme {
31
-
--color-base-50: var(--color-zinc-50);
32
-
--color-base-100: var(--color-zinc-100);
33
-
--color-base-200: var(--color-zinc-200);
34
-
--color-base-300: var(--color-zinc-300);
35
-
--color-base-400: var(--color-zinc-400);
36
-
--color-base-500: var(--color-zinc-500);
37
-
--color-base-600: var(--color-zinc-600);
38
-
--color-base-700: var(--color-zinc-700);
39
-
--color-base-800: var(--color-zinc-800);
40
-
--color-base-900: var(--color-zinc-900);
41
-
--color-base-950: var(--color-zinc-950);
42
-
43
-
--color-accent-50: var(--color-emerald-50);
44
-
--color-accent-100: var(--color-emerald-100);
45
-
--color-accent-200: var(--color-emerald-200);
46
-
--color-accent-300: var(--color-emerald-300);
47
-
--color-accent-400: var(--color-emerald-400);
48
-
--color-accent-500: var(--color-emerald-500);
49
-
--color-accent-600: var(--color-emerald-600);
50
-
--color-accent-700: var(--color-emerald-700);
51
-
--color-accent-800: var(--color-emerald-800);
52
-
--color-accent-900: var(--color-emerald-900);
53
-
--color-accent-950: var(--color-emerald-950);
54
-
}
55
-
```
3
+
svelte 5 + tailwind 4 ui kit, visual components
56
4
57
-
### 4. Use the components
58
-
59
-
```svelte
60
-
<script>
61
-
import { Button } from '@fuxui/base';
62
-
</script>
63
-
64
-
<Button onclick={() => alert('clicked')}>Click me</Button>
65
-
```
5
+
- [Confetti](https://flo-bit.dev/ui-kit/components/visual/confetti)
6
+
- [Excalidraw](https://flo-bit.dev/ui-kit/components/visual/excalidraw)
7
+
- [Image Masonry](https://flo-bit.dev/ui-kit/components/visual/image-masonry)
8
+
- [Phone](https://flo-bit.dev/ui-kit/components/visual/phone)
9
+
- [Quote](https://flo-bit.dev/ui-kit/components/visual/quote)
10
+
- [Undraw](https://flo-bit.dev/ui-kit/components/visual/undraw)
66
11
67
-
## Development
12
+
> **This is a public alpha release. Expect bugs and breaking changes.**
68
13
69
-
If you want to contribute to the project, please open an issue first describing the feature you want to add.
14
+
[See all components here](https://flo-bit.dev/ui-kit)
70
15
71
-
Clone the repo, install dependencies and run the dev server
16
+
For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
72
17
73
-
```bash
74
-
git clone https://github.com/flo-bit/ui-kit.git
75
-
cd ui-kit
76
-
pnpm install
77
-
pnpm run dev
78
-
```
18
+
Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
79
19
80
-
The ui-kit library is located in `packages/` (`packages/base` for the base package), the documentation is in `apps/docs`.
20
+
For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).
+11
-2
packages/visual/package.json
+11
-2
packages/visual/package.json
···
1
1
{
2
2
"name": "@fuxui/visual",
3
3
"private": false,
4
-
"version": "0.0.11",
4
+
"version": "0.2.0",
5
5
"type": "module",
6
6
"scripts": {
7
7
"dev": "vite dev",
···
78
78
"peerDependencies": {
79
79
"svelte": ">=5",
80
80
"tailwindcss": ">=3"
81
-
}
81
+
},
82
+
"description": "ui kit - svelte 5 + tailwind 4 - visual components",
83
+
"homepage": "https://flo-bit.dev/ui-kit",
84
+
"repository": {
85
+
"type": "git",
86
+
"url": "git+https://github.com/flo-bit/ui-kit.git"
87
+
},
88
+
"author": "flo-bit (http://flo-bit.dev/)",
89
+
"bugs": "https://github.com/flo-bit/ui-kit/issues",
90
+
"license": "MIT"
82
91
}