create-tauri-ui 0.3.1 → 0.3.3
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/index.js +1 -1
- package/package.json +55 -55
- package/templates/.shared/.github/workflows/release.yml +112 -112
- package/templates/.shared/src-tauri/Cargo.lock +3835 -3832
- package/templates/.shared/src-tauri/Cargo.toml +4 -4
- package/templates/.shared/src-tauri/build.rs +3 -3
- package/templates/.shared/src-tauri/src/main.rs +22 -22
- package/templates/next/.github/workflows/release.yml +108 -108
- package/templates/next/.vscode/extensions.json +3 -3
- package/templates/next/README.md +95 -95
- package/templates/next/next-env.d.ts +5 -5
- package/templates/next/package.json +87 -87
- package/templates/next/pnpm-lock.yaml +4911 -4911
- package/templates/next/postcss.config.js +6 -6
- package/templates/next/prettier.config.js +35 -35
- package/templates/next/src/app/examples/layout.tsx +7 -7
- package/templates/next/src/app/page.tsx +5 -5
- package/templates/next/src/components/examples-nav.tsx +70 -70
- package/templates/next/src/components/greeting.tsx +21 -21
- package/templates/next/src/components/menu.tsx +3 -2
- package/templates/next/src/components/mode-toggle.tsx +43 -43
- package/templates/next/src/components/page-header.tsx +52 -52
- package/templates/next/src/components/style-switcher.tsx +19 -19
- package/templates/next/src/components/tailwind-indicator.tsx +18 -18
- package/templates/next/src/components/theme-provider.tsx +9 -9
- package/templates/next/src/components/ui/accordion.tsx +60 -60
- package/templates/next/src/components/ui/alert-dialog.tsx +145 -145
- package/templates/next/src/components/ui/alert.tsx +59 -59
- package/templates/next/src/components/ui/aspect-ratio.tsx +7 -7
- package/templates/next/src/components/ui/avatar.tsx +50 -50
- package/templates/next/src/components/ui/badge.tsx +36 -36
- package/templates/next/src/components/ui/button.tsx +56 -56
- package/templates/next/src/components/ui/calendar.tsx +64 -64
- package/templates/next/src/components/ui/card.tsx +79 -79
- package/templates/next/src/components/ui/checkbox.tsx +30 -30
- package/templates/next/src/components/ui/collapsible.tsx +11 -11
- package/templates/next/src/components/ui/command.tsx +155 -155
- package/templates/next/src/components/ui/context-menu.tsx +200 -200
- package/templates/next/src/components/ui/dialog.tsx +123 -123
- package/templates/next/src/components/ui/dropdown-menu.tsx +200 -200
- package/templates/next/src/components/ui/form.tsx +176 -176
- package/templates/next/src/components/ui/hover-card.tsx +29 -29
- package/templates/next/src/components/ui/input.tsx +25 -25
- package/templates/next/src/components/ui/label.tsx +26 -26
- package/templates/next/src/components/ui/menubar.tsx +236 -236
- package/templates/next/src/components/ui/navigation-menu.tsx +128 -128
- package/templates/next/src/components/ui/popover.tsx +31 -31
- package/templates/next/src/components/ui/progress.tsx +28 -28
- package/templates/next/src/components/ui/radio-group.tsx +44 -44
- package/templates/next/src/components/ui/scroll-area.tsx +48 -48
- package/templates/next/src/components/ui/select.tsx +121 -121
- package/templates/next/src/components/ui/separator.tsx +31 -31
- package/templates/next/src/components/ui/sheet.tsx +144 -144
- package/templates/next/src/components/ui/skeleton.tsx +15 -15
- package/templates/next/src/components/ui/slider.tsx +28 -28
- package/templates/next/src/components/ui/switch.tsx +29 -29
- package/templates/next/src/components/ui/table.tsx +114 -114
- package/templates/next/src/components/ui/tabs.tsx +55 -55
- package/templates/next/src/components/ui/textarea.tsx +24 -24
- package/templates/next/src/components/ui/toast.tsx +127 -127
- package/templates/next/src/components/ui/toaster.tsx +35 -35
- package/templates/next/src/components/ui/toggle.tsx +45 -45
- package/templates/next/src/components/ui/tooltip.tsx +30 -30
- package/templates/next/src/components/ui/use-toast.ts +192 -192
- package/templates/next/src/data/albums.ts +71 -71
- package/templates/next/src/data/playlists.ts +16 -16
- package/templates/next/src-tauri/Cargo.lock +21 -18
- package/templates/next/src-tauri/Cargo.toml +39 -39
- package/templates/next/src-tauri/build.rs +3 -3
- package/templates/sveltekit/.github/workflows/release.yml +108 -108
- package/templates/sveltekit/.prettierignore +13 -13
- package/templates/sveltekit/.prettierrc +8 -8
- package/templates/sveltekit/README.md +1 -1
- package/templates/sveltekit/package.json +85 -85
- package/templates/sveltekit/pnpm-lock.yaml +4177 -4154
- package/templates/sveltekit/postcss.config.cjs +13 -13
- package/templates/sveltekit/src/app.d.ts +18 -18
- package/templates/sveltekit/src/app.html +16 -16
- package/templates/sveltekit/src/index.test.ts +7 -7
- package/templates/sveltekit/src/lib/components/docs/TailwindIndicator.svelte +10 -10
- package/templates/sveltekit/src/lib/components/docs/charts/Bar.svelte +152 -152
- package/templates/sveltekit/src/lib/components/docs/dashboard/DashboardPage.svelte +108 -124
- package/templates/sveltekit/src/lib/components/docs/dashboard/MainNav.svelte +31 -31
- package/templates/sveltekit/src/lib/components/docs/dashboard/Overview.svelte +5 -5
- package/templates/sveltekit/src/lib/components/docs/dashboard/RecentSales.svelte +61 -61
- package/templates/sveltekit/src/lib/components/docs/dashboard/Search.svelte +7 -7
- package/templates/sveltekit/src/lib/components/docs/dashboard/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/docs/examples-nav/ExampleCodeLink.svelte +19 -19
- package/templates/sveltekit/src/lib/components/docs/examples-nav/ExamplesNav.svelte +27 -27
- package/templates/sveltekit/src/lib/components/docs/examples-nav/index.ts +2 -2
- package/templates/sveltekit/src/lib/components/docs/icons/Apple.svelte +12 -12
- package/templates/sveltekit/src/lib/components/docs/icons/Aria.svelte +11 -11
- package/templates/sveltekit/src/lib/components/docs/icons/GitHub.svelte +12 -12
- package/templates/sveltekit/src/lib/components/docs/icons/Google.svelte +12 -12
- package/templates/sveltekit/src/lib/components/docs/icons/Logo.svelte +17 -17
- package/templates/sveltekit/src/lib/components/docs/icons/Minimize.svelte +12 -12
- package/templates/sveltekit/src/lib/components/docs/icons/Npm.svelte +12 -12
- package/templates/sveltekit/src/lib/components/docs/icons/PayPal.svelte +12 -12
- package/templates/sveltekit/src/lib/components/docs/icons/Pnpm.svelte +12 -12
- package/templates/sveltekit/src/lib/components/docs/icons/Radix.svelte +14 -14
- package/templates/sveltekit/src/lib/components/docs/icons/RadixSvelte.svelte +14 -14
- package/templates/sveltekit/src/lib/components/docs/icons/Tailwind.svelte +12 -12
- package/templates/sveltekit/src/lib/components/docs/icons/Yarn.svelte +12 -12
- package/templates/sveltekit/src/lib/components/docs/icons/index.ts +78 -78
- package/templates/sveltekit/src/lib/components/docs/index.ts +6 -23
- package/templates/sveltekit/src/lib/components/docs/light-switch/LightSwitch.svelte +75 -75
- package/templates/sveltekit/src/lib/components/docs/light-switch/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/docs/light-switch/light-switch.ts +87 -87
- package/templates/sveltekit/src/lib/components/docs/light-switch/local-storage-store.ts +81 -81
- package/templates/sveltekit/src/lib/components/ui/accordion/Accordion.svelte +11 -11
- package/templates/sveltekit/src/lib/components/ui/accordion/AccordionContent.svelte +19 -19
- package/templates/sveltekit/src/lib/components/ui/accordion/AccordionItem.svelte +13 -13
- package/templates/sveltekit/src/lib/components/ui/accordion/AccordionTrigger.svelte +21 -21
- package/templates/sveltekit/src/lib/components/ui/accordion/index.ts +4 -4
- package/templates/sveltekit/src/lib/components/ui/alert/Alert.svelte +29 -29
- package/templates/sveltekit/src/lib/components/ui/alert/AlertDescription.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/alert/AlertTitle.svelte +15 -15
- package/templates/sveltekit/src/lib/components/ui/alert/index.ts +3 -3
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogAction.svelte +12 -12
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogCancel.svelte +15 -15
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogContent.svelte +22 -22
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogDescription.svelte +14 -14
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogFooter.svelte +13 -13
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogHeader.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogOverlay.svelte +15 -15
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogPortal.svelte +9 -9
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogTitle.svelte +11 -11
- package/templates/sveltekit/src/lib/components/ui/alert-dialog/index.ts +12 -12
- package/templates/sveltekit/src/lib/components/ui/aspect-ratio/AspectRatio.svelte +13 -13
- package/templates/sveltekit/src/lib/components/ui/aspect-ratio/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/avatar/Avatar.svelte +14 -14
- package/templates/sveltekit/src/lib/components/ui/avatar/AvatarFallback.svelte +14 -14
- package/templates/sveltekit/src/lib/components/ui/avatar/AvatarImage.svelte +17 -17
- package/templates/sveltekit/src/lib/components/ui/avatar/index.ts +3 -3
- package/templates/sveltekit/src/lib/components/ui/badge/Badge.svelte +39 -39
- package/templates/sveltekit/src/lib/components/ui/badge/index.ts +21 -21
- package/templates/sveltekit/src/lib/components/ui/button/Button.svelte +47 -47
- package/templates/sveltekit/src/lib/components/ui/button/index.ts +28 -28
- package/templates/sveltekit/src/lib/components/ui/card/Card.svelte +18 -18
- package/templates/sveltekit/src/lib/components/ui/card/CardContent.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/card/CardDescription.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/card/CardFooter.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/card/CardHeader.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/card/CardTitle.svelte +16 -16
- package/templates/sveltekit/src/lib/components/ui/card/index.ts +6 -6
- package/templates/sveltekit/src/lib/components/ui/checkbox/Checkbox.svelte +23 -23
- package/templates/sveltekit/src/lib/components/ui/checkbox/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/collapsible/index.ts +7 -7
- package/templates/sveltekit/src/lib/components/ui/dialog/DialogContent.svelte +29 -29
- package/templates/sveltekit/src/lib/components/ui/dialog/DialogDescription.svelte +14 -14
- package/templates/sveltekit/src/lib/components/ui/dialog/DialogFooter.svelte +13 -13
- package/templates/sveltekit/src/lib/components/ui/dialog/DialogHeader.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/dialog/DialogOverlay.svelte +15 -15
- package/templates/sveltekit/src/lib/components/ui/dialog/DialogPortal.svelte +13 -13
- package/templates/sveltekit/src/lib/components/ui/dialog/DialogTitle.svelte +14 -14
- package/templates/sveltekit/src/lib/components/ui/dialog/index.ts +12 -12
- package/templates/sveltekit/src/lib/components/ui/hover-card/HoverCardContent.svelte +24 -24
- package/templates/sveltekit/src/lib/components/ui/hover-card/index.ts +6 -6
- package/templates/sveltekit/src/lib/components/ui/input/Input.svelte +30 -30
- package/templates/sveltekit/src/lib/components/ui/input/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/label/Label.svelte +16 -16
- package/templates/sveltekit/src/lib/components/ui/label/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/progress/Progress.svelte +22 -22
- package/templates/sveltekit/src/lib/components/ui/progress/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/radio-group/RadioGroup.svelte +13 -13
- package/templates/sveltekit/src/lib/components/ui/radio-group/RadioGroupItem.svelte +23 -23
- package/templates/sveltekit/src/lib/components/ui/radio-group/index.ts +2 -2
- package/templates/sveltekit/src/lib/components/ui/select/SelectContent.svelte +26 -26
- package/templates/sveltekit/src/lib/components/ui/select/SelectItem.svelte +29 -29
- package/templates/sveltekit/src/lib/components/ui/select/SelectLabel.svelte +14 -14
- package/templates/sveltekit/src/lib/components/ui/select/SelectSeparator.svelte +9 -9
- package/templates/sveltekit/src/lib/components/ui/select/SelectTrigger.svelte +21 -21
- package/templates/sveltekit/src/lib/components/ui/select/index.ts +10 -10
- package/templates/sveltekit/src/lib/components/ui/separator/Separator.svelte +22 -22
- package/templates/sveltekit/src/lib/components/ui/separator/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/sheet/SheetContent.svelte +27 -27
- package/templates/sveltekit/src/lib/components/ui/sheet/SheetDescription.svelte +11 -11
- package/templates/sveltekit/src/lib/components/ui/sheet/SheetFooter.svelte +13 -13
- package/templates/sveltekit/src/lib/components/ui/sheet/SheetHeader.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/sheet/SheetOverlay.svelte +15 -15
- package/templates/sveltekit/src/lib/components/ui/sheet/SheetPortal.svelte +28 -28
- package/templates/sveltekit/src/lib/components/ui/sheet/SheetTitle.svelte +14 -14
- package/templates/sveltekit/src/lib/components/ui/sheet/index.ts +102 -102
- package/templates/sveltekit/src/lib/components/ui/skeleton/Skeleton.svelte +8 -8
- package/templates/sveltekit/src/lib/components/ui/skeleton/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/slider/Slider.svelte +22 -22
- package/templates/sveltekit/src/lib/components/ui/slider/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/switch/Switch.svelte +32 -32
- package/templates/sveltekit/src/lib/components/ui/switch/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/table/Table.svelte +12 -12
- package/templates/sveltekit/src/lib/components/ui/table/TableBody.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/table/TableCaption.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/table/TableCell.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/table/TableFooter.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/table/TableHead.svelte +16 -16
- package/templates/sveltekit/src/lib/components/ui/table/TableHeader.svelte +10 -10
- package/templates/sveltekit/src/lib/components/ui/table/TableRow.svelte +16 -16
- package/templates/sveltekit/src/lib/components/ui/table/index.ts +8 -8
- package/templates/sveltekit/src/lib/components/ui/tabs/TabsContent.svelte +20 -20
- package/templates/sveltekit/src/lib/components/ui/tabs/TabsList.svelte +17 -17
- package/templates/sveltekit/src/lib/components/ui/tabs/TabsTrigger.svelte +20 -20
- package/templates/sveltekit/src/lib/components/ui/tabs/index.ts +7 -7
- package/templates/sveltekit/src/lib/components/ui/textarea/Textarea.svelte +30 -30
- package/templates/sveltekit/src/lib/components/ui/textarea/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/toggle/Toggle.svelte +44 -44
- package/templates/sveltekit/src/lib/components/ui/toggle/index.ts +1 -1
- package/templates/sveltekit/src/lib/components/ui/tooltip/TooltipContent.svelte +22 -22
- package/templates/sveltekit/src/lib/components/ui/tooltip/index.ts +6 -6
- package/templates/sveltekit/src/lib/config/components.ts +306 -306
- package/templates/sveltekit/src/lib/config/docs.ts +356 -356
- package/templates/sveltekit/src/lib/config/site.ts +15 -15
- package/templates/sveltekit/src/lib/types/docs.ts +50 -50
- package/templates/sveltekit/src/lib/types/nav.ts +18 -18
- package/templates/sveltekit/src/lib/utils.ts +75 -75
- package/templates/sveltekit/src/routes/+layout.svelte +48 -100
- package/templates/sveltekit/src/routes/+page.ts +6 -6
- package/templates/sveltekit/src/routes/authentication/+page.svelte +57 -73
- package/templates/sveltekit/src/routes/authentication/+page.ts +7 -7
- package/templates/sveltekit/src/routes/authentication/UserAuthForm.svelte +61 -61
- package/templates/sveltekit/src/routes/cards/+page.svelte +26 -44
- package/templates/sveltekit/src/routes/cards/+page.ts +7 -7
- package/templates/sveltekit/src/routes/cards/CookieSettings.svelte +52 -52
- package/templates/sveltekit/src/routes/cards/CreateAccount.svelte +52 -52
- package/templates/sveltekit/src/routes/cards/DemoContainer.svelte +10 -10
- package/templates/sveltekit/src/routes/cards/Notifications.svelte +38 -38
- package/templates/sveltekit/src/routes/cards/PaymentMethod.svelte +110 -110
- package/templates/sveltekit/src/routes/cards/ReportAnIssue.svelte +71 -71
- package/templates/sveltekit/src/routes/cards/ShareDocument.svelte +91 -91
- package/templates/sveltekit/src/routes/dashboard/+page.svelte +5 -5
- package/templates/sveltekit/src/routes/dashboard/+page.ts +7 -7
- package/templates/sveltekit/src/routes/music/albums.ts +61 -61
- package/templates/sveltekit/src/routes/music/playlists.ts +16 -16
- package/templates/sveltekit/src/styles/globals.css +125 -125
- package/templates/sveltekit/src/styles/mdsvex.css +80 -80
- package/templates/sveltekit/src-tauri/Cargo.lock +3835 -3832
- package/templates/sveltekit/src-tauri/Cargo.toml +39 -39
- package/templates/sveltekit/src-tauri/build.rs +3 -3
- package/templates/sveltekit/src-tauri/tauri.conf.json +71 -71
- package/templates/sveltekit/svelte.config.js +22 -22
- package/templates/sveltekit/tailwind.config.js +67 -64
- package/templates/sveltekit/tsconfig.json +13 -13
- package/templates/sveltekit/vite.config.js +5 -3
- package/templates/vite/package.json +83 -83
- package/templates/vite/pnpm-lock.yaml +5176 -5178
- package/templates/vite/src-tauri/Cargo.lock +3835 -3832
- package/templates/vite/src-tauri/Cargo.toml +39 -39
- package/templates/vite/src-tauri/build.rs +3 -3
- 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
|
-
```
|