[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 cards, sidebar
+119
-14
+16
-2
src/docs/site-components/Cards.svelte
+16
-2
src/docs/site-components/Cards.svelte
···
23
23
import CardHeatmap from '$docs/cards/graphs/CardHeatmap.svelte';
24
24
import CardLineGraph from '$docs/cards/graphs/CardLineGraph.svelte';
25
25
import CardRingChart from '$docs/cards/graphs/CardRingChart.svelte';
26
+
import CardProse from '$docs/cards/base/CardProse.svelte';
27
+
import CardAccordion from '$docs/cards/base/CardAccordion.svelte';
26
28
import { cn } from '$lib/utils';
27
29
28
30
let baseCards = [
···
139
141
className: 'px-0 gap-0',
140
142
label: 'Head',
141
143
href: 'head'
144
+
},
145
+
{
146
+
component: CardProse,
147
+
className: '',
148
+
label: 'Prose',
149
+
href: 'prose'
150
+
},
151
+
{
152
+
component: CardAccordion,
153
+
className: '',
154
+
label: 'Accordions',
155
+
href: 'accordion'
142
156
}
143
157
];
144
158
···
181
195
];
182
196
</script>
183
197
184
-
<h2 class="text-base-800 dark:text-base-200 mb-4 text-xl font-medium">Base components</h2>
198
+
<h2 class="text-base-800 dark:text-base-200 mb-4 text-xl font-semibold">Base components</h2>
185
199
<div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4">
186
200
{#each baseCards as card}
187
201
<div
···
212
226
{/each}
213
227
</div>
214
228
215
-
<h2 class="text-base-800 dark:text-base-200 mt-24 mb-4 text-xl font-medium">Graph components</h2>
229
+
<h2 class="text-base-800 dark:text-base-200 mt-24 mb-4 text-xl font-semibold">Graph components</h2>
216
230
<div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4">
217
231
{#each graphCards as card}
218
232
<div
+8
-3
src/docs/site-components/Logo.svelte
+8
-3
src/docs/site-components/Logo.svelte
···
3
3
import { cn } from '$lib';
4
4
import { Badge } from '$lib/components/base/badge';
5
5
6
-
let { class: className }: {
6
+
let {
7
+
class: className
8
+
}: {
7
9
class?: string;
8
10
} = $props();
9
11
</script>
10
12
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>
13
+
<div class={cn('flex items-center gap-2', className)}>
14
+
<a
15
+
class="text-base-950 dark:text-base-50 focus-visible:outline-base-900 dark:focus-visible:outline-base-50 rounded-xl font-semibold focus-visible:outline-2 focus-visible:outline-offset-4"
16
+
href={base}>🦊 fox ui</a
17
+
>
13
18
<Badge>alpha</Badge>
14
19
</div>
+3
-1
src/docs/site-components/Sidebar.svelte
+3
-1
src/docs/site-components/Sidebar.svelte
···
26
26
{ label: 'Number Input', href: 'number-input' },
27
27
{ label: 'Cards', href: 'cards' },
28
28
{ label: 'Accordion', href: 'accordion' },
29
-
{ label: 'Sonner', href: 'sonner' }
29
+
{ label: 'Sonner', href: 'sonner' },
30
+
{ label: 'Prose', href: 'prose' },
31
+
{ label: 'Head', href: 'head' }
30
32
];
31
33
32
34
baseComponents.sort((a, b) => a.label.localeCompare(b.label));
+32
src/docs/cards/base/CardAccordion.svelte
+32
src/docs/cards/base/CardAccordion.svelte
···
1
+
<div class="text-base-900 dark:text-base-100 w-full text-sm">
2
+
<div class="flex items-center justify-between font-semibold">
3
+
<span>Accordion Item A</span>
4
+
<svg
5
+
xmlns="http://www.w3.org/2000/svg"
6
+
fill="none"
7
+
viewBox="0 0 24 24"
8
+
stroke-width="1.5"
9
+
stroke="currentColor"
10
+
class="size-5 rotate-180"
11
+
>
12
+
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
13
+
</svg>
14
+
</div>
15
+
<div class="text-base-500 dark:text-base-400 mt-2 text-sm border-b border-base-200 dark:border-base-900 pb-4">
16
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
17
+
</div>
18
+
19
+
<div class="mt-4 flex items-center justify-between font-semibold">
20
+
<span>Accordion Item B</span>
21
+
<svg
22
+
xmlns="http://www.w3.org/2000/svg"
23
+
fill="none"
24
+
viewBox="0 0 24 24"
25
+
stroke-width="1.5"
26
+
stroke="currentColor"
27
+
class="size-5"
28
+
>
29
+
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
30
+
</svg>
31
+
</div>
32
+
</div>
+14
src/docs/cards/base/CardProse.svelte
+14
src/docs/cards/base/CardProse.svelte
···
1
+
<script>
2
+
import { Subheading } from '$lib/components/base/heading';
3
+
import Heading from '$lib/components/base/heading/Heading.svelte';
4
+
import Prose from '$lib/components/base/prose/Prose.svelte';
5
+
import Text from '$lib/components/base/text/Text.svelte';
6
+
</script>
7
+
8
+
<div class="w-full">
9
+
<Prose>
10
+
<h2>This is a heading</h2>
11
+
<h3>And a subheading</h3>
12
+
<p>This is my text, see <span class="text-accent-600 dark:text-accent-400 font-semibold">this link</span></p>
13
+
</Prose>
14
+
</div>
-7
src/docs/cards/base/CardScrollArea.svelte
-7
src/docs/cards/base/CardScrollArea.svelte
···
1
1
<script>
2
-
import Subheading from '$lib/components/base/heading/Subheading.svelte';
3
-
import ScrollArea from '$lib/components/base/scroll-area/ScrollArea.svelte';
4
-
import Text from '$lib/components/base/text/Text.svelte';
5
-
6
2
let content = `Doggo ipsum puggorino shoob I am bekom fat. Clouds such treat big ol pupper vvv, porgo. Aqua
7
3
doggo ur givin me a spook corgo heckin good boys heck much ruin diet, ur givin me a spook doggo
8
4
such treat ur givin me a spook. What a nice floof extremely cuuuuuute waggy wags floofs dat
···
32
28
heckin snoot, maximum borkdrive wow such tempt you are doin me a concern. Corgo puggorino smol
33
29
borking doggo with a long snoot for pats super chub, fat boi h*ck. Dat tungg tho shoob much ruin
34
30
diet very jealous pupper, floofs shibe he made many woofs woofer, heckin good boys pupperino.`;
35
-
36
-
let classes =
37
-
'h-[200px] w-[350px] rounded-2xl border border-base-200 dark:border-base-800 text-base-900 dark:text-base-100 bg-base-100 dark:bg-base-900';
38
31
</script>
39
32
40
33
<div class={"h-full w-full text-base-900 dark:text-base-100 px-2 pt-0 overflow-hidden relative"}>
+10
src/docs/preview/base/ProsePreview.svelte
+10
src/docs/preview/base/ProsePreview.svelte
-1
src/routes/docs/quick-start/QuickStart.md
-1
src/routes/docs/quick-start/QuickStart.md
+9
src/routes/components/base/prose/+page.svelte
+9
src/routes/components/base/prose/+page.svelte
+27
src/routes/components/base/prose/test.md
+27
src/routes/components/base/prose/test.md
···
1
+
# Heading 1
2
+
3
+
## Heading 2
4
+
5
+
### Heading 3
6
+
7
+
**Bold Text**
8
+
*Italic Text*
9
+
~~Strikethrough~~
10
+
11
+
> This is a blockquote.
12
+
13
+
- Bullet list item 1
14
+
- Bullet list item 2
15
+
- Nested item
16
+
17
+
1. Numbered list item 1
18
+
2. Numbered list item 2
19
+
20
+
[Link](https://google.com)
21
+
22
+
23
+
24
+
| Header 1 | Header 2 | Header 3 |
25
+
|----------|----------|----------|
26
+
| Cell 1 | Cell 2 | Cell 3 |
27
+
| Cell 4 | Cell 5 | Cell 6 |