├── .eslintignore ├── .eslintrc.cjs ├── .gitattributes ├── .github └── workflows │ └── azure-static-web-apps-nice-sky-059595e10.yml ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── assets └── gifs │ ├── settings.gif │ └── showcase.gif ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── app.d.ts ├── app.html ├── lib │ ├── components │ │ ├── custom │ │ │ ├── options │ │ │ │ ├── Options.svelte │ │ │ │ └── index.ts │ │ │ ├── settings │ │ │ │ ├── Settings.svelte │ │ │ │ └── index.ts │ │ │ └── svelte-code │ │ │ │ ├── SvelteCode.svelte │ │ │ │ └── index.ts │ │ ├── examples │ │ │ ├── AccordionExample.svelte │ │ │ ├── AlertDialogExample.svelte │ │ │ ├── AlertExample.svelte │ │ │ ├── AspectRatioExample.svelte │ │ │ ├── AvatarExample.svelte │ │ │ ├── BadgeExample.svelte │ │ │ ├── BreadcrumbExample.svelte │ │ │ ├── ButtonExample.svelte │ │ │ ├── CardExample.svelte │ │ │ ├── CheckboxExample.svelte │ │ │ ├── CollapsibleExample.svelte │ │ │ ├── DialogExample.svelte │ │ │ ├── HoverCardExample.svelte │ │ │ ├── InputExample.svelte │ │ │ ├── InputOtpExample.svelte │ │ │ ├── LabelExample.svelte │ │ │ ├── LinkExample.svelte │ │ │ ├── PaginationExample.svelte │ │ │ ├── PopoverExample.svelte │ │ │ ├── ProgressExample.svelte │ │ │ ├── RadioGroupExample.svelte │ │ │ ├── ScrollAreaExample.svelte │ │ │ ├── SelectExample.svelte │ │ │ ├── SeparatorExample.svelte │ │ │ ├── SheetExample.svelte │ │ │ ├── SkeletonExample.svelte │ │ │ ├── SliderExample.svelte │ │ │ ├── SwitchExample.svelte │ │ │ ├── TableExample.svelte │ │ │ ├── TabsExample.svelte │ │ │ ├── TextareaExample.svelte │ │ │ ├── ToastExample.svelte │ │ │ ├── ToggleExample.svelte │ │ │ ├── ToggleGroupExample.svelte │ │ │ ├── TooltipExample.svelte │ │ │ └── index.ts │ │ └── ui │ │ │ ├── accordion │ │ │ ├── Accordion.svelte │ │ │ ├── AccordionContent.svelte │ │ │ ├── AccordionItem.svelte │ │ │ ├── AccordionTrigger.svelte │ │ │ └── index.ts │ │ │ ├── alert-dialog │ │ │ ├── AlertDialog.svelte │ │ │ ├── AlertDialogAction.svelte │ │ │ ├── AlertDialogCancel.svelte │ │ │ ├── AlertDialogContent.svelte │ │ │ ├── AlertDialogDescription.svelte │ │ │ ├── AlertDialogFooter.svelte │ │ │ ├── AlertDialogHeader.svelte │ │ │ ├── AlertDialogTitle.svelte │ │ │ ├── AlertDialogTrigger.svelte │ │ │ └── index.ts │ │ │ ├── alert │ │ │ ├── Alert.svelte │ │ │ ├── AlertDescription.svelte │ │ │ ├── AlertTitle.svelte │ │ │ ├── alertVariants.ts │ │ │ └── index.ts │ │ │ ├── aspect-ratio │ │ │ ├── AspectRatio.svelte │ │ │ └── index.ts │ │ │ ├── avatar │ │ │ ├── Avatar.svelte │ │ │ ├── AvatarFallback.svelte │ │ │ ├── AvatarImage.svelte │ │ │ └── index.ts │ │ │ ├── badge │ │ │ ├── Badge.svelte │ │ │ ├── badgeVariants.ts │ │ │ └── index.ts │ │ │ ├── breadcrumb │ │ │ ├── Breadcrumb.svelte │ │ │ ├── BreadcrumbEllipsis.svelte │ │ │ ├── BreadcrumbItem.svelte │ │ │ ├── BreadcrumbLink.svelte │ │ │ ├── BreadcrumbList.svelte │ │ │ ├── BreadcrumbPage.svelte │ │ │ ├── BreadcrumbSeparator.svelte │ │ │ └── index.ts │ │ │ ├── button │ │ │ ├── Button.svelte │ │ │ ├── buttonVariants.ts │ │ │ └── index.ts │ │ │ ├── card │ │ │ ├── Card.svelte │ │ │ ├── CardContent.svelte │ │ │ ├── CardDescription.svelte │ │ │ ├── CardFooter.svelte │ │ │ ├── CardHeader.svelte │ │ │ ├── CardTitle.svelte │ │ │ └── index.ts │ │ │ ├── checkbox │ │ │ ├── Checkbox.svelte │ │ │ └── index.ts │ │ │ ├── collapsible │ │ │ ├── Collapsible.svelte │ │ │ ├── CollapsibleContent.svelte │ │ │ ├── CollapsibleTrigger.svelte │ │ │ └── index.ts │ │ │ ├── dialog │ │ │ ├── Dialog.svelte │ │ │ ├── DialogContent.svelte │ │ │ ├── DialogDescription.svelte │ │ │ ├── DialogFooter.svelte │ │ │ ├── DialogHeader.svelte │ │ │ ├── DialogTitle.svelte │ │ │ ├── DialogTrigger.svelte │ │ │ └── index.ts │ │ │ ├── hover-card │ │ │ ├── HoverCard.svelte │ │ │ ├── HoverCardContent.svelte │ │ │ ├── HoverCardTrigger.svelte │ │ │ └── index.ts │ │ │ ├── input-otp │ │ │ ├── InputOTP.svelte │ │ │ ├── InputOTPGroup.svelte │ │ │ ├── InputOTPSeparator.svelte │ │ │ ├── InputOTPSlot.svelte │ │ │ └── index.ts │ │ │ ├── input │ │ │ ├── Input.svelte │ │ │ └── index.ts │ │ │ ├── label │ │ │ ├── Label.svelte │ │ │ └── index.ts │ │ │ ├── link │ │ │ ├── Link.svelte │ │ │ └── index.ts │ │ │ ├── pagination │ │ │ ├── Pagination.svelte │ │ │ ├── PaginationContent.svelte │ │ │ ├── PaginationEllipsis.svelte │ │ │ ├── PaginationItem.svelte │ │ │ ├── PaginationLink.svelte │ │ │ ├── PaginationNext.svelte │ │ │ ├── PaginationPrevious.svelte │ │ │ └── index.ts │ │ │ ├── popover │ │ │ ├── Popover.svelte │ │ │ ├── PopoverContent.svelte │ │ │ ├── PopoverTrigger.svelte │ │ │ └── index.ts │ │ │ ├── progress │ │ │ ├── Progress.svelte │ │ │ └── index.ts │ │ │ ├── radio-group │ │ │ ├── RadioGroup.svelte │ │ │ ├── RadioGroupItem.svelte │ │ │ └── index.ts │ │ │ ├── scroll-area │ │ │ ├── ScrollArea.svelte │ │ │ └── index.ts │ │ │ ├── select │ │ │ ├── Select.svelte │ │ │ ├── SelectContent.svelte │ │ │ ├── SelectGroup.svelte │ │ │ ├── SelectItem.svelte │ │ │ ├── SelectLabel.svelte │ │ │ ├── SelectScrollDownButton.svelte │ │ │ ├── SelectScrollUpButton.svelte │ │ │ ├── SelectTrigger.svelte │ │ │ ├── SelectValue.svelte │ │ │ ├── index.ts │ │ │ └── select.ts │ │ │ ├── separator │ │ │ ├── Separator.svelte │ │ │ └── index.ts │ │ │ ├── sheet │ │ │ ├── Sheet.svelte │ │ │ ├── SheetClose.svelte │ │ │ ├── SheetContent.svelte │ │ │ ├── SheetDescription.svelte │ │ │ ├── SheetFooter.svelte │ │ │ ├── SheetHeader.svelte │ │ │ ├── SheetTitle.svelte │ │ │ ├── SheetTrigger.svelte │ │ │ ├── index.ts │ │ │ └── sheetVariants.ts │ │ │ ├── skeleton │ │ │ ├── Skeleton.svelte │ │ │ └── index.ts │ │ │ ├── slider │ │ │ ├── Slider.svelte │ │ │ └── index.ts │ │ │ ├── switch │ │ │ ├── Switch.svelte │ │ │ └── index.ts │ │ │ ├── table │ │ │ ├── Table.svelte │ │ │ ├── TableBody.svelte │ │ │ ├── TableCaption.svelte │ │ │ ├── TableCell.svelte │ │ │ ├── TableFooter.svelte │ │ │ ├── TableHead.svelte │ │ │ ├── TableHeader.svelte │ │ │ ├── TableRow.svelte │ │ │ └── index.ts │ │ │ ├── tabs │ │ │ ├── Tabs.svelte │ │ │ ├── TabsContent.svelte │ │ │ ├── TabsList.svelte │ │ │ ├── TabsTrigger.svelte │ │ │ └── index.ts │ │ │ ├── textarea │ │ │ ├── Textarea.svelte │ │ │ └── index.ts │ │ │ ├── toast │ │ │ ├── Toast.svelte │ │ │ ├── ToastAction.svelte │ │ │ ├── ToastClose.svelte │ │ │ ├── ToastDescription.svelte │ │ │ ├── ToastProvider.svelte │ │ │ ├── ToastTitle.svelte │ │ │ ├── index.ts │ │ │ ├── toast.ts │ │ │ └── toastVariants.ts │ │ │ ├── toggle-group │ │ │ ├── ToggleGroup.svelte │ │ │ ├── ToggleGroupItem.svelte │ │ │ ├── index.ts │ │ │ └── toggleVariants.ts │ │ │ ├── toggle │ │ │ ├── Toggle.svelte │ │ │ ├── index.ts │ │ │ └── toggleVariants.ts │ │ │ └── tooltip │ │ │ ├── Tooltip.svelte │ │ │ ├── TooltipContent.svelte │ │ │ ├── TooltipProvider.svelte │ │ │ ├── TooltipTrigger.svelte │ │ │ └── index.ts │ └── helpers │ │ ├── actions.ts │ │ ├── state.ts │ │ ├── types.ts │ │ └── utils.ts ├── routes │ ├── +layout.svelte │ └── +page.svelte └── styles │ └── globals.css ├── static └── favicon.png ├── svelte.config.js ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'prettier'], 4 | parser: '@typescript-eslint/parser', 5 | plugins: ['@typescript-eslint'], 6 | parserOptions: { 7 | sourceType: 'module', 8 | ecmaVersion: 2020, 9 | extraFileExtensions: ['.svelte'] 10 | }, 11 | env: { 12 | browser: true, 13 | es2017: true, 14 | node: true 15 | }, 16 | overrides: [ 17 | { 18 | files: ['*.svelte'], 19 | parser: 'svelte-eslint-parser', 20 | parserOptions: { 21 | parser: '@typescript-eslint/parser' 22 | } 23 | } 24 | ] 25 | }; 26 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.github/workflows/azure-static-web-apps-nice-sky-059595e10.yml: -------------------------------------------------------------------------------- 1 | name: Azure Static Web Apps CI/CD 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | types: [opened, synchronize, reopened, closed] 9 | branches: 10 | - main 11 | 12 | jobs: 13 | build_and_deploy_job: 14 | if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') 15 | runs-on: ubuntu-latest 16 | name: Build and Deploy Job 17 | steps: 18 | - uses: actions/checkout@v3 19 | with: 20 | submodules: true 21 | lfs: false 22 | - name: Build And Deploy 23 | id: builddeploy 24 | uses: Azure/static-web-apps-deploy@v1 25 | with: 26 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_SKY_059595E10 }} 27 | repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) 28 | action: "upload" 29 | ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### 30 | # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 31 | app_location: "./" # App source code path 32 | api_location: "build/server" # Api source code path - optional 33 | output_location: "build/static" # Built app content directory - optional 34 | ###### End of Repository/Build Configurations ###### 35 | 36 | close_pull_request_job: 37 | if: github.event_name == 'pull_request' && github.event.action == 'closed' 38 | runs-on: ubuntu-latest 39 | name: Close Pull Request Job 40 | steps: 41 | - name: Close Pull Request 42 | id: closepullrequest 43 | uses: Azure/static-web-apps-deploy@v1 44 | with: 45 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NICE_SKY_059595E10 }} 46 | action: "close" 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build folder 2 | dist/ 3 | build/ 4 | 5 | # logs 6 | logs/ 7 | .cache 8 | .DS_Store 9 | npm-debug.log 10 | yarn-debug.log 11 | yarn-error.log 12 | 13 | # process data 14 | .pid 15 | pids 16 | .pid-lock 17 | 18 | # Coverage & Test 19 | coverage 20 | .nyc_output 21 | 22 | # Dependency folder 23 | node_modules 24 | bower_components 25 | jspm_packages 26 | 27 | # Environment files 28 | .dot 29 | 30 | # Editor and other files 31 | .idea 32 | typing 33 | internal 34 | .vscode 35 | *.tgz 36 | .eslintcache 37 | .svelte-kit -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | resolution-mode=highest 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 200, 6 | "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], 7 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Wail Abou 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Port of shadcn/ui without Radix Depedency or any other UI library 2 | 3 | This repository contains a port of the `shadcn/ui` library, a collection of UI components for web applications. The port is designed to have zero external UI dependencies and utilizes Tailwind CSS for styling. I added some minor additions and improvements like an affirmative variant and a Link component. 4 | 5 | # Demo 6 | 7 | A live demo can be found [here](https://nice-sky-059595e10.4.azurestaticapps.net) 8 | 9 | ![Global Showcase GIF](https://github.com/WailAbou/shadcn-svelte-nodep/raw/main/assets/gifs/showcase.gif) 10 | 11 | ![Settings Showcase GIF](https://github.com/WailAbou/shadcn-svelte-nodep/raw/main/assets/gifs/settings.gif) 12 | 13 | ## Components 14 | 15 | Here is a list of components that have been ported from `shadcn/ui`. Each component is marked with a checkmark if it has been successfully implemented: 16 | 17 | | Component | Status | 18 | | --------------- | ------ | 19 | | Accordion | ✅ | 20 | | Alert | ✅ | 21 | | Alert Dialog | ✅ | 22 | | Aspect Ratio | ✅ | 23 | | Avatar | ✅ | 24 | | Badge | ✅ | 25 | | Breadcrumb | ✅ | 26 | | Button | ✅ | 27 | | Calendar | ❌ | 28 | | Card | ✅ | 29 | | Carousel | ❌ | 30 | | Chart | ❌ | 31 | | Checkbox | ✅ | 32 | | Collapsible | ✅ | 33 | | Combobox | ❌ | 34 | | Command | ❌ | 35 | | Context Menu | ❌ | 36 | | Data Table | ❌ | 37 | | Date Picker | ❌ | 38 | | Dialog | ✅ | 39 | | Drawer | ❌ | 40 | | Dropdown Menu | ❌ | 41 | | Form | ❌ | 42 | | Hover Card | ✅ | 43 | | Input | ✅ | 44 | | Input OTP | ✅ | 45 | | Label | ✅ | 46 | | Link | ✅ | 47 | | Menubar | ❌ | 48 | | Navigation Menu | ❌ | 49 | | Pagination | ✅ | 50 | | Popover | ✅ | 51 | | Progress | ✅ | 52 | | Radio Group | ✅ | 53 | | Resizable | ❌ | 54 | | Scroll Area | ✅ | 55 | | Select | ✅ | 56 | | Separator | ✅ | 57 | | Sheet | ✅ | 58 | | Sidebar | ❌ | 59 | | Skeleton | ✅ | 60 | | Slider | ✅ | 61 | | Sonner | ❌ | 62 | | Switch | ✅ | 63 | | Table | ✅ | 64 | | Tabs | ✅ | 65 | | Textarea | ✅ | 66 | | Toast | ✅ | 67 | | Toggle | ✅ | 68 | | Toggle Group | ✅ | 69 | | Tooltip | ✅ | 70 | 71 | ## Usage 72 | 73 | Make sure to refer to the original `shadcn/ui` documentation for detailed usage instructions. 74 | 75 | ## Support My Work 76 | 77 | If you find this project useful and want to support continued development, consider [buying me a coffee](https://www.buymeacoffee.com/wailabou). 78 | 79 | ☕ Programming is not just my profession — it's also my passion. I love learning, exploring new challenges, and sharing open source work with the community. 80 | 81 | ## License 82 | 83 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 84 | 85 | ## Special Thanks 86 | 87 | I want to extend my gratitude to the following individuals and projects for their valuable contributions to this port: 88 | 89 | - **Duder-onomy** for their excellent work on [svelte-focus-trap](https://github.com/Duder-onomy/svelte-focus-trap/blob/master/src/utils.js). 90 | 91 | - **SkeletonLabs Team** for their genius implementation of [FocusTrap](https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/actions/FocusTrap/focusTrap.ts) in the Skeleton framework. 92 | 93 | - **shadcn** for their fantastic [shadcn/ui](https://github.com/shadcn-ui/ui) library, which inspired this project. 94 | 95 | - **huntabyte** for their port of shadcn/ui with Radix Dependency, which served as an excellent reference. Check out their work [here](https://github.com/huntabyte/shadcn-svelte). 96 | 97 | I am grateful for their contributions, which helped make this project possible. 98 | -------------------------------------------------------------------------------- /assets/gifs/settings.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WailAbou/shadcn-svelte-nodep/3c06686a10278edd3d60b7fbd1a96c1ff93a1443/assets/gifs/settings.gif -------------------------------------------------------------------------------- /assets/gifs/showcase.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WailAbou/shadcn-svelte-nodep/3c06686a10278edd3d60b7fbd1a96c1ff93a1443/assets/gifs/showcase.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shadcn-svelte-nodep", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 11 | "lint": "prettier . --check . && eslint .", 12 | "format": "prettier --write \"**/*.{js,jsx,json,md,html,svelte}\"" 13 | }, 14 | "devDependencies": { 15 | "@sveltejs/kit": "2.20.7", 16 | "@typescript-eslint/eslint-plugin": "8.22.0", 17 | "@typescript-eslint/parser": "8.22.0", 18 | "autoprefixer": "10.4.20", 19 | "eslint": "9.19.0", 20 | "eslint-config-prettier": "10.0.1", 21 | "eslint-plugin-svelte": "2.46.1", 22 | "postcss": "8.5.1", 23 | "prettier": "3.4.2", 24 | "prettier-plugin-svelte": "3.3.3", 25 | "prettier-plugin-tailwindcss": "0.6.11", 26 | "svelte": "5.19.5", 27 | "svelte-adapter-azure-swa": "^0.20.1", 28 | "svelte-check": "4.1.4", 29 | "svelte-highlight": "7.8.2", 30 | "tailwindcss": "3.4.17", 31 | "tslib": "2.8.1", 32 | "typescript": "5.7.3", 33 | "vite": "5.4.18" 34 | }, 35 | "type": "module", 36 | "dependencies": { 37 | "class-variance-authority": "0.7.1", 38 | "clsx": "2.1.1", 39 | "lucide-svelte": "0.474.0", 40 | "tailwind-merge": "2.6.0", 41 | "tailwindcss-animate": "1.0.7" 42 | } 43 | } -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {}; 13 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/lib/components/custom/options/Options.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | (isOpen = open)}> 11 | 12 | 22 | 23 | 24 |
25 | 26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/lib/components/custom/options/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Options } from './Options.svelte'; 2 | -------------------------------------------------------------------------------- /src/lib/components/custom/settings/Settings.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | {@html codeCss} 19 | 20 | 21 |
22 |

