[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, philosophy
+23
-3
+2
README.md
+2
README.md
+19
-1
src/routes/docs/philosophy/Philosophy.md
+19
-1
src/routes/docs/philosophy/Philosophy.md
···
24
24
25
25
You can try it out by setting the current theme colors in the navbar for this documentation site.
26
26
27
+
## Copying components vs installing packages
28
+
29
+
I'm a big fan of the philosophy of copying components (shadcn-style) for better customization, but also I think the quickest way to build something is to just install the package and use it.
30
+
31
+
So the plan is to have both options (currently only installing as a package is available, but you can copy what you need from the [source code](https://github.com/flo-bit/ui-kit/tree/main/src/lib/components/base) though some imports might need to be adjusted).
32
+
27
33
## Lots of components
28
34
29
35
While currently only the base components are visible, there are lots of components in the pipeline.
···
57
63
- [model-picker](/ui-kit/components/3d/model-picker/)
58
64
- [voxel-art](/ui-kit/components/3d/voxel-art/)
59
65
60
-
If you have any suggestions for components, please open an issue on [github](https://github.com/flo-bit/ui-kit/issues).
66
+
## Dark mode
67
+
68
+
This ui kit is designed to be used in both light and dark mode (and switch automatically depending on system settings).
69
+
If you want to disable dark mode, add the following to your app.css:
70
+
71
+
```css
72
+
@custom-variant dark (&:is(.dark *));
73
+
```
74
+
75
+
76
+
## Contributing/Feedback
77
+
78
+
If you have any suggestions for components or feedback in general, please open an issue on [github](https://github.com/flo-bit/ui-kit/issues).
61
79
62
80
Also feel free to contribute yourself, preferably by first opening an issue about the component/feature you want to add!
+2
-2
src/lib/components/base/prose/Prose.svelte
+2
-2
src/lib/components/base/prose/Prose.svelte
···
7
7
</script>
8
8
9
9
<div
10
-
class="prose prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-500 prose-pre:rounded-2xl w-full dark:hidden"
10
+
class="prose prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-600 prose-pre:rounded-2xl w-full dark:hidden"
11
11
>
12
12
{@render children?.()}
13
13
</div>
14
14
<div
15
-
class="prose prose-base-dark dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-500 prose-pre:rounded-2xl hidden w-full dark:block"
15
+
class="prose prose-base-dark dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 prose-pre:rounded-2xl hidden w-full dark:block"
16
16
>
17
17
{@render children?.()}
18
18
</div>