create-tauri-ui 0.3.1 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +55 -55
- package/templates/.shared/src-tauri/Cargo.lock +15 -12
- package/templates/next/package.json +3 -3
- package/templates/next/pnpm-lock.yaml +19 -19
- package/templates/next/src/components/menu.tsx +3 -2
- package/templates/next/src-tauri/Cargo.lock +3835 -3832
- package/templates/sveltekit/package.json +4 -4
- package/templates/sveltekit/pnpm-lock.yaml +95 -72
- package/templates/sveltekit/src/lib/components/docs/dashboard/DashboardPage.svelte +1 -17
- package/templates/sveltekit/src/lib/components/docs/index.ts +1 -18
- package/templates/sveltekit/src/routes/+layout.svelte +13 -65
- package/templates/sveltekit/src/routes/authentication/+page.svelte +2 -18
- package/templates/sveltekit/src/routes/cards/+page.svelte +1 -19
- package/templates/sveltekit/src-tauri/Cargo.lock +21 -18
- package/templates/sveltekit/src-tauri/tauri.conf.json +3 -3
- package/templates/sveltekit/tailwind.config.js +4 -1
- package/templates/sveltekit/vite.config.js +5 -3
- package/templates/vite/package.json +3 -3
- package/templates/vite/pnpm-lock.yaml +417 -419
- package/templates/vite/src-tauri/Cargo.lock +21 -18
- package/templates/sveltekit/src/content/cli.md +0 -63
- package/templates/sveltekit/src/content/components/accordion.md +0 -59
- package/templates/sveltekit/src/content/components/alert-dialog.md +0 -75
- package/templates/sveltekit/src/content/components/alert.md +0 -67
- package/templates/sveltekit/src/content/components/aspect-ratio.md +0 -51
- package/templates/sveltekit/src/content/components/avatar.md +0 -52
- package/templates/sveltekit/src/content/components/badge.md +0 -104
- package/templates/sveltekit/src/content/components/button.md +0 -165
- package/templates/sveltekit/src/content/components/card.md +0 -82
- package/templates/sveltekit/src/content/components/checkbox.md +0 -71
- package/templates/sveltekit/src/content/components/collapsible.md +0 -55
- package/templates/sveltekit/src/content/components/dialog.md +0 -72
- package/templates/sveltekit/src/content/components/hover-card.md +0 -52
- package/templates/sveltekit/src/content/components/input.md +0 -114
- package/templates/sveltekit/src/content/components/label.md +0 -49
- package/templates/sveltekit/src/content/components/progress.md +0 -49
- package/templates/sveltekit/src/content/components/radio-group.md +0 -59
- package/templates/sveltekit/src/content/components/separator.md +0 -49
- package/templates/sveltekit/src/content/components/sheet.md +0 -95
- package/templates/sveltekit/src/content/components/skeleton.md +0 -42
- package/templates/sveltekit/src/content/components/slider.md +0 -49
- package/templates/sveltekit/src/content/components/switch.md +0 -49
- package/templates/sveltekit/src/content/components/table.md +0 -78
- package/templates/sveltekit/src/content/components/tabs.md +0 -56
- package/templates/sveltekit/src/content/components/textarea.md +0 -102
- package/templates/sveltekit/src/content/components/toggle.md +0 -121
- package/templates/sveltekit/src/content/components/tooltip.md +0 -56
- package/templates/sveltekit/src/content/figma.md +0 -22
- package/templates/sveltekit/src/content/forms/superforms.md +0 -4
- package/templates/sveltekit/src/content/index.md +0 -84
- package/templates/sveltekit/src/content/installation.md +0 -327
- package/templates/sveltekit/src/content/theming.md +0 -189
- package/templates/sveltekit/src/content/typography.md +0 -150
- package/templates/sveltekit/src/lib/components/docs/Callout.svelte +0 -17
- package/templates/sveltekit/src/lib/components/docs/CodeBlockWrapper.svelte +0 -30
- package/templates/sveltekit/src/lib/components/docs/ComponentExample.svelte +0 -55
- package/templates/sveltekit/src/lib/components/docs/ComponentSource.svelte +0 -14
- package/templates/sveltekit/src/lib/components/docs/CopyButton.svelte +0 -39
- package/templates/sveltekit/src/lib/components/docs/DocsPager.svelte +0 -51
- package/templates/sveltekit/src/lib/components/docs/HexToChannels.svelte +0 -38
- package/templates/sveltekit/src/lib/components/docs/ManualInstall.svelte +0 -17
- package/templates/sveltekit/src/lib/components/docs/Metadata.svelte +0 -34
- package/templates/sveltekit/src/lib/components/docs/SiteFooter.svelte +0 -42
- package/templates/sveltekit/src/lib/components/docs/SiteHeader.svelte +0 -51
- package/templates/sveltekit/src/lib/components/docs/Steps.svelte +0 -3
- package/templates/sveltekit/src/lib/components/docs/TableOfContents.svelte +0 -55
- package/templates/sveltekit/src/lib/components/docs/Tree.svelte +0 -31
- package/templates/sveltekit/src/lib/components/docs/examples/accordion/AccordionDemo.svelte +0 -27
- package/templates/sveltekit/src/lib/components/docs/examples/accordion/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/alert/AlertDemo.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/examples/alert/AlertDemoDestructive.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/examples/alert/index.ts +0 -2
- package/templates/sveltekit/src/lib/components/docs/examples/alert-dialog/AlertDialogDemo.svelte +0 -33
- package/templates/sveltekit/src/lib/components/docs/examples/alert-dialog/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/aspect-ratio/AspectRatioDemo.svelte +0 -11
- package/templates/sveltekit/src/lib/components/docs/examples/aspect-ratio/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/avatar/AvatarDemo.svelte +0 -8
- package/templates/sveltekit/src/lib/components/docs/examples/avatar/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/badge/BadgeDemo.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/badge/BadgeDemoDestructive.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/badge/BadgeDemoOutline.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/badge/BadgeDemoSecondary.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/badge/index.ts +0 -4
- package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemo.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoDestructive.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoGhost.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoIcon.svelte +0 -9
- package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoLink.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoLoading.svelte +0 -9
- package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoOutline.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoSecondary.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/button/index.ts +0 -8
- package/templates/sveltekit/src/lib/components/docs/examples/card/CardDemo.svelte +0 -65
- package/templates/sveltekit/src/lib/components/docs/examples/card/CardDemoForm.svelte +0 -0
- package/templates/sveltekit/src/lib/components/docs/examples/card/index.ts +0 -2
- package/templates/sveltekit/src/lib/components/docs/examples/checkbox/CheckboxDemo.svelte +0 -13
- package/templates/sveltekit/src/lib/components/docs/examples/checkbox/CheckboxDemoDisabled.svelte +0 -13
- package/templates/sveltekit/src/lib/components/docs/examples/checkbox/CheckboxDemoText.svelte +0 -18
- package/templates/sveltekit/src/lib/components/docs/examples/checkbox/index.ts +0 -3
- package/templates/sveltekit/src/lib/components/docs/examples/collapsible/CollapsibleDemo.svelte +0 -24
- package/templates/sveltekit/src/lib/components/docs/examples/collapsible/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/dialog/DialogDemo.svelte +0 -41
- package/templates/sveltekit/src/lib/components/docs/examples/dialog/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/hover-card/HoverCardDemo.svelte +0 -28
- package/templates/sveltekit/src/lib/components/docs/examples/hover-card/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/index.ts +0 -27
- package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemo.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoButton.svelte +0 -9
- package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoDisabled.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoFile.svelte +0 -9
- package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoLabel.svelte +0 -9
- package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoText.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/examples/input/index.ts +0 -6
- package/templates/sveltekit/src/lib/components/docs/examples/label/LabelDemo.svelte +0 -11
- package/templates/sveltekit/src/lib/components/docs/examples/label/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/progress/ProgressDemo.svelte +0 -12
- package/templates/sveltekit/src/lib/components/docs/examples/progress/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/radio-group/RadioGroupDemo.svelte +0 -19
- package/templates/sveltekit/src/lib/components/docs/examples/radio-group/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/separator/SeparatorDemo.svelte +0 -18
- package/templates/sveltekit/src/lib/components/docs/examples/separator/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/sheet/SheetDemo.svelte +0 -44
- package/templates/sveltekit/src/lib/components/docs/examples/sheet/SheetPositionDemo.svelte +0 -62
- package/templates/sveltekit/src/lib/components/docs/examples/sheet/SheetSizeDemo.svelte +0 -62
- package/templates/sveltekit/src/lib/components/docs/examples/sheet/index.ts +0 -3
- package/templates/sveltekit/src/lib/components/docs/examples/skeleton/SkeletonDemo.svelte +0 -11
- package/templates/sveltekit/src/lib/components/docs/examples/skeleton/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/slider/SliderDemo.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/slider/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/switch/SwitchDemo.svelte +0 -9
- package/templates/sveltekit/src/lib/components/docs/examples/switch/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/table/TableDemo.svelte +0 -78
- package/templates/sveltekit/src/lib/components/docs/examples/table/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/tabs/TabsDemo.svelte +0 -67
- package/templates/sveltekit/src/lib/components/docs/examples/tabs/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/textarea/TextareaDemo.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/textarea/TextareaDemoButton.svelte +0 -9
- package/templates/sveltekit/src/lib/components/docs/examples/textarea/TextareaDemoDisabled.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/textarea/TextareaDemoLabel.svelte +0 -9
- package/templates/sveltekit/src/lib/components/docs/examples/textarea/TextareaDemoText.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/examples/textarea/index.ts +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/toggle/ToggleDemo.svelte +0 -8
- package/templates/sveltekit/src/lib/components/docs/examples/toggle/ToggleDemoDisabled.svelte +0 -8
- package/templates/sveltekit/src/lib/components/docs/examples/toggle/ToggleDemoLg.svelte +0 -8
- package/templates/sveltekit/src/lib/components/docs/examples/toggle/ToggleDemoOutline.svelte +0 -8
- package/templates/sveltekit/src/lib/components/docs/examples/toggle/ToggleDemoSm.svelte +0 -8
- package/templates/sveltekit/src/lib/components/docs/examples/toggle/ToggleDemoText.svelte +0 -9
- package/templates/sveltekit/src/lib/components/docs/examples/toggle/index.ts +0 -6
- package/templates/sveltekit/src/lib/components/docs/examples/tooltip/TooltipDemo.svelte +0 -19
- package/templates/sveltekit/src/lib/components/docs/examples/tooltip/index.ts +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/typography/BlockquoteDemo.svelte +0 -4
- package/templates/sveltekit/src/lib/components/docs/examples/typography/H1Demo.svelte +0 -3
- package/templates/sveltekit/src/lib/components/docs/examples/typography/H2Demo.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/typography/H3Demo.svelte +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/typography/H4Demo.svelte +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/typography/InlineCodeDemo.svelte +0 -3
- package/templates/sveltekit/src/lib/components/docs/examples/typography/LargeDemo.svelte +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/typography/LeadDemo.svelte +0 -3
- package/templates/sveltekit/src/lib/components/docs/examples/typography/ListDemo.svelte +0 -5
- package/templates/sveltekit/src/lib/components/docs/examples/typography/MutedDemo.svelte +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/typography/PDemo.svelte +0 -4
- package/templates/sveltekit/src/lib/components/docs/examples/typography/SmallDemo.svelte +0 -1
- package/templates/sveltekit/src/lib/components/docs/examples/typography/TableDemo.svelte +0 -56
- package/templates/sveltekit/src/lib/components/docs/examples/typography/TypographyDemo.svelte +0 -117
- package/templates/sveltekit/src/lib/components/docs/examples/typography/index.ts +0 -14
- package/templates/sveltekit/src/lib/components/docs/mdsvex/a.svelte +0 -12
- package/templates/sveltekit/src/lib/components/docs/mdsvex/blockquote.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/mdsvex/h1.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/mdsvex/h2.svelte +0 -16
- package/templates/sveltekit/src/lib/components/docs/mdsvex/h3.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/mdsvex/h4.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/mdsvex/h5.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/mdsvex/h6.svelte +0 -13
- package/templates/sveltekit/src/lib/components/docs/mdsvex/hr.svelte +0 -8
- package/templates/sveltekit/src/lib/components/docs/mdsvex/img.svelte +0 -11
- package/templates/sveltekit/src/lib/components/docs/mdsvex/index.ts +0 -19
- package/templates/sveltekit/src/lib/components/docs/mdsvex/li.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/mdsvex/mdsvex.svelte +0 -37
- package/templates/sveltekit/src/lib/components/docs/mdsvex/ol.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/mdsvex/p.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/mdsvex/pre.svelte +0 -24
- package/templates/sveltekit/src/lib/components/docs/mdsvex/table.svelte +0 -12
- package/templates/sveltekit/src/lib/components/docs/mdsvex/td.svelte +0 -16
- package/templates/sveltekit/src/lib/components/docs/mdsvex/th.svelte +0 -16
- package/templates/sveltekit/src/lib/components/docs/mdsvex/tr.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/mdsvex/ul.svelte +0 -10
- package/templates/sveltekit/src/lib/components/docs/nav/DocsSidebarNav.svelte +0 -24
- package/templates/sveltekit/src/lib/components/docs/nav/DocsSidebarNavItems.svelte +0 -43
- package/templates/sveltekit/src/lib/components/docs/nav/MainNav.svelte +0 -31
- package/templates/sveltekit/src/lib/components/docs/nav/MobileLink.svelte +0 -19
- package/templates/sveltekit/src/lib/components/docs/nav/MobileNav.svelte +0 -56
- package/templates/sveltekit/src/lib/components/docs/nav/index.ts +0 -4
- package/templates/sveltekit/src/lib/components/docs/page-header/PageHeader.svelte +0 -13
- package/templates/sveltekit/src/lib/components/docs/page-header/PageHeaderDescription.svelte +0 -13
- package/templates/sveltekit/src/lib/components/docs/page-header/PageHeaderHeading.svelte +0 -16
- package/templates/sveltekit/src/lib/components/docs/page-header/index.ts +0 -3
|
@@ -1,165 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Button
|
|
3
|
-
description: Displays a button or a component that looks like a button.
|
|
4
|
-
featured: true
|
|
5
|
-
component: true
|
|
6
|
-
source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/button
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
<script>
|
|
10
|
-
import { ButtonDemo, ButtonDemoDestructive, ButtonDemoGhost, ButtonDemoOutline, ButtonDemoSecondary, ButtonDemoIcon, ButtonDemoLoading, ButtonDemoLink, ComponentExample, ManualInstall } from '$lib/components/docs';
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemo.svelte">
|
|
14
|
-
|
|
15
|
-
<div slot="example">
|
|
16
|
-
<ButtonDemo />
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
</ComponentExample>
|
|
20
|
-
|
|
21
|
-
## Installation
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npx shadcn-svelte add button
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
<ManualInstall>
|
|
28
|
-
|
|
29
|
-
1. Copy and paste the component source files linked at the top of this page into your project.
|
|
30
|
-
|
|
31
|
-
</ManualInstall>
|
|
32
|
-
|
|
33
|
-
## Usage
|
|
34
|
-
|
|
35
|
-
```svelte
|
|
36
|
-
<script lang="ts">
|
|
37
|
-
import { Button } from '$components/ui/button';
|
|
38
|
-
</script>
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
```svelte
|
|
42
|
-
<Button variant="outline">Button</Button>
|
|
43
|
-
```
|
|
44
|
-
|
|
45
|
-
### Link
|
|
46
|
-
|
|
47
|
-
You can convert the `<button>` into an `<a>` element by simply passing an `href` as a prop.
|
|
48
|
-
|
|
49
|
-
```svelte
|
|
50
|
-
<script lang="ts">
|
|
51
|
-
import { Button } from '$components/ui/button';
|
|
52
|
-
</script>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
```svelte
|
|
56
|
-
<Button href="/dashboard">Dashboard</Button>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
Alternatively, you can use the `buttonVariants` helper to create a link that looks like a button.
|
|
60
|
-
|
|
61
|
-
```svelte
|
|
62
|
-
<script lang="ts">
|
|
63
|
-
import { buttonVariants } from '$components/ui/button';
|
|
64
|
-
</script>
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
```svelte
|
|
68
|
-
<a href="/dashboard" class={buttonVariants({ variant: 'outline' })}> Dashboard </a>
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## Examples
|
|
72
|
-
|
|
73
|
-
### Primary
|
|
74
|
-
|
|
75
|
-
<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemo.svelte">
|
|
76
|
-
|
|
77
|
-
<div slot="example">
|
|
78
|
-
<ButtonDemo />
|
|
79
|
-
</div>
|
|
80
|
-
|
|
81
|
-
</ComponentExample>
|
|
82
|
-
|
|
83
|
-
---
|
|
84
|
-
|
|
85
|
-
### Secondary
|
|
86
|
-
|
|
87
|
-
<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoSecondary.svelte">
|
|
88
|
-
|
|
89
|
-
<div slot="example">
|
|
90
|
-
<ButtonDemoSecondary />
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
</ComponentExample>
|
|
94
|
-
|
|
95
|
-
---
|
|
96
|
-
|
|
97
|
-
### Destructive
|
|
98
|
-
|
|
99
|
-
<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoDestructive.svelte">
|
|
100
|
-
|
|
101
|
-
<div slot="example">
|
|
102
|
-
<ButtonDemoDestructive />
|
|
103
|
-
</div>
|
|
104
|
-
|
|
105
|
-
</ComponentExample>
|
|
106
|
-
|
|
107
|
-
---
|
|
108
|
-
|
|
109
|
-
### Outline
|
|
110
|
-
|
|
111
|
-
<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoOutline.svelte">
|
|
112
|
-
|
|
113
|
-
<div slot="example">
|
|
114
|
-
<ButtonDemoOutline />
|
|
115
|
-
</div>
|
|
116
|
-
|
|
117
|
-
</ComponentExample>
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
### Ghost
|
|
122
|
-
|
|
123
|
-
<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoGhost.svelte">
|
|
124
|
-
|
|
125
|
-
<div slot="example">
|
|
126
|
-
<ButtonDemoGhost />
|
|
127
|
-
</div>
|
|
128
|
-
|
|
129
|
-
</ComponentExample>
|
|
130
|
-
|
|
131
|
-
---
|
|
132
|
-
|
|
133
|
-
### Link
|
|
134
|
-
|
|
135
|
-
<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoLink.svelte">
|
|
136
|
-
|
|
137
|
-
<div slot="example">
|
|
138
|
-
<ButtonDemoLink />
|
|
139
|
-
</div>
|
|
140
|
-
|
|
141
|
-
</ComponentExample>
|
|
142
|
-
|
|
143
|
-
---
|
|
144
|
-
|
|
145
|
-
### With Icon
|
|
146
|
-
|
|
147
|
-
<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoIcon.svelte">
|
|
148
|
-
|
|
149
|
-
<div slot="example">
|
|
150
|
-
<ButtonDemoIcon />
|
|
151
|
-
</div>
|
|
152
|
-
|
|
153
|
-
</ComponentExample>
|
|
154
|
-
|
|
155
|
-
---
|
|
156
|
-
|
|
157
|
-
### Loading
|
|
158
|
-
|
|
159
|
-
<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoLoading.svelte">
|
|
160
|
-
|
|
161
|
-
<div slot="example">
|
|
162
|
-
<ButtonDemoLoading />
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
</ComponentExample>
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Card
|
|
3
|
-
description: Displays a card with header, content, and footer.
|
|
4
|
-
featured: true
|
|
5
|
-
source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/card
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
<script>
|
|
9
|
-
import { CardDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<ComponentExample src="src/lib/components/docs/examples/card/CardDemo.svelte">
|
|
13
|
-
|
|
14
|
-
<div slot="example">
|
|
15
|
-
<CardDemo />
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
</ComponentExample>
|
|
19
|
-
|
|
20
|
-
## Installation
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npx shadcn-svelte add card
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
<ManualInstall>
|
|
27
|
-
|
|
28
|
-
1. Copy and paste the component source files linked at the top of this page into your project.
|
|
29
|
-
|
|
30
|
-
</ManualInstall>
|
|
31
|
-
|
|
32
|
-
## Usage
|
|
33
|
-
|
|
34
|
-
```svelte
|
|
35
|
-
<script lang="ts">
|
|
36
|
-
import {
|
|
37
|
-
Card,
|
|
38
|
-
CardContent,
|
|
39
|
-
CardDescription,
|
|
40
|
-
CardFooter,
|
|
41
|
-
CardHeader,
|
|
42
|
-
CardTitle
|
|
43
|
-
} from '$components/ui/card';
|
|
44
|
-
</script>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
```svelte
|
|
48
|
-
<Card>
|
|
49
|
-
<CardHeader>
|
|
50
|
-
<CardTitle>Card Title</CardTitle>
|
|
51
|
-
<CardDescription>Card Description</CardDescription>
|
|
52
|
-
</CardHeader>
|
|
53
|
-
<CardContent>
|
|
54
|
-
<p>Card Content</p>
|
|
55
|
-
</CardContent>
|
|
56
|
-
<CardFooter>
|
|
57
|
-
<p>Card Footer</p>
|
|
58
|
-
</CardFooter>
|
|
59
|
-
</Card>
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
### Modify the heading level
|
|
63
|
-
|
|
64
|
-
By default, the `<CardTitle>` component renders an `<h3>` element. You can change this by passing a `tag` prop to the component.
|
|
65
|
-
|
|
66
|
-
For example:
|
|
67
|
-
|
|
68
|
-
```svelte
|
|
69
|
-
<CardTitle tag={'h2'}>This will render an H2</CardTitle>
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
```svelte
|
|
73
|
-
<CardTitle tag={'h5'}>This will render an H5</CardTitle>
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
```svelte
|
|
77
|
-
<CardTitle tag={'p'}>This will render a P tag</CardTitle>
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
## Examples
|
|
81
|
-
|
|
82
|
-
Coming soon
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Checkbox
|
|
3
|
-
description: A control that allows the user to toggle between checked and not checked.
|
|
4
|
-
component: true
|
|
5
|
-
source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/checkbox
|
|
6
|
-
radix: https://www.radix-svelte.com/docs/checkbox
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
<script>
|
|
10
|
-
import { CheckboxDemo, CheckboxDemoDisabled, CheckboxDemoText, ComponentExample, ManualInstall } from '$lib/components/docs';
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<ComponentExample src="src/lib/components/docs/examples/checkbox/CheckboxDemo.svelte">
|
|
14
|
-
|
|
15
|
-
<div slot="example">
|
|
16
|
-
<CheckboxDemo />
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
</ComponentExample>
|
|
20
|
-
|
|
21
|
-
## Installation
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npx shadcn-svelte add checkbox
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
<ManualInstall>
|
|
28
|
-
|
|
29
|
-
1. Install `radix-svelte`:
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install radix-svelte
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
2. Copy and paste the component source files linked at the top of this page into your project.
|
|
36
|
-
|
|
37
|
-
</ManualInstall>
|
|
38
|
-
|
|
39
|
-
## Usage
|
|
40
|
-
|
|
41
|
-
```svelte
|
|
42
|
-
<script lang="ts">
|
|
43
|
-
import { Checkbox } from '$components/ui/checkbox';
|
|
44
|
-
</script>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
```svelte
|
|
48
|
-
<Checkbox />
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Examples
|
|
52
|
-
|
|
53
|
-
### With Text
|
|
54
|
-
|
|
55
|
-
<ComponentExample src="src/lib/components/docs/examples/checkbox/CheckboxDemoText.svelte">
|
|
56
|
-
|
|
57
|
-
<div slot="example">
|
|
58
|
-
<CheckboxDemoText />
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
</ComponentExample>
|
|
62
|
-
|
|
63
|
-
### Disabled
|
|
64
|
-
|
|
65
|
-
<ComponentExample src="src/lib/components/docs/examples/checkbox/CheckboxDemoDisabled.svelte">
|
|
66
|
-
|
|
67
|
-
<div slot="example">
|
|
68
|
-
<CheckboxDemoDisabled />
|
|
69
|
-
</div>
|
|
70
|
-
|
|
71
|
-
</ComponentExample>
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Collapsible
|
|
3
|
-
description: An interactive component which expands/collapses a panel.
|
|
4
|
-
component: true
|
|
5
|
-
featured: true
|
|
6
|
-
source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/collapsible
|
|
7
|
-
radix: https://www.radix-svelte.com/docs/collapsible
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
<script>
|
|
11
|
-
import { CollapsibleDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<ComponentExample src="src/lib/components/docs/examples/collapsible/CollapsibleDemo.svelte">
|
|
15
|
-
|
|
16
|
-
<div slot="example">
|
|
17
|
-
<CollapsibleDemo />
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
</ComponentExample>
|
|
21
|
-
|
|
22
|
-
## Installation
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npx shadcn-svelte add collapsible
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
<ManualInstall>
|
|
29
|
-
|
|
30
|
-
1. Install `radix-svelte`:
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
npm install radix-svelte
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
2. Copy and paste the component source files linked at the top of this page into your project.
|
|
37
|
-
|
|
38
|
-
</ManualInstall>
|
|
39
|
-
|
|
40
|
-
## Usage
|
|
41
|
-
|
|
42
|
-
```svelte
|
|
43
|
-
<script lang="ts">
|
|
44
|
-
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '$components/ui/collapsible';
|
|
45
|
-
</script>
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
```svelte
|
|
49
|
-
<Collapsible>
|
|
50
|
-
<CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
|
|
51
|
-
<CollapsibleContent>
|
|
52
|
-
Yes. Free to use for personal and commercial projects. No attribution required.
|
|
53
|
-
</CollapsibleContent>
|
|
54
|
-
</Collapsible>
|
|
55
|
-
```
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Dialog
|
|
3
|
-
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
|
|
4
|
-
component: true
|
|
5
|
-
featured: true
|
|
6
|
-
source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/dialog
|
|
7
|
-
radix: https://www.radix-svelte.com/docs/dialog
|
|
8
|
-
---
|
|
9
|
-
|
|
10
|
-
<script>
|
|
11
|
-
import { DialogDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<ComponentExample src="src/lib/components/docs/examples/dialog/DialogDemo.svelte">
|
|
15
|
-
|
|
16
|
-
<div slot="example">
|
|
17
|
-
<DialogDemo />
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
|
-
</ComponentExample>
|
|
21
|
-
|
|
22
|
-
## Installation
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
npx shadcn-svelte add dialog
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
<ManualInstall>
|
|
29
|
-
|
|
30
|
-
1. Install `radix-svelte`:
|
|
31
|
-
|
|
32
|
-
```bash
|
|
33
|
-
npm install radix-svelte
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
2. Copy and paste the component source files linked at the top of this page into your project.
|
|
37
|
-
|
|
38
|
-
</ManualInstall>
|
|
39
|
-
|
|
40
|
-
## Usage
|
|
41
|
-
|
|
42
|
-
```svelte
|
|
43
|
-
<script lang="ts">
|
|
44
|
-
import {
|
|
45
|
-
Dialog,
|
|
46
|
-
DialogContent,
|
|
47
|
-
DialogDescription,
|
|
48
|
-
DialogHeader,
|
|
49
|
-
DialogTitle,
|
|
50
|
-
DialogTrigger
|
|
51
|
-
} from '$components/ui/dialog';
|
|
52
|
-
</script>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
```svelte
|
|
56
|
-
<Dialog>
|
|
57
|
-
<DialogTrigger>Open</DialogTrigger>
|
|
58
|
-
<DialogContent>
|
|
59
|
-
<DialogHeader>
|
|
60
|
-
<DialogTitle>Are you sure absolutely sure?</DialogTitle>
|
|
61
|
-
<DialogDescription>
|
|
62
|
-
This action cannot be undone. This will permanently delete your account and remove your data
|
|
63
|
-
from our servers.
|
|
64
|
-
</DialogDescription>
|
|
65
|
-
</DialogHeader>
|
|
66
|
-
</DialogContent>
|
|
67
|
-
</Dialog>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
## Notes
|
|
71
|
-
|
|
72
|
-
(coming soon)
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Hover Card
|
|
3
|
-
description: For sighted users to preview content available behind a link.
|
|
4
|
-
component: true
|
|
5
|
-
source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/hover-card
|
|
6
|
-
radix: https://www.radix-svelte.com/docs/hovercard
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
<script>
|
|
10
|
-
import { HoverCardDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<ComponentExample src="src/lib/components/docs/examples/hover-card/HoverCardDemo.svelte">
|
|
14
|
-
|
|
15
|
-
<div slot="example">
|
|
16
|
-
<HoverCardDemo />
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
</ComponentExample>
|
|
20
|
-
|
|
21
|
-
## Installation
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npx shadcn-svelte add hover-card
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
<ManualInstall>
|
|
28
|
-
|
|
29
|
-
1. Install `radix-svelte`:
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install radix-svelte
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
2. Copy and paste the component source files linked at the top of this page into your project.
|
|
36
|
-
|
|
37
|
-
</ManualInstall>
|
|
38
|
-
|
|
39
|
-
## Usage
|
|
40
|
-
|
|
41
|
-
```svelte
|
|
42
|
-
<script lang="ts">
|
|
43
|
-
import { HoverCard, HoverCardContent, HoverCardTrigger } from '$components/ui/hover-card';
|
|
44
|
-
</script>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
```svelte
|
|
48
|
-
<HoverCard>
|
|
49
|
-
<HoverCardTrigger>Hover</HoverCardTrigger>
|
|
50
|
-
<HoverCardContent>SvelteKit - Web development, streamlined</HoverCardContent>
|
|
51
|
-
</HoverCard>
|
|
52
|
-
```
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Input
|
|
3
|
-
description: Displays a form input field or a component that looks like an input field.
|
|
4
|
-
component: true
|
|
5
|
-
source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/input
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
<script>
|
|
9
|
-
import { InputDemo, InputDemoDisabled, InputDemoLabel, InputDemoText, InputDemoFile, InputDemoButton, ComponentExample, ManualInstall } from '$lib/components/docs';
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<ComponentExample src="src/lib/components/docs/examples/input/InputDemo.svelte" >
|
|
13
|
-
|
|
14
|
-
<div slot="example" style="max-width: 24rem; width: 100%;">
|
|
15
|
-
<InputDemo />
|
|
16
|
-
</div>
|
|
17
|
-
|
|
18
|
-
</ComponentExample>
|
|
19
|
-
|
|
20
|
-
## Installation
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npx shadcn-svelte add input
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
<ManualInstall>
|
|
27
|
-
|
|
28
|
-
1. Copy and paste the component source files linked at the top of this page into your project.
|
|
29
|
-
|
|
30
|
-
</ManualInstall>
|
|
31
|
-
|
|
32
|
-
## Usage
|
|
33
|
-
|
|
34
|
-
```svelte
|
|
35
|
-
<script lang="ts">
|
|
36
|
-
import { Input } from '$components/ui/input';
|
|
37
|
-
</script>
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
```svelte
|
|
41
|
-
<Input />
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Examples
|
|
45
|
-
|
|
46
|
-
### Default
|
|
47
|
-
|
|
48
|
-
<ComponentExample src="src/lib/components/docs/examples/input/InputDemo.svelte">
|
|
49
|
-
|
|
50
|
-
<div slot="example" style="max-width: 24rem; width: 100%;">
|
|
51
|
-
<InputDemo />
|
|
52
|
-
</div>
|
|
53
|
-
|
|
54
|
-
</ComponentExample>
|
|
55
|
-
|
|
56
|
-
---
|
|
57
|
-
|
|
58
|
-
### Disabled
|
|
59
|
-
|
|
60
|
-
<ComponentExample src="src/lib/components/docs/examples/input/InputDemoDisabled.svelte">
|
|
61
|
-
|
|
62
|
-
<div slot="example" style="max-width: 24rem; width: 100%;">
|
|
63
|
-
<InputDemoDisabled />
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
</ComponentExample>
|
|
67
|
-
|
|
68
|
-
---
|
|
69
|
-
|
|
70
|
-
### With Label
|
|
71
|
-
|
|
72
|
-
<ComponentExample src="src/lib/components/docs/examples/input/InputDemoLabel.svelte">
|
|
73
|
-
|
|
74
|
-
<div slot="example" style="max-width: 24rem; width: 100%;">
|
|
75
|
-
<InputDemoLabel />
|
|
76
|
-
</div>
|
|
77
|
-
|
|
78
|
-
</ComponentExample>
|
|
79
|
-
|
|
80
|
-
---
|
|
81
|
-
|
|
82
|
-
### With Text
|
|
83
|
-
|
|
84
|
-
<ComponentExample src="src/lib/components/docs/examples/input/InputDemoText.svelte">
|
|
85
|
-
|
|
86
|
-
<div slot="example" style="max-width: 24rem; width: 100%;">
|
|
87
|
-
<InputDemoText />
|
|
88
|
-
</div>
|
|
89
|
-
|
|
90
|
-
</ComponentExample>
|
|
91
|
-
|
|
92
|
-
---
|
|
93
|
-
|
|
94
|
-
### With Button
|
|
95
|
-
|
|
96
|
-
<ComponentExample src="src/lib/components/docs/examples/input/InputDemoButton.svelte">
|
|
97
|
-
|
|
98
|
-
<div slot="example" style="max-width: 24rem; width: 100%;">
|
|
99
|
-
<InputDemoButton />
|
|
100
|
-
</div>
|
|
101
|
-
|
|
102
|
-
</ComponentExample>
|
|
103
|
-
|
|
104
|
-
---
|
|
105
|
-
|
|
106
|
-
### File
|
|
107
|
-
|
|
108
|
-
<ComponentExample src="src/lib/components/docs/examples/input/InputDemoFile.svelte">
|
|
109
|
-
|
|
110
|
-
<div slot="example" style="max-width: 24rem; width: 100%;">
|
|
111
|
-
<InputDemoFile />
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
</ComponentExample>
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Label
|
|
3
|
-
description: Renders an accessible label associated with controls.
|
|
4
|
-
component: true
|
|
5
|
-
source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/label
|
|
6
|
-
radix: https://www.radix-svelte.com/docs/label
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
<script>
|
|
10
|
-
import { LabelDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<ComponentExample src="src/lib/components/docs/examples/label/LabelDemo.svelte">
|
|
14
|
-
|
|
15
|
-
<div slot="example">
|
|
16
|
-
<LabelDemo />
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
</ComponentExample>
|
|
20
|
-
|
|
21
|
-
## Installation
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npx shadcn-svelte add label
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
<ManualInstall>
|
|
28
|
-
|
|
29
|
-
1. Install `radix-svelte`:
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install radix-svelte
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
2. Copy and paste the component source files linked at the top of this page into your project.
|
|
36
|
-
|
|
37
|
-
</ManualInstall>
|
|
38
|
-
|
|
39
|
-
## Usage
|
|
40
|
-
|
|
41
|
-
```svelte
|
|
42
|
-
<script lang="ts">
|
|
43
|
-
import { Label } from '$components/ui/label';
|
|
44
|
-
</script>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
```svelte
|
|
48
|
-
<Label for="email">Your email address</Label>
|
|
49
|
-
```
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Progress
|
|
3
|
-
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
|
|
4
|
-
component: true
|
|
5
|
-
source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/progress
|
|
6
|
-
radix: https://www.radix-svelte.com/docs/progress
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
<script>
|
|
10
|
-
import { ProgressDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<ComponentExample src="src/lib/components/docs/examples/progress/ProgressDemo.svelte">
|
|
14
|
-
|
|
15
|
-
<div slot="example" style="width: 60%;">
|
|
16
|
-
<ProgressDemo />
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
</ComponentExample>
|
|
20
|
-
|
|
21
|
-
## Installation
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npx shadcn-svelte add progress
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
<ManualInstall>
|
|
28
|
-
|
|
29
|
-
1. Install `radix-svelte`:
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm install radix-svelte
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
2. Copy and paste the component source files linked at the top of this page into your project.
|
|
36
|
-
|
|
37
|
-
</ManualInstall>
|
|
38
|
-
|
|
39
|
-
## Usage
|
|
40
|
-
|
|
41
|
-
```svelte
|
|
42
|
-
<script lang="ts">
|
|
43
|
-
import { Progress } from '$components/ui/progress';
|
|
44
|
-
</script>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
```svelte
|
|
48
|
-
<Progress value={33}>
|
|
49
|
-
```
|