Settings

23 | 24 | 25 |
26 | { 29 | darkMode = checked; 30 | window.document.body.classList.toggle('dark'); 31 | }} 32 | /> 33 | 34 |
35 | 36 |
37 | (codeMode = checked ? CodeMode.Source : CodeMode.None)} /> 38 | 39 |
40 | 41 | {#if codeMode != CodeMode.None} 42 |
43 | (codeMode = checked ? CodeMode.Html : CodeMode.Source)} /> 44 | 45 |
46 | {/if} 47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /src/lib/components/custom/settings/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Settings } from './Settings.svelte'; 2 | -------------------------------------------------------------------------------- /src/lib/components/custom/svelte-code/SvelteCode.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | {#if codeMode == CodeMode.Source} 17 | 18 | {:else if codeMode == CodeMode.Html} 19 | 20 | {:else} 21 | 22 | {/if} 23 | -------------------------------------------------------------------------------- /src/lib/components/custom/svelte-code/index.ts: -------------------------------------------------------------------------------- 1 | export { default as SvelteCode } from './SvelteCode.svelte'; 2 | export enum CodeMode { 3 | None, 4 | Source, 5 | Html 6 | } 7 | -------------------------------------------------------------------------------- /src/lib/components/examples/AccordionExample.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 |

Value: {value}

17 | 18 | 19 | 20 | 21 | 22 | {#key uid} 23 | (value = newValue)} {type} {collapsible} {disabled} class="w-full"> 24 | 25 | Is it accessible? 26 | Yes. It adheres to the WAI-ARIA design pattern. 27 | 28 | 29 | Is it styled? 30 | Yes. It comes with default styles that matches the other components' aesthetic. 31 | 32 | 33 | Is it animated? 34 | Yes. It's animated by default, but you can disable it if you prefer. 35 | 36 | 37 | {/key} 38 | -------------------------------------------------------------------------------- /src/lib/components/examples/AlertDialogExample.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | Are you absolutely sure? 23 | This action cannot be undone. This will permanently delete your account and remove your data from our servers. 24 | 25 | 26 | Cancel 27 | Continue 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/lib/components/examples/AlertExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | Heads up! 9 | You can add components to your app using the cli. 10 | 11 | 12 | 13 | 14 | Error 15 | Your session has expired. Please log in again. 16 | 17 | 18 | 19 | 20 | Success 21 | You have been successfully logged in. 22 | 23 | -------------------------------------------------------------------------------- /src/lib/components/examples/AspectRatioExample.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Gray by Drew Beamer 20 | 21 | -------------------------------------------------------------------------------- /src/lib/components/examples/AvatarExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | CN 8 | 9 | -------------------------------------------------------------------------------- /src/lib/components/examples/BadgeExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | Primary 6 | Secondary 7 | Destructive 8 | Affirmative 9 | Outline 10 | -------------------------------------------------------------------------------- /src/lib/components/examples/BreadcrumbExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | Home 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Components 18 | 19 | 20 | 21 | Breadcrumb 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | Home 30 | 31 | 32 | 33 | 34 | 35 | Components 36 | 37 | 38 | 39 | 40 | 41 | Breadcrumb 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/lib/components/examples/ButtonExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 18 |
19 | 20 | 21 | 22 | 23 |
24 |
25 | -------------------------------------------------------------------------------- /src/lib/components/examples/CardExample.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | 24 | 25 | Notifications 26 | You have 3 unread messages. 27 | 28 | 29 |
30 | 31 |
32 |

Push Notifications

33 |

Send notifications to device.

34 |
35 | 36 |
37 |
38 | {#each notifications as notification} 39 |
40 | 41 |
42 |

43 | {notification.title} 44 |

45 |

46 | {notification.description} 47 |

48 |
49 |
50 | {/each} 51 |
52 | 53 | 54 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/lib/components/examples/CheckboxExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
8 | 9 | 10 |
11 | 12 |
13 | 14 |
15 | 16 |

You agree to our Terms of Service and Privacy Policy.

17 |
18 |
19 | 20 |
21 | 22 | 23 |
24 |
25 | -------------------------------------------------------------------------------- /src/lib/components/examples/CollapsibleExample.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | 16 | {#key uid} 17 | 18 |
19 |

@peduarte starred 3 repositories

20 | 21 | 25 | 26 |
27 |
@radix-ui/primitives
28 | 29 |
@radix-ui/colors
30 |
@stitches/react
31 | 32 | 33 | {/key} 34 | -------------------------------------------------------------------------------- /src/lib/components/examples/DialogExample.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | (open = isOpen)}> 11 | 12 | 13 | 14 | 15 | 16 | Edit profile 17 | Make changes to your profile here. Click save when you're done. 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/lib/components/examples/HoverCardExample.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {#each sides as side} 13 | 14 | 15 | Hover card {side} 16 | 17 | 18 |
19 | 20 | 21 | VC 22 | 23 |
24 |

@nextjs

25 |

The React Framework – created and maintained by @vercel.

26 |
27 | {' '} 28 | Joined December 2021 29 |
30 |
31 |
32 | 33 | 34 | {/each} 35 |
36 | -------------------------------------------------------------------------------- /src/lib/components/examples/InputExample.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 |
26 |
27 | -------------------------------------------------------------------------------- /src/lib/components/examples/InputOtpExample.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 |

16 | {#if value === ''} 17 | Enter your one-time password. 18 | {:else} 19 | You entered: {value} 20 | {/if} 21 |

22 | 23 | 24 | 25 | 26 | {#key pattern} 27 | (value = newValue)}> 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | {/key} 41 | -------------------------------------------------------------------------------- /src/lib/components/examples/LabelExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 | 9 |
10 | -------------------------------------------------------------------------------- /src/lib/components/examples/LinkExample.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |
9 |

Click this for a redirect

10 |
11 |
12 |

Click this to open a new tab

13 |
14 |
15 |

Click this button link

16 |
17 |
18 |

Click this badge link

19 |
20 |
21 | -------------------------------------------------------------------------------- /src/lib/components/examples/PaginationExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 1 12 | 13 | 14 | 2 15 | 16 | 17 | 3 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/lib/components/examples/PopoverExample.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {#each sides as side} 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

Dimensions

21 |

Set the dimensions for the layer.

22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 |
42 | 43 | 44 | {/each} 45 |
46 | -------------------------------------------------------------------------------- /src/lib/components/examples/ProgressExample.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/lib/components/examples/RadioGroupExample.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 |

Value: {value}

15 | 16 | 17 | 18 | {#key uid} 19 | (value = newValue)}> 20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 | 33 | {/key} 34 | -------------------------------------------------------------------------------- /src/lib/components/examples/ScrollAreaExample.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
24 |

Tags

25 | {#each tagsFull as tag} 26 |
{tag}
27 | 28 | {/each} 29 |
30 | 31 | 32 | 33 |
34 |

Tags

35 | {#each tagsSubset as tag} 36 |
{tag}
37 | 38 | {/each} 39 |
40 | 41 |
42 | -------------------------------------------------------------------------------- /src/lib/components/examples/SelectExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 21 | 22 | 71 |
72 | -------------------------------------------------------------------------------- /src/lib/components/examples/SeparatorExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |

Radix Primitives

7 |

An open-source UI component library.

8 |
9 | 10 | 11 | 12 |
13 |
Blog
14 | 15 |
Docs
16 | 17 |
Source
18 |
19 | -------------------------------------------------------------------------------- /src/lib/components/examples/SheetExample.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | {#each sides as side} 13 | 14 | 15 | 16 | 17 | 18 | 19 | Edit profile 20 | Make changes to your profile here. Click save when you're done. 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {/each} 40 |
41 | -------------------------------------------------------------------------------- /src/lib/components/examples/SkeletonExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 |
8 | 9 | 10 |
11 |
12 | -------------------------------------------------------------------------------- /src/lib/components/examples/SliderExample.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 |

Value: {value}

24 | 25 | 26 | 27 | 28 | 29 | {#key uid} 30 | (value = newValue)} defaultValue={(range[0] + range[1]) / 2} min={range[0]} max={range[1]} {step} {disabled} /> 31 | {/key} 32 | -------------------------------------------------------------------------------- /src/lib/components/examples/SwitchExample.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 | -------------------------------------------------------------------------------- /src/lib/components/examples/TableExample.svelte: -------------------------------------------------------------------------------- 1 | 49 | 50 | 51 | A list of your recent invoices. 52 | 53 | 54 | Invoice 55 | Status 56 | Method 57 | Amount 58 | 59 | 60 | 61 | {#each invoices as invoice (invoice.invoice)} 62 | 63 | {invoice.invoice} 64 | {invoice.paymentStatus} 65 | {invoice.paymentMethod} 66 | {invoice.totalAmount} 67 | 68 | {/each} 69 | 70 | 71 | 72 | Total 73 | $2,500.00 74 | 75 | 76 |
77 | -------------------------------------------------------------------------------- /src/lib/components/examples/TabsExample.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | Account 12 | Password 13 | 14 | 15 | 16 | 17 | Account 18 | Make changes to your account here. Click save when you're done. 19 | 20 | 21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | Password 39 | Change your password here. After saving, you'll be logged out. 40 | 41 | 42 |
43 | 44 | 45 |
46 |
47 | 48 | 49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/lib/components/examples/TextareaExample.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
8 |