[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
add 3d components
+246
-92
+2
src/lib/index.ts
+2
src/lib/index.ts
···
45
45
46
46
// 3d components
47
47
export { default as ModelPicker } from '$lib/components/3d/model-picker/ModelPicker.svelte';
48
+
export { default as Depth3D } from '$lib/components/3d/depth3d/Depth3D.svelte';
49
+
export { default as VoxelArt } from '$lib/components/3d/voxel-art/VoxelArt.svelte';
+2
-26
src/docs/site-components/Cards.svelte
+2
-26
src/docs/site-components/Cards.svelte
···
6
6
import CardHeatmap from '$docs/cards/graphs/CardHeatmap.svelte';
7
7
import CardLineGraph from '$docs/cards/graphs/CardLineGraph.svelte';
8
8
import CardRingChart from '$docs/cards/graphs/CardRingChart.svelte';
9
-
import { baseComponents } from './components_base';
10
-
import { extraComponents } from './components_extra';
11
-
import { colorComponents } from './components_colors';
9
+
import { components } from './components_all';
12
10
13
11
let graphCards = [
14
12
{
···
42
40
href: 'github-corner'
43
41
}
44
42
];
45
-
46
-
let cards: {
47
-
name: string;
48
-
components: typeof baseComponents | typeof extraComponents;
49
-
href: string;
50
-
}[] = [
51
-
{
52
-
name: 'Base components',
53
-
components: baseComponents,
54
-
href: 'base'
55
-
},
56
-
{
57
-
name: 'Colors',
58
-
components: colorComponents,
59
-
href: 'colors'
60
-
},
61
-
{
62
-
name: 'Extra components',
63
-
components: extraComponents,
64
-
href: 'extras'
65
-
}
66
-
];
67
43
</script>
68
44
69
45
<div class="flex w-full flex-col gap-16">
70
-
{#each cards as category}
46
+
{#each components as category}
71
47
<div>
72
48
<h2 class="text-base-800 dark:text-base-200 mb-6 text-xl font-semibold">{category.name}</h2>
73
49
<div class="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+46
-62
src/docs/site-components/Sidebar.svelte
+46
-62
src/docs/site-components/Sidebar.svelte
···
5
5
6
6
import { Button } from '$lib/components/base/button';
7
7
import Sidebar from '$lib/components/base/sidebar/Sidebar.svelte';
8
+
import { components } from './components_all';
8
9
import { baseComponents } from './components_base';
9
10
import { extraComponents } from './components_extra';
10
11
11
12
import Logo from './Logo.svelte';
12
13
13
-
const components = [
14
-
{ label: 'Select', href: 'select' },
15
-
{ label: 'Color Select', href: 'color-select' },
16
-
{ label: 'Depth 3D', href: 'depth-3d' },
17
-
{ label: 'Excalidraw', href: 'excalidraw' },
18
-
{ label: 'Github Corner', href: 'github-corner' },
19
-
{ label: 'Gradient', href: 'gradient' },
20
-
{ label: 'Heatmap', href: 'heatmap' },
21
-
{ label: 'Line Graph', href: 'line-graph' },
22
-
{ label: 'Phone', href: 'phone' },
23
-
{ label: 'Progress', href: 'progress' },
24
-
{ label: 'Quote', href: 'quote' },
25
-
{ label: 'Ring Chart', href: 'ring-chart' },
26
-
{ label: 'Star Rating', href: 'star-rating' },
27
-
{ label: 'Video Player', href: 'video-player' },
28
-
{ label: 'Timer', href: 'timer' },
29
-
{ label: 'Social Icons', href: 'social-icons' },
30
-
{ label: 'Waveform Audio Player', href: 'waveform-audio-player' },
31
-
{ label: 'Post', href: 'post' },
32
-
{ label: 'Voxel Art', href: 'voxel-art' },
33
-
{ label: 'Following Pointer', href: 'following-pointer' },
34
-
{ label: 'Audio Visualizer', href: 'audio-visualizer' },
35
-
{ label: 'Color Picker', href: 'color-picker' }
36
-
];
37
-
38
-
// sort components by label
39
-
components.sort((a, b) => a.label.localeCompare(b.label));
14
+
// const components = [
15
+
// { label: 'Select', href: 'select' },
16
+
// { label: 'Color Select', href: 'color-select' },
17
+
// { label: 'Depth 3D', href: 'depth-3d' },
18
+
// { label: 'Excalidraw', href: 'excalidraw' },
19
+
// { label: 'Github Corner', href: 'github-corner' },
20
+
// { label: 'Gradient', href: 'gradient' },
21
+
// { label: 'Heatmap', href: 'heatmap' },
22
+
// { label: 'Line Graph', href: 'line-graph' },
23
+
// { label: 'Phone', href: 'phone' },
24
+
// { label: 'Progress', href: 'progress' },
25
+
// { label: 'Quote', href: 'quote' },
26
+
// { label: 'Ring Chart', href: 'ring-chart' },
27
+
// { label: 'Star Rating', href: 'star-rating' },
28
+
// { label: 'Video Player', href: 'video-player' },
29
+
// { label: 'Timer', href: 'timer' },
30
+
// { label: 'Social Icons', href: 'social-icons' },
31
+
// { label: 'Waveform Audio Player', href: 'waveform-audio-player' },
32
+
// { label: 'Post', href: 'post' },
33
+
// { label: 'Voxel Art', href: 'voxel-art' },
34
+
// { label: 'Following Pointer', href: 'following-pointer' },
35
+
// { label: 'Audio Visualizer', href: 'audio-visualizer' },
36
+
// { label: 'Color Picker', href: 'color-picker' }
37
+
// ];
40
38
41
39
let { mobileOnly = false } = $props();
42
40
···
75
73
class="mb-6 w-full justify-start">Theme</Button
76
74
>
77
75
78
-
<Accordion type="multiple" class="w-full" value={["base-components", "extra-components"]}>
79
-
<AccordionItem
80
-
value="base-components"
81
-
class="border-0"
82
-
title="Base Components"
83
-
triggerClasses="text-sm px-3 py-1 font-semibold"
84
-
contentClasses="flex flex-col gap-1 items-start px-1"
85
-
>
86
-
{#each baseComponents as component}
87
-
<Button
88
-
data-sveltekit-keepfocus
89
-
variant="ghost"
90
-
onclick={handleClick}
91
-
href="{base}/components/base/{component.href}"
92
-
class="w-full justify-start">{component.label}</Button
93
-
>
94
-
{/each}
95
-
</AccordionItem>
96
-
<AccordionItem
97
-
value="extra-components"
98
-
class="border-0"
99
-
title="Extra Components"
100
-
triggerClasses="text-sm px-3 py-1 font-semibold"
101
-
contentClasses="flex flex-col gap-1 items-start px-1"
102
-
>
103
-
{#each extraComponents as component}
104
-
<Button
105
-
data-sveltekit-keepfocus
106
-
variant="ghost"
107
-
onclick={handleClick}
108
-
href="{base}/components/extras/{component.href}"
109
-
class="w-full justify-start">{component.label}</Button
110
-
>
111
-
{/each}
112
-
</AccordionItem>
76
+
<Accordion type="multiple" class="w-full" value={components.map((c) => c.href)}>
77
+
{#each components as category}
78
+
<AccordionItem
79
+
value={category.href}
80
+
class="border-0"
81
+
title={category.name}
82
+
triggerClasses="text-sm px-3 py-1 font-semibold"
83
+
contentClasses="flex flex-col gap-1 items-start px-1"
84
+
>
85
+
{#each category.components as component}
86
+
<Button
87
+
data-sveltekit-keepfocus
88
+
variant="ghost"
89
+
onclick={handleClick}
90
+
href="{base}/components/{category.href}/{component.href}"
91
+
class="w-full justify-start">{component.label}</Button
92
+
>
93
+
{/each}
94
+
</AccordionItem>
95
+
{/each}
96
+
113
97
</Accordion>
114
98
</div>
115
99
</Sidebar>
+16
src/docs/site-components/components_3d.ts
+16
src/docs/site-components/components_3d.ts
···
1
+
import type { ComponentCard } from './components_base';
2
+
import CardDepth3D from '$docs/cards/3d/CardDepth3D.svelte';
3
+
import CardVoxelArt from '$docs/cards/3d/CardVoxelArt.svelte';
4
+
5
+
export const threeDComponents: ComponentCard[] = [
6
+
{
7
+
component: CardDepth3D,
8
+
label: 'Depth 3D',
9
+
href: 'depth-3d'
10
+
},
11
+
{
12
+
component: CardVoxelArt,
13
+
label: 'Voxel Art',
14
+
href: 'voxel-art'
15
+
}
16
+
].sort((a, b) => a.label.localeCompare(b.label));
+31
src/docs/site-components/components_all.ts
+31
src/docs/site-components/components_all.ts
···
1
+
import { threeDComponents } from './components_3d';
2
+
import { type ComponentCard, baseComponents } from './components_base';
3
+
import { colorComponents } from './components_colors';
4
+
import { extraComponents } from './components_extra';
5
+
6
+
export const components: {
7
+
name: string;
8
+
components: ComponentCard[];
9
+
href: string;
10
+
}[] = [
11
+
{
12
+
name: 'Base components',
13
+
components: baseComponents,
14
+
href: 'base'
15
+
},
16
+
{
17
+
name: 'Colors',
18
+
components: colorComponents,
19
+
href: 'colors'
20
+
},
21
+
{
22
+
name: '3D components',
23
+
components: threeDComponents,
24
+
href: '3d'
25
+
},
26
+
{
27
+
name: 'Extra components',
28
+
components: extraComponents,
29
+
href: 'extras'
30
+
}
31
+
];
+15
src/docs/cards/3d/CardDepth3D.svelte
+15
src/docs/cards/3d/CardDepth3D.svelte
···
1
+
<script lang="ts">
2
+
import { base } from '$app/paths';
3
+
import { Depth3D } from '$lib';
4
+
</script>
5
+
6
+
<Depth3D
7
+
sceneProps={{
8
+
image: {
9
+
image: base + '/images/depth3d/albert_einstein.webp',
10
+
depth: base + '/images/depth3d/albert_einstein-depth.webp'
11
+
},
12
+
rounded: 1,
13
+
mouseMovement: false
14
+
}}
15
+
/>
+19
src/docs/cards/3d/CardVoxelArt.svelte
+19
src/docs/cards/3d/CardVoxelArt.svelte
···
1
+
<script>
2
+
import VoxelArt from '$lib/components/3d/voxel-art/VoxelArt.svelte';
3
+
import data from '$docs/assets/model-apple.json';
4
+
</script>
5
+
6
+
<div class="flex h-full w-full items-center justify-center -mt-8">
7
+
<VoxelArt
8
+
{data}
9
+
colorMap={{
10
+
'770000': 'var(--color-accent-900)',
11
+
'870702': 'var(--color-accent-800)',
12
+
A00F08: 'var(--color-accent-700)',
13
+
B0190E: 'var(--color-accent-600)',
14
+
'770077': 'var(--color-accent-900)',
15
+
'007777': 'var(--color-accent-1000)'
16
+
}}
17
+
cubeSize={10}
18
+
/>
19
+
</div>
+5
-2
src/routes/(main)/components/3d/depth-3d/+page.svelte
+5
-2
src/routes/(main)/components/3d/depth-3d/+page.svelte
+32
src/routes/(main)/components/3d/depth-3d/Depth3D.md
+32
src/routes/(main)/components/3d/depth-3d/Depth3D.md
···
1
+
<script lang="ts">
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Depth 3D
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
1. Choose an image (photos of one person in the center work best) and generate a depth map for it for example with [this tool](https://replicate.com/cjwbw/zoedepth)
14
+
15
+
2. Use component with image and depth map
16
+
17
+
```svelte
18
+
<script lang="ts">
19
+
import { Depth3D } from 'fuchs';
20
+
</script>
21
+
22
+
<Depth3D
23
+
sceneProps={{
24
+
image: {
25
+
image: '/images/image.png',
26
+
depth: '/images/depth.png'
27
+
},
28
+
rounded: 1
29
+
}}
30
+
/>
31
+
```
32
+
+17
src/routes/(main)/components/3d/depth-3d/Example.svelte
+17
src/routes/(main)/components/3d/depth-3d/Example.svelte
···
1
+
<script lang="ts">
2
+
import { base } from '$app/paths';
3
+
import { Depth3D } from '$lib';
4
+
</script>
5
+
6
+
<div class="flex w-full items-center justify-center">
7
+
<Depth3D
8
+
sceneProps={{
9
+
image: {
10
+
image: base + '/images/depth3d/albert_einstein.webp',
11
+
depth: base + '/images/depth3d/albert_einstein-depth.webp'
12
+
},
13
+
rounded: 1,
14
+
mouseMovement: false
15
+
}}
16
+
/>
17
+
</div>
+5
-2
src/routes/(main)/components/3d/voxel-art/+page.svelte
+5
-2
src/routes/(main)/components/3d/voxel-art/+page.svelte
+16
src/routes/(main)/components/3d/voxel-art/Example.svelte
+16
src/routes/(main)/components/3d/voxel-art/Example.svelte
···
1
+
<script>
2
+
import { VoxelArt } from '$lib';
3
+
import data from '$docs/assets/model-apple.json';
4
+
</script>
5
+
6
+
<VoxelArt
7
+
{data}
8
+
colorMap={{
9
+
'770000': 'var(--color-accent-900)',
10
+
'870702': 'var(--color-accent-800)',
11
+
A00F08: 'var(--color-accent-700)',
12
+
B0190E: 'var(--color-accent-600)',
13
+
'770077': 'var(--color-accent-900)',
14
+
'007777': 'var(--color-accent-1000)'
15
+
}}
16
+
/>
+40
src/routes/(main)/components/3d/voxel-art/VoxelArt.md
+40
src/routes/(main)/components/3d/voxel-art/VoxelArt.md
···
1
+
<script lang="ts">
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Depth 3D
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
Create your voxel art model with [this tool](https://voxels.layoutit.com/), download by clicking the "Download" button and use the component with the downloaded json file.
14
+
15
+
```svelte
16
+
<script lang="ts">
17
+
import { VoxelArt } from 'fuchs';
18
+
19
+
import data from '$lib/assets/model.json';
20
+
</script>
21
+
22
+
<VoxelArt {data} />
23
+
```
24
+
25
+
You can also pass a `colorMap` prop to the component to change the colors of the voxel art, e.g. like this:
26
+
27
+
```svelte
28
+
<VoxelArt {data} colorMap={{
29
+
'050505': 'var(--color-accent-50)',
30
+
'101010': 'var(--color-accent-100)',
31
+
'202020': 'var(--color-accent-200)',
32
+
'303030': 'var(--color-accent-300)',
33
+
'404040': 'var(--color-accent-400)',
34
+
'505050': 'var(--color-accent-500)',
35
+
}} />
36
+
```
37
+
38
+
## Credits
39
+
40
+
- inspired by [this article](https://tympanus.net/codrops/2025/03/03/css-meets-voxel-art-building-a-rendering-engine-with-stacked-grids/)