{"_id":"@bagavathisingh/bugzx-motion-ui","name":"@bagavathisingh/bugzx-motion-ui","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@bagavathisingh/bugzx-motion-ui","version":"0.0.1","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"}},"repository":{"type":"git","url":"git+https://github.com/bugzx/bugzx-motion.git","directory":"packages/ui"},"keywords":["react","ui","components","tailwind","radix-ui","motion"],"license":"MIT","scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint src/**/*.ts*"},"dependencies":{"@bagavathisingh/bugzx-motion-core":"workspace:*","@radix-ui/react-accordion":"^1.2.12","@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-dropdown-menu":"^2.1.16","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-switch":"^1.2.6","@radix-ui/react-tabs":"^1.1.13","class-variance-authority":"^0.7.0","clsx":"^2.1.0","tailwind-merge":"^2.2.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.0.0 || ^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","tailwindcss":"^3.4.0","tsup":"^8.0.0","typescript":"^5.0.0"},"gitHead":"9ebb5414e35eacab24bb86a40d4c4f8eaf1b3c40","_id":"@bagavathisingh/bugzx-motion-ui@0.0.1","description":"A premium collection of beautifully designed, fully accessible UI components built with motion primitives.","bugs":{"url":"https://github.com/bugzx/bugzx-motion/issues"},"homepage":"https://github.com/bugzx/bugzx-motion#readme","_nodeVersion":"22.13.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-ZfwCCTfmIyKuSHQGg/N6vnXUvjtlwRdBfG261Jb8r3bYNzlILKut5688zJiIoKR5LFf2qw4Zjd42AC8SuXHU2g==","shasum":"c3ee9cd2834c04500ab4758f0795b658ff6aeada","tarball":"https://registry.npmjs.org/@bagavathisingh/bugzx-motion-ui/-/bugzx-motion-ui-0.0.1.tgz","fileCount":8,"unpackedSize":803843,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDoBAG1q8hV6RhXM4eQRfoB8J+fe9EeNIPAjrFM+uOqLAIhAMuSKZoivrdPwo5ahZVThltjpKvYsubGi7j3AA4M9SPU"}]},"_npmUser":{"name":"bagavathisingh","email":"bagavathisingh5@gmail.com"},"directories":{},"maintainers":[{"name":"bagavathisingh","email":"bagavathisingh5@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bugzx-motion-ui_0.0.1_1768299940178_0.6088586291656155"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-13T10:25:39.996Z","0.0.1":"2026-01-13T10:25:40.381Z","modified":"2026-01-13T10:25:40.734Z"},"maintainers":[{"name":"bagavathisingh","email":"bagavathisingh5@gmail.com"}],"description":"A premium collection of beautifully designed, fully accessible UI components built with motion primitives.","homepage":"https://github.com/bugzx/bugzx-motion#readme","keywords":["react","ui","components","tailwind","radix-ui","motion"],"repository":{"type":"git","url":"git+https://github.com/bugzx/bugzx-motion.git","directory":"packages/ui"},"bugs":{"url":"https://github.com/bugzx/bugzx-motion/issues"},"license":"MIT","readme":"# BugzxMotion UI Components\r\n\r\nA premium collection of beautifully designed, fully accessible UI components built with motion primitives.\r\n\r\n## ✨ Features\r\n\r\n- 🎨 **Premium Design** - Modern, beautiful components inspired by the best design systems\r\n- ⚡ **Performance First** - Optimized animations with zero runtime overhead\r\n- 🎭 **Motion Primitives** - Built-in animations for every component\r\n- 🌗 **Theme Support** - Light/Dark mode + Cyber/Neon variants\r\n- ♿ **Accessible** - Built on Radix UI primitives\r\n- 📦 **Tree-shakeable** - Import only what you need\r\n- 🔷 **TypeScript** - Fully typed with intelligent autocomplete\r\n- 🎯 **Customizable** - Every component accepts className and custom props\r\n\r\n## 🚀 Components\r\n\r\n### Core Components\r\n- **Button** - Multiple variants (default, outline, ghost, neon) with motion effects\r\n- **Card** - Flexible card component with hover effects\r\n- **Input** - Form input with focus animations and neon mode\r\n- **Switch** - Animated toggle switch\r\n- **Checkbox** - Checkbox with scale animation\r\n- **Tabs** - Tabbed interface with content transitions\r\n- **Accordion** - Collapsible content panels\r\n- **Dialog** - Modal dialogs with backdrop blur\r\n- **Dropdown Menu** - Context menus and dropdowns\r\n\r\n### Premium Components\r\n- **Spotlight** - Mouse-tracking gradient spotlight effect\r\n- **GradientBorderCard** - Cards with animated gradient borders\r\n- **ShimmerButton** - Buttons with shimmer animation effect\r\n- **AnimatedGridPattern** - Animated background grid pattern\r\n- **BentoGrid** - Modern grid layout system\r\n- **BentoCard** - Feature cards for bento grids\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @bugzx-motion/next\r\n# or\r\npnpm add @bugzx-motion/next\r\n```\r\n\r\n## 🎯 Usage\r\n\r\n### Basic Example\r\n\r\n```tsx\r\nimport { Button, Card, CardHeader, CardTitle, CardContent } from '@bugzx-motion/next';\r\n\r\nexport default function MyComponent() {\r\n  return (\r\n    <Card>\r\n      <CardHeader>\r\n        <CardTitle>Welcome</CardTitle>\r\n      </CardHeader>\r\n      <CardContent>\r\n        <Button motion=\"scale\" variant=\"default\">\r\n          Click me\r\n        </Button>\r\n      </CardContent>\r\n    </Card>\r\n  );\r\n}\r\n```\r\n\r\n### Premium Components\r\n\r\n```tsx\r\nimport { \r\n  Spotlight, \r\n  GradientBorderCard, \r\n  ShimmerButton,\r\n  BentoGrid,\r\n  BentoCard \r\n} from '@bugzx-motion/next';\r\n\r\nexport default function PremiumDemo() {\r\n  return (\r\n    <div>\r\n      {/* Spotlight Effect */}\r\n      <Spotlight \r\n        className=\"p-8\"\r\n        spotlightColor=\"rgba(120,119,198,0.3)\"\r\n      >\r\n        <h2>Hover over me!</h2>\r\n        <p>Watch the spotlight follow your cursor</p>\r\n      </Spotlight>\r\n\r\n      {/* Gradient Border Card */}\r\n      <GradientBorderCard\r\n        gradientFrom=\"#667eea\"\r\n        gradientTo=\"#764ba2\"\r\n      >\r\n        <h3>Beautiful Gradient Borders</h3>\r\n      </GradientBorderCard>\r\n\r\n      {/* Shimmer Button */}\r\n      <ShimmerButton\r\n        background=\"linear-gradient(135deg, #667eea 0%, #764ba2 100%)\"\r\n      >\r\n        Get Started\r\n      </ShimmerButton>\r\n\r\n      {/* Bento Grid */}\r\n      <BentoGrid>\r\n        <BentoCard\r\n          name=\"Feature 1\"\r\n          description=\"Amazing feature description\"\r\n          Icon={MyIcon}\r\n          cta=\"Learn more\"\r\n        />\r\n      </BentoGrid>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Cyber/Neon Mode\r\n\r\nAll components support a neon/cyber aesthetic:\r\n\r\n```tsx\r\nimport { Button, Input, Card, TabsList } from '@bugzx-motion/next';\r\n\r\nexport default function CyberMode() {\r\n  return (\r\n    <div className=\"bg-black\">\r\n      <Button variant=\"neon\">Execute</Button>\r\n      <Input neon placeholder=\"Enter command...\" />\r\n      <Card neon>Cyber content</Card>\r\n      <TabsList neon>Cyber tabs</TabsList>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## 🎨 Customization\r\n\r\nEvery component is built with customization in mind:\r\n\r\n```tsx\r\n<Button \r\n  variant=\"default\"\r\n  motion=\"scale\"\r\n  className=\"custom-class\"\r\n  whileHover={{ scale: 1.1 }}\r\n>\r\n  Custom Button\r\n</Button>\r\n```\r\n\r\n## 🔧 Configuration\r\n\r\nAdd to your `next.config.ts`:\r\n\r\n```ts\r\nconst nextConfig = {\r\n  transpilePackages: [\r\n    \"@bugzx-motion/next\",\r\n    \"@bugzx-motion/core\",\r\n    \"@bugzx-motion/ui\"\r\n  ],\r\n};\r\n```\r\n\r\nAdd to your `globals.css`:\r\n\r\n```css\r\n@import \"tailwindcss\";\r\n@source \"../../../packages/ui\";\r\n```\r\n\r\n## 📚 Documentation\r\n\r\nVisit our [documentation](https://bugzx-motion.dev) for:\r\n- Component API reference\r\n- Interactive examples\r\n- Design guidelines\r\n- Migration guides\r\n\r\n## 🤝 Contributing\r\n\r\nWe welcome contributions! See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.\r\n\r\n## 📄 License\r\n\r\nMIT © BugzxMotion\r\n\r\n## 🌟 Inspiration\r\n\r\nBuilt with inspiration from:\r\n- [shadcn/ui](https://ui.shadcn.com)\r\n- [Framer Motion](https://www.framer.com/motion/)\r\n- [Radix UI](https://www.radix-ui.com/)\r\n- [Aceternity UI](https://ui.aceternity.com/)\r\n","readmeFilename":"README.md","_rev":"1-f4cc93d33976094f8715cdab26909b58"}