[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
fixes, add docs
+318
-24
+8
src/ambient.d.ts
+8
src/ambient.d.ts
+2
-2
src/docs/preview/Container.svelte
src/docs/site-components/Container.svelte
+2
-2
src/docs/preview/Container.svelte
src/docs/site-components/Container.svelte
···
2
2
let { children } = $props();
3
3
</script>
4
4
5
-
<div class="h-[100dvh] lg:ml-72 xl:ml-80">
6
-
<div class="mx-auto flex w-full max-w-2xl flex-col items-start justify-center gap-2 px-4 py-24">
5
+
<div class="h-[100dvh] lg:ml-72 xl:ml-80 px-4">
6
+
<div class="mx-auto flex w-full max-w-2xl flex-col items-start justify-center gap-2 py-24">
7
7
{@render children?.()}
8
8
</div>
9
9
</div>
+2
src/docs/preview/SelectTheme.svelte
+2
src/docs/preview/SelectTheme.svelte
+8
-3
src/docs/site-components/Logo.svelte
+8
-3
src/docs/site-components/Logo.svelte
···
1
-
<script>
1
+
<script lang="ts">
2
2
import { base } from '$app/paths';
3
+
import { cn } from '$lib';
3
4
import { Badge } from '$lib/components/base/badge';
5
+
6
+
let { class: className }: {
7
+
class?: string;
8
+
} = $props();
4
9
</script>
5
10
6
-
<div class="flex items-center gap-2 sm:ml-5">
7
-
<a class="font-semibold text-base-950 dark:text-base-50" href={base}>ui kit</a>
11
+
<div class={cn("flex items-center gap-2", className)}>
12
+
<a class="font-semibold text-base-950 dark:text-base-50" href={base}>🦊 fox ui</a>
8
13
<Badge>alpha</Badge>
9
14
</div>
+8
-3
src/docs/site-components/Sidebar.svelte
+8
-3
src/docs/site-components/Sidebar.svelte
···
1
1
<script lang="ts">
2
2
import { base } from '$app/paths';
3
+
import { Badge } from '$lib';
3
4
import { Accordion, AccordionItem } from '$lib/components/base/accordion';
4
5
5
6
import { Button } from '$lib/components/base/button';
6
7
import Sidebar from '$lib/components/base/sidebar/Sidebar.svelte';
8
+
import Logo from './Logo.svelte';
7
9
8
10
const baseComponents = [
9
11
{ label: 'Alerts', href: 'alert' },
···
71
73
72
74
<Sidebar {mobileOnly}>
73
75
<div class="mb-8 flex flex-col items-start p-4">
74
-
<Button variant="link" onclick={handleClick} href={base}>Home</Button>
75
-
<Button variant="link" onclick={handleClick} href="{base}/components">Philosophy</Button>
76
-
<Button variant="link" onclick={handleClick} href="{base}/components/theme" class="mb-8">Theme</Button>
76
+
<Logo class="mb-8 py-1 px-3" />
77
+
78
+
79
+
<Button variant="ghost" onclick={handleClick} href="{base}/docs/quick-start" class="w-full justify-start mb-1">Quick Start</Button>
80
+
<Button variant="ghost" onclick={handleClick} href="{base}/docs/philosophy" class="w-full justify-start mb-1">Philosophy</Button>
81
+
<Button variant="ghost" onclick={handleClick} href="{base}/components/theme" class="w-full justify-start mb-8">Theme</Button>
77
82
78
83
79
84
<Accordion type="single" class="w-full" value="base-components">
+12
-2
src/lib/components/base/prose/Prose.svelte
+12
-2
src/lib/components/base/prose/Prose.svelte
···
5
5
</script>
6
6
7
7
<div
8
-
class="prose prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-500 dark:hidden"
8
+
class="prose prose-base prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-500 dark:hidden w-full"
9
9
>
10
10
{@render children?.()}
11
11
</div>
12
12
<div
13
-
class="prose prose-base-dark dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-500 hidden dark:block"
13
+
class="prose prose-base-dark dark:prose-invert prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-500 hidden dark:block w-full"
14
14
>
15
15
{@render children?.()}
16
16
</div>
···
56
56
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
57
57
--tw-prose-invert-th-borders: var(--color-base-600);
58
58
--tw-prose-invert-td-borders: var(--color-base-700);
59
+
}
60
+
61
+
:global(.prose pre) {
62
+
background-color: var(--color-base-100);
63
+
color: var(--color-base-900);
64
+
}
65
+
66
+
:global(.dark .prose pre) {
67
+
background-color: var(--color-base-900);
68
+
color: var(--color-base-50);
59
69
}
60
70
</style>
+169
src/prism.css
+169
src/prism.css
···
1
+
/* PrismJS 1.30.0
2
+
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+armasm+arturo+asciidoc+aspnet+asm6502+asmatmel+autohotkey+autoit+avisynth+avro-idl+awk+bash+basic+batch+bbcode+bbj+bicep+birb+bison+bnf+bqn+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+cilkc+cilkcpp+clojure+cmake+cobol+coffeescript+concurnas+csp+cooklang+coq+crystal+css-extras+csv+cue+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gap+gcode+gdscript+gedcom+gettext+gherkin+git+glsl+gn+linker-script+go+go-module+gradle+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+hoon+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keepalived+keyman+kotlin+kumir+kusto+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+magma+makefile+markdown+markup-templating+mata+matlab+maxscript+mel+mermaid+metafont+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+odin+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plant-uml+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+cshtml+jsx+tsx+reason+regex+rego+renpy+rescript+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+stata+iecst+stylus+supercollider+swift+systemd+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+tremor+turtle+twig+typescript+typoscript+unrealscript+uorazor+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+web-idl+wgsl+wiki+wolfram+wren+xeora+xml-doc+xojo+xquery+yaml+yang+zig */
3
+
code[class*='language-'],
4
+
pre[class*='language-'] {
5
+
color: #000;
6
+
background: 0 0;
7
+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
8
+
font-size: 1em;
9
+
text-align: left;
10
+
white-space: pre;
11
+
word-spacing: normal;
12
+
word-break: normal;
13
+
word-wrap: normal;
14
+
line-height: 1.5;
15
+
-moz-tab-size: 4;
16
+
-o-tab-size: 4;
17
+
tab-size: 4;
18
+
-webkit-hyphens: none;
19
+
-moz-hyphens: none;
20
+
-ms-hyphens: none;
21
+
hyphens: none;
22
+
}
23
+
24
+
pre[class*='language-'] {
25
+
padding: 1em;
26
+
margin: 0.5em 0;
27
+
overflow: auto;
28
+
}
29
+
:not(pre) > code[class*='language-'],
30
+
pre[class*='language-'] {
31
+
background: #2d2d2d;
32
+
}
33
+
:not(pre) > code[class*='language-'] {
34
+
padding: 0.1em;
35
+
border-radius: 0.3em;
36
+
white-space: normal;
37
+
}
38
+
39
+
40
+
.token.cdata,
41
+
.token.comment,
42
+
.token.doctype,
43
+
.token.prolog {
44
+
color: #708090;
45
+
}
46
+
.token.punctuation {
47
+
color: #999;
48
+
}
49
+
.token.namespace {
50
+
opacity: 0.7;
51
+
}
52
+
.token.boolean,
53
+
.token.constant,
54
+
.token.deleted,
55
+
.token.number,
56
+
.token.property,
57
+
.token.symbol,
58
+
.token.tag {
59
+
color: #905;
60
+
}
61
+
.token.attr-name,
62
+
.token.builtin,
63
+
.token.char,
64
+
.token.inserted,
65
+
.token.selector,
66
+
.token.string {
67
+
color: #690;
68
+
}
69
+
.language-css .token.string,
70
+
.style .token.string,
71
+
.token.entity,
72
+
.token.operator,
73
+
.token.url {
74
+
color: #9a6e3a;
75
+
}
76
+
.token.atrule,
77
+
.token.attr-value,
78
+
.token.keyword {
79
+
color: #07a;
80
+
}
81
+
.token.class-name,
82
+
.token.function {
83
+
color: #dd4a68;
84
+
}
85
+
.token.important,
86
+
.token.regex,
87
+
.token.variable {
88
+
color: #e90;
89
+
}
90
+
.token.bold,
91
+
.token.important {
92
+
font-weight: 700;
93
+
}
94
+
.token.italic {
95
+
font-style: italic;
96
+
}
97
+
.token.entity {
98
+
cursor: help;
99
+
}
100
+
101
+
102
+
.dark {
103
+
code[class*='language-'], pre[class*='language-'] {
104
+
color: #ccc;
105
+
}
106
+
107
+
.token.block-comment,
108
+
.token.cdata,
109
+
.token.comment,
110
+
.token.doctype,
111
+
.token.prolog {
112
+
color: #999;
113
+
}
114
+
.token.punctuation {
115
+
color: #ccc;
116
+
}
117
+
.token.attr-name,
118
+
.token.deleted,
119
+
.token.namespace,
120
+
.token.tag {
121
+
color: #e2777a;
122
+
}
123
+
.token.function-name {
124
+
color: #6196cc;
125
+
}
126
+
.token.boolean,
127
+
.token.function,
128
+
.token.number {
129
+
color: #f08d49;
130
+
}
131
+
.token.class-name,
132
+
.token.constant,
133
+
.token.property,
134
+
.token.symbol {
135
+
color: #f8c555;
136
+
}
137
+
.token.atrule,
138
+
.token.builtin,
139
+
.token.important,
140
+
.token.keyword,
141
+
.token.selector {
142
+
color: #cc99cd;
143
+
}
144
+
.token.attr-value,
145
+
.token.char,
146
+
.token.regex,
147
+
.token.string,
148
+
.token.variable {
149
+
color: #7ec699;
150
+
}
151
+
.token.entity,
152
+
.token.operator,
153
+
.token.url {
154
+
color: #67cdcc;
155
+
}
156
+
.token.bold,
157
+
.token.important {
158
+
font-weight: 700;
159
+
}
160
+
.token.italic {
161
+
font-style: italic;
162
+
}
163
+
.token.entity {
164
+
cursor: help;
165
+
}
166
+
.token.inserted {
167
+
color: green;
168
+
}
169
+
}
+5
-3
src/routes/+layout.svelte
+5
-3
src/routes/+layout.svelte
···
4
4
import BodyScrollArea from '$lib/components/base/scroll-area/BodyScrollArea.svelte';
5
5
import { Toaster } from '$lib/components/base/sonner';
6
6
import '../app.css';
7
+
import '../prism.css';
8
+
7
9
let { children } = $props();
8
10
</script>
9
11
···
12
14
<Toaster />
13
15
14
16
<Head
15
-
title="my ui kit"
16
-
description="my ui kit - work in progress"
17
+
title="fox ui"
18
+
description="fox ui - work in progress"
17
19
image={base + "/opengraph.png"}
18
20
url="https://flo-bit.dev/ui-kit"
19
-
emojiFavicon="🙃"
21
+
emojiFavicon="🦊"
20
22
/>
21
23
22
24
<BodyScrollArea />
+5
-3
src/routes/+page.svelte
+5
-3
src/routes/+page.svelte
···
20
20
<h1
21
21
class="text-base-950 dark:text-base-50 my-8 mt-8 max-w-2xl text-4xl font-bold tracking-tight text-pretty md:text-5xl md:leading-14"
22
22
>
23
-
Easy to use UI components built with Tailwind and Svelte
23
+
Beautiful UI components built with Tailwind 4 and Svelte 5
24
24
</h1>
25
25
26
-
<Button href={base + '/components'} class="mb-8">Philosophy <span>→</span></Button>
27
-
26
+
<div class="flex gap-2">
27
+
<Button href={base + '/docs/quick-start'} class="mb-8">Quick Start</Button>
28
+
<Button variant="link" href={base + '/docs/philosophy'} class="mb-8">Learn more <span>→</span></Button>
29
+
</div>
28
30
<Cards />
29
31
</div>
+2
-2
src/routes/components/+layout.svelte
+2
-2
src/routes/components/+layout.svelte
···
1
1
<script lang="ts">
2
2
import Navbar from '$docs/site-components/Navbar.svelte';
3
3
import Sidebar from '$docs/site-components/Sidebar.svelte';
4
-
import Container from '$docs/preview/Container.svelte';
4
+
import Container from '$docs/site-components/Container.svelte';
5
5
6
6
let { children } = $props();
7
7
</script>
8
8
9
-
<Navbar hasSidebar />
9
+
<Navbar hasSidebar showLogo={false} />
10
10
<Sidebar />
11
11
12
12
<Container>
+1
-1
src/routes/components/+page.svelte
src/routes/docs/philosophy/+page.svelte
+1
-1
src/routes/components/+page.svelte
src/routes/docs/philosophy/+page.svelte
src/routes/components/Philosophy.svx
src/routes/docs/philosophy/Philosophy.md
src/routes/components/Philosophy.svx
src/routes/docs/philosophy/Philosophy.md
+14
src/routes/docs/+layout.svelte
+14
src/routes/docs/+layout.svelte
···
1
+
<script lang="ts">
2
+
import Navbar from '$docs/site-components/Navbar.svelte';
3
+
import Sidebar from '$docs/site-components/Sidebar.svelte';
4
+
import Container from '$docs/site-components/Container.svelte';
5
+
6
+
let { children } = $props();
7
+
</script>
8
+
9
+
<Navbar hasSidebar showLogo={false} />
10
+
<Sidebar />
11
+
12
+
<Container>
13
+
{@render children()}
14
+
</Container>
+8
src/routes/docs/quick-start/+page.svelte
+8
src/routes/docs/quick-start/+page.svelte
+70
src/routes/docs/quick-start/QuickStart.md
+70
src/routes/docs/quick-start/QuickStart.md
···
1
+
<script>
2
+
import { Alert } from '$lib/components/base/alert';
3
+
</script>
4
+
5
+
<Alert title="Work in progress" class="mb-8 not-prose" type="warning" variant="default">
6
+
<span>
7
+
This ui kit is still under development. Not really ready to be used yet. Public alpha coming soon.
8
+
</span>
9
+
</Alert>
10
+
11
+
# Quick Start
12
+
13
+
## 1. Create a new svelte project with tailwind css
14
+
15
+
```bash
16
+
npx sv create my-project
17
+
```
18
+
19
+
Also add the `@tailwindcss/typography` and `@tailwindcss/forms` plugins.
20
+
21
+
## 2. Install fox-ui-svelte
22
+
23
+
```bash
24
+
npm install fox-ui-svelte
25
+
```
26
+
27
+
## 3. Add this to your `app.css`
28
+
29
+
You can change the colors to your liking.
30
+
31
+
```css
32
+
/* this is a comment */
33
+
@source "../node_modules/fox-ui-svelte";
34
+
35
+
@theme {
36
+
--color-base-50: var(--color-gray-50);
37
+
--color-base-100: var(--color-gray-100);
38
+
--color-base-200: var(--color-gray-200);
39
+
--color-base-300: var(--color-gray-300);
40
+
--color-base-400: var(--color-gray-400);
41
+
--color-base-500: var(--color-gray-500);
42
+
--color-base-600: var(--color-gray-600);
43
+
--color-base-700: var(--color-gray-700);
44
+
--color-base-800: var(--color-gray-800);
45
+
--color-base-900: var(--color-gray-900);
46
+
--color-base-950: var(--color-gray-950);
47
+
48
+
--color-accent-50: var(--color-blue-50);
49
+
--color-accent-100: var(--color-blue-100);
50
+
--color-accent-200: var(--color-blue-200);
51
+
--color-accent-300: var(--color-blue-300);
52
+
--color-accent-400: var(--color-blue-400);
53
+
--color-accent-500: var(--color-blue-500);
54
+
--color-accent-600: var(--color-blue-600);
55
+
--color-accent-700: var(--color-blue-700);
56
+
--color-accent-800: var(--color-blue-800);
57
+
--color-accent-900: var(--color-blue-900);
58
+
--color-accent-950: var(--color-blue-950);
59
+
}
60
+
```
61
+
62
+
## 4. Use a component
63
+
64
+
```svelte
65
+
<script>
66
+
import { Button } from 'fox-ui-svelte';
67
+
</script>
68
+
69
+
<Button>Click me</Button>
70
+
```