[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
some fixes
+107
-9
+21
LICENSE
+21
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.
+80
-1
README.md
+80
-1
README.md
···
1
-
# fuchs ui
1
+
# 🦊 fox ui
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
20
+
21
+
```bash
22
+
npm install fuchs
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/fuchs";
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 'fuchs';
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
+
npm install
77
+
npm run dev
78
+
```
79
+
80
+
The ui-kit library is located in `src/lib`, the documentation is in `src/docs`.
+3
-2
package.json
+3
-2
package.json
+2
-5
packages/colors/package.json
+2
-5
packages/colors/package.json
···
1
1
{
2
2
"name": "@fuxui/colors",
3
3
"private": false,
4
-
"version": "0.1.0",
4
+
"version": "0.1.1",
5
5
"type": "module",
6
6
"scripts": {
7
7
"dev": "vite dev",
···
22
22
"files": [
23
23
"dist",
24
24
"!dist/**/*.test.*",
25
-
"!dist/**/*.spec.*",
26
-
"src/lib",
27
-
"!src/lib/**/*.test.*",
28
-
"!src/lib/**/*.spec.*"
25
+
"!dist/**/*.spec.*"
29
26
],
30
27
"exports": {
31
28
".": {