{"_id":"@chulkovdanila/svelte-uikit","name":"@chulkovdanila/svelte-uikit","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@chulkovdanila/svelte-uikit","version":"0.0.1","type":"module","description":"Beautiful animated button component for Svelte with slide and arc animations. Easy to use, customizable, and similar to shadcn/ui style.","keywords":["svelte","sveltekit","svelte-5","ui","components","ui-kit","button","animated-button","slide-animation","arc-animation","curved-animation","horizontal-animation","shadcn","tailwind","components-library","svelte-components","interactive-components","hover-animation"],"author":"","license":"MIT","repository":{"type":"git","url":"git+https://github.com/ChulkovDanila/svelte-ui-kit.git"},"bugs":{"url":"https://github.com/ChulkovDanila/svelte-ui-kit/issues"},"homepage":"https://github.com/ChulkovDanila/svelte-ui-kit#readme","svelte":"./src/lib/index.ts","exports":{".":{"svelte":"./src/lib/index.ts"}},"scripts":{"dev":"vite dev","build":"vite build","preview":"vite preview","prepare":"svelte-kit sync || echo ''","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test:unit":"vitest","test":"npm run test:unit -- --run","lint":"eslint . && prettier --check .","format":"prettier --write ."},"devDependencies":{"@eslint/compat":"^1.4.0","@eslint/js":"^9.38.0","@sveltejs/adapter-auto":"^7.0.0","@sveltejs/kit":"^2.47.1","@sveltejs/vite-plugin-svelte":"^6.2.1","@types/node":"^22","@vitest/browser-playwright":"^4.0.5","eslint":"^9.38.0","eslint-config-prettier":"^10.1.8","eslint-plugin-svelte":"^3.12.4","globals":"^16.4.0","playwright":"^1.56.1","prettier":"^3.6.2","prettier-plugin-svelte":"^3.4.0","svelte":"^5.41.0","svelte-check":"^4.3.3","typescript":"^5.9.3","typescript-eslint":"^8.46.1","vite":"^7.1.10","vitest":"^4.0.5","vitest-browser-svelte":"^2.0.1"},"peerDependencies":{"svelte":"^5.0.0"},"_id":"@chulkovdanila/svelte-uikit@0.0.1","gitHead":"cfe2933aaa5c86ad77b492ae55c03666c564b688","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-ruqXu9YXm+kvXEMxjw7Rqt3K5tO4kgJDJGLlR+f6Nf918IMFrD/f5aeuRAbDodWq6BZ/vZYXCeHOEyf0/QsUvw==","shasum":"1bca66ba74a1c40a4fcd56ed34fc2067a3989836","tarball":"https://registry.npmjs.org/@chulkovdanila/svelte-uikit/-/svelte-uikit-0.0.1.tgz","fileCount":12,"unpackedSize":19213,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIElTG6iOpv08gy9Q9PFLTEPuA7wnwkKMqi4k6RqSvfVBAiEA3SW/NG2MtBRBKLc5EMsqfMfo/bCInazeKYbRZDG+ey8="}]},"_npmUser":{"name":"chulkovdanila","email":"ChulkovDanila@proton.me"},"directories":{},"maintainers":[{"name":"chulkovdanila","email":"ChulkovDanila@proton.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte-uikit_0.0.1_1763606682212_0.44817540509850806"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-20T02:44:42.155Z","0.0.1":"2025-11-20T02:44:42.380Z","modified":"2025-11-20T02:44:42.633Z"},"maintainers":[{"name":"chulkovdanila","email":"ChulkovDanila@proton.me"}],"description":"Beautiful animated button component for Svelte with slide and arc animations. Easy to use, customizable, and similar to shadcn/ui style.","homepage":"https://github.com/ChulkovDanila/svelte-ui-kit#readme","keywords":["svelte","sveltekit","svelte-5","ui","components","ui-kit","button","animated-button","slide-animation","arc-animation","curved-animation","horizontal-animation","shadcn","tailwind","components-library","svelte-components","interactive-components","hover-animation"],"repository":{"type":"git","url":"git+https://github.com/ChulkovDanila/svelte-ui-kit.git"},"bugs":{"url":"https://github.com/ChulkovDanila/svelte-ui-kit/issues"},"license":"MIT","readme":"# Svelte UI Kit\n\n<div align=\"center\">\n\n**Beautiful animated button component for Svelte with slide and arc animations**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Svelte](https://img.shields.io/badge/Svelte-5.x-orange)](https://svelte.dev)\n\nEasy to use, customizable button component with smooth hover animations - inspired by shadcn/ui style\n\n</div>\n\n---\n\n## ✨ Features\n\n- 🎨 **Two Animation Types**: Slide (horizontal) and Arc (curved) animations\n- ⚡ **Three Speed Options**: Fast, Medium, and Slow animations\n- 🎯 **Multiple Variants**: Default, Outline, Destructive, and Ghost styles\n- 📦 **Easy Installation**: Copy components directly into your project (like shadcn/ui)\n- 🔧 **Fully Customizable**: Modify colors, sizes, and animations to fit your design\n- 💪 **TypeScript Support**: Full type safety out of the box\n- 🎭 **No Dependencies**: Pure Svelte component, no external dependencies\n\n---\n\n## 📦 Installation\n\n> **⚠️ Note:** The package is not yet published to npm. You can install it directly from GitHub or copy components manually.\n\n### Method 1: Install from GitHub (Recommended)\n\nSince the package is not yet on npm, install it directly from GitHub:\n\n```bash\nnpm install @chulkovdanila/svelte-ui-kit\n```\n\nOr from GitHub:\n```bash\nnpm install github:ChulkovDanila/svelte-ui-kit\n```\n\n### Method 2: Copy Component (Like shadcn/ui)\n\nThis method gives you full control over the component code, just like shadcn/ui. You copy the components directly into your project and can customize them as needed.\n\n1. **Copy the Button component** to your project:\n\n```bash\n# Create components directory in your SvelteKit project\nmkdir -p src/lib/components/ui\n\n# Copy Button component files\ncp -r node_modules/svelte-ui-kit/src/lib/components/Button src/lib/components/ui/\n```\n\nOr manually copy the following files:\n- `src/lib/components/Button/Button.svelte`\n- `src/lib/components/Button/index.ts`\n\n2. **Copy utility functions**:\n\n```bash\n# Copy cn utility\ncp node_modules/@chulkovdanila/svelte-ui-kit/src/lib/utils/cn.ts src/lib/utils/\n```\n\n3. **Copy types** (if using TypeScript):\n\n```bash\n# Copy types\ncp node_modules/@chulkovdanila/svelte-ui-kit/src/lib/types/index.ts src/lib/types/\n```\n\n4. **Install the package from GitHub** (for types and utilities):\n\n```bash\nnpm install github:ChulkovDanila/svelte-ui-kit\n# or\nnpm install ChulkovDanila/svelte-ui-kit\n```\n\n**Note:** Once the package is published to npm, you can use `npm install svelte-ui-kit` instead.\n\n### Method 3: Direct Import (After npm publication)\n\nOnce the package is published to npm, you'll be able to install it with:\n\n```bash\nnpm install @chulkovdanila/svelte-ui-kit\n```\n\nThen import components:\n\n```svelte\n<script>\n  import { Button } from '@chulkovdanila/svelte-ui-kit';\n</script>\n\n<Button>Click me</Button>\n```\n\n**Note:** This method will be available after publishing to npm.\n\n---\n\n## 🚀 Quick Start\n\n### Basic Usage\n\n```svelte\n<script>\n  import { Button } from '$lib/components/ui/Button';\n</script>\n\n<Button>Click me</Button>\n```\n\n### With Animation Type\n\n```svelte\n<script>\n  import { Button } from '$lib/components/ui/Button';\n</script>\n\n<!-- Slide Animation (horizontal) -->\n<Button animationType=\"slide\">Get Started</Button>\n\n<!-- Arc Animation (curved) -->\n<Button animationType=\"arc\">Discover</Button>\n```\n\n### With Animation Speed\n\n```svelte\n<script>\n  import { Button } from '$lib/components/ui/Button';\n</script>\n\n<Button animationSpeed=\"fast\">Fast Animation</Button>\n<Button animationSpeed=\"medium\">Medium Animation</Button>\n<Button animationSpeed=\"slow\">Slow Animation</Button>\n```\n\n### Button Variants\n\n```svelte\n<script>\n  import { Button } from '$lib/components/ui/Button';\n</script>\n\n<Button variant=\"default\">Default</Button>\n<Button variant=\"outline\">Outline</Button>\n<Button variant=\"destructive\">Delete</Button>\n<Button variant=\"ghost\">Cancel</Button>\n```\n\n### Rounded Buttons\n\n```svelte\n<script>\n  import { Button } from '$lib/components/ui/Button';\n</script>\n\n<Button rounded>Rounded Button</Button>\n```\n\n### Complete Example\n\n```svelte\n<script>\n  import { Button } from '$lib/components/ui/Button';\n</script>\n\n<Button \n  animationType=\"slide\" \n  animationSpeed=\"medium\" \n  variant=\"outline\" \n  rounded\n>\n  Learn More\n</Button>\n```\n\n---\n\n## 📖 Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `animationType` | `'slide' \\| 'arc'` | `'slide'` | Animation type: slide (horizontal) or arc (curved) |\n| `animationSpeed` | `'fast' \\| 'medium' \\| 'slow'` | `'fast'` | Animation speed: fast (0.4s), medium (0.7s), or slow (1.2s) |\n| `variant` | `'default' \\| 'outline' \\| 'destructive' \\| 'ghost'` | `'default'` | Button style variant |\n| `rounded` | `boolean` | `false` | Fully rounded button corners |\n| `disabled` | `boolean` | `false` | Disable button interactions |\n| `type` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | HTML button type |\n| `class` | `string` | `''` | Additional CSS classes |\n\n---\n\n## 🎨 Animation Types\n\n### Slide Animation\nHorizontal text movement - text slides right on hover, new text slides in from left.\n\n```svelte\n<Button animationType=\"slide\">Click me</Button>\n```\n\n**GitHub Search Keywords**: `slide animation button`, `horizontal animation button`\n\n### Arc Animation  \nCurved movement with rotation - text moves in a semicircle path with rotation effect.\n\n```svelte\n<Button animationType=\"arc\">Discover</Button>\n```\n\n**GitHub Search Keywords**: `arc animation button`, `curved animation button`\n\n---\n\n## 🎯 Examples\n\n### Different Variants\n\n```svelte\n<div class=\"button-group\">\n  <Button variant=\"default\">Primary</Button>\n  <Button variant=\"outline\">Secondary</Button>\n  <Button variant=\"destructive\">Delete</Button>\n  <Button variant=\"ghost\">Cancel</Button>\n</div>\n```\n\n### Different Speeds\n\n```svelte\n<div class=\"button-group\">\n  <Button animationSpeed=\"fast\">Fast</Button>\n  <Button animationSpeed=\"medium\">Medium</Button>\n  <Button animationSpeed=\"slow\">Slow</Button>\n</div>\n```\n\n### Combined Options\n\n```svelte\n<Button \n  animationType=\"arc\" \n  animationSpeed=\"slow\" \n  variant=\"outline\" \n  rounded\n  class=\"my-custom-class\"\n>\n  Custom Button\n</Button>\n```\n\n---\n\n## 🔧 Customization\n\n### Custom Colors\n\nYou can customize button colors by modifying the CSS variables or directly editing the component styles:\n\n```svelte\n<Button class=\"custom-button\">Custom</Button>\n\n<style>\n  :global(.custom-button) {\n    background-color: #your-color;\n    color: #your-text-color;\n  }\n  \n  :global(.custom-button:hover) {\n    background-color: #your-hover-color;\n  }\n</style>\n```\n\n---\n\n## 📚 TypeScript Types\n\n```typescript\nimport type { ButtonVariant, ButtonAnimationType } from 'svelte-ui-kit';\n\n// Use types in your code\nconst variant: ButtonVariant = 'outline';\nconst animationType: ButtonAnimationType = 'slide';\n```\n\n---\n\n## 🛠️ Development\n\nClone the repository:\n\n```bash\ngit clone https://github.com/ChulkovDanila/svelte-ui-kit.git\ncd svelte-ui-kit\nnpm install\n```\n\nRun development server:\n\n```bash\nnpm run dev\n```\n\n---\n\n## 📹 Demo Videos\n\nWatch our animated button components in action! See all variants and animations in high quality video demonstrations.\n\n### Watch the Showcases\n\n- 🎬 **[Slide Animation Showcase](./videoshowcase/Showcase1.mp4)** - Smooth horizontal text movement\n- 🎬 **[Arc Animation Showcase](./videoshowcase/Showcase2.mp4)** - Beautiful curved movement with rotation\n\n*Click the links above to watch the videos in your browser.*\n\n**More details:** See the [SHOWCASE.md](./SHOWCASE.md) document for complete information about what's demonstrated in each video.\n\n---\n\n## 📄 License\n\nMIT License - feel free to use in your projects!\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n---\n\n## 🔍 Finding This Component\n\nSearch on GitHub using these keywords:\n- `slide animation button svelte`\n- `arc animation button svelte`\n- `curved animation button svelte`\n- `horizontal animation button svelte`\n- `animated button svelte`\n- `svelte ui kit`\n\n---\n\nMade with ❤️ for the Svelte community\n","readmeFilename":"README.md","_rev":"1-8c275706a339739e59166827972cf90f"}