{"_id":"@alexandretav/aleui","_rev":"4-3480a43aeb3b7ff3f763309e58c541ec","name":"@alexandretav/aleui","dist-tags":{"latest":"1.1.3"},"versions":{"1.0.0":{"name":"@alexandretav/aleui","version":"1.0.0","keywords":["react","glassmorphism","frutiger-aero","ui","components","tailwind","typescript","nextjs"],"author":{"name":"Alexandre R. Tavares"},"license":"MIT","_id":"@alexandretav/aleui@1.0.0","maintainers":[{"name":"alexandretav","email":"alexandrertavares@outlook.com"}],"homepage":"https://github.com/alexandrertav/alex-ui#readme","bugs":{"url":"https://github.com/alexandrertav/alex-ui/issues"},"dist":{"shasum":"88ef4965d252c01083ffa2790d76e5d6ef13edf0","tarball":"https://registry.npmjs.org/@alexandretav/aleui/-/aleui-1.0.0.tgz","fileCount":7,"integrity":"sha512-TOxnUI+D1qmuDvJsW29UB/M1xW8xKiFwuEm7MpEeJopb2VDQSdldUkR6ecky8AFQkitkcFSgNgI9BKqTzinQ/g==","signatures":[{"sig":"MEQCIFcjS2Vu7cGV7FI3gYkKJO98TKZRwUtwkGtRFORNXQAIAiBvbjnWMcXaTLOpuyJS0qF5YPIqeZyIGna5PMGXQOadsQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44907},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"next dev","lint":"next lint","build":"next build","start":"next start","build:lib":"tsup src/components/index.ts --format cjs,esm --dts --external react --external react-dom --external framer-motion","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"alexandretav","email":"alexandrertavares@outlook.com"},"repository":{"url":"git+https://github.com/alexandrertav/alex-ui.git","type":"git"},"_npmVersion":"11.7.0","description":"Glass UI components for React","directories":{},"_nodeVersion":"22.20.0","dependencies":{"next":"14.1.0","react":"^18.0.0","lucide":"^0.577.0","react-dom":"^18.0.0","lucide-react":"^0.577.0","framer-motion":"^11.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","postcss":"^8.4.33","typescript":"^5.9.3","@types/node":"^20.11.0","tailwindcss":"^3.4.1","@types/react":"^18.3.28","autoprefixer":"^10.4.17","@types/react-dom":"^18.2.18"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.0.0","framer-motion":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/aleui_1.0.0_1773530422177_0.3702749714532336","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@alexandretav/aleui","version":"1.1.0","keywords":["react","glassmorphism","frutiger-aero","ui","components","tailwind","typescript","nextjs"],"author":{"name":"Alexandre R. Tavares"},"license":"MIT","_id":"@alexandretav/aleui@1.1.0","maintainers":[{"name":"alexandretav","email":"alexandrertavares@outlook.com"}],"homepage":"https://github.com/alexandrertav/alex-ui#readme","bugs":{"url":"https://github.com/alexandrertav/alex-ui/issues"},"bin":{"aleui":"cli.js"},"dist":{"shasum":"91e1ae4b872b797604a4fabe3600c6aace09d4fc","tarball":"https://registry.npmjs.org/@alexandretav/aleui/-/aleui-1.1.0.tgz","fileCount":26,"integrity":"sha512-UfuT3GaDu+/qiM+hMkgfdA5opGCrjl0Z0drJGxWwY3PWZqLDfT4twNConKZ3SNaN6Ea4oslrWG7ZPTEM59qzSQ==","signatures":[{"sig":"MEUCIBKMoEgCH462ittaOhLz7d4gbYHSF3LXkr4jbU8MDb9NAiEAntCKqOOLPh+gonZLfH6Ekqq1+Wp2RT7KzlL6r7uLR+Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32425},"main":"src/components/index.ts","types":"src/components/index.ts","scripts":{"dev":"next dev","lint":"next lint","build":"next build","start":"next start"},"_npmUser":{"name":"alexandretav","email":"alexandrertavares@outlook.com"},"repository":{"url":"git+https://github.com/alexandrertav/alex-ui.git","type":"git"},"_npmVersion":"11.7.0","description":"Glass UI components for React","directories":{},"_nodeVersion":"22.20.0","dependencies":{"next":"14.1.0","react":"^18.0.0","lucide":"^0.577.0","react-dom":"^18.0.0","lucide-react":"^0.577.0","framer-motion":"^11.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","postcss":"^8.4.33","typescript":"^5.9.3","@types/node":"^20.11.0","tailwindcss":"^3.4.1","@types/react":"^18.3.28","autoprefixer":"^10.4.17","@types/react-dom":"^18.2.18"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.0.0","framer-motion":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/aleui_1.1.0_1773531492640_0.7525307328735835","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@alexandretav/aleui","version":"1.1.2","keywords":["react","glassmorphism","frutiger-aero","ui","components","tailwind","typescript","nextjs"],"author":{"name":"Alexandre R. Tavares"},"license":"MIT","_id":"@alexandretav/aleui@1.1.2","maintainers":[{"name":"alexandretav","email":"alexandrertavares@outlook.com"}],"homepage":"https://github.com/alexandrertav/alex-ui#readme","bugs":{"url":"https://github.com/alexandrertav/alex-ui/issues"},"bin":{"aleui":"cli.js"},"dist":{"shasum":"1ef924c0180216c0ca97393464aafafc92f3baf2","tarball":"https://registry.npmjs.org/@alexandretav/aleui/-/aleui-1.1.2.tgz","fileCount":26,"integrity":"sha512-CbSmHOIcuT8hwMc6UiytF2n4w/fjzpx8KhUAmG+gxv2nwlwXiuP6ePJ0kkvNUdtcorfiCN6qSpUN5lE1FwosEw==","signatures":[{"sig":"MEQCIFJ14REIRHX9e8ZF2oj/lHjUrM3sRPssISKynz4W3CRWAiAKpaea/n8A5i+Fl80a7WGVSSke7C6xP/9gkglWICnVww==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35173},"main":"src/components/index.ts","types":"src/components/index.ts","scripts":{"dev":"next dev","lint":"next lint","build":"next build","start":"next start"},"_npmUser":{"name":"alexandretav","email":"alexandrertavares@outlook.com"},"repository":{"url":"git+https://github.com/alexandrertav/alex-ui.git","type":"git"},"_npmVersion":"11.7.0","description":"Glass UI components for React","directories":{},"_nodeVersion":"22.20.0","dependencies":{"next":"14.1.0","react":"^18.0.0","lucide":"^0.577.0","react-dom":"^18.0.0","lucide-react":"^0.577.0","framer-motion":"^11.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.1","postcss":"^8.4.33","typescript":"^5.9.3","@types/node":"^20.11.0","tailwindcss":"^3.4.1","@types/react":"^18.3.28","autoprefixer":"^10.4.17","@types/react-dom":"^18.2.18"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.0.0","framer-motion":"^11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/aleui_1.1.2_1773601376511_0.5286604077026273","host":"s3://npm-registry-packages-npm-production"}},"1.1.3":{"name":"@alexandretav/aleui","version":"1.1.3","description":"Glass UI components for React","main":"src/components/index.ts","types":"src/components/index.ts","bin":{"aleui":"cli.js"},"keywords":["react","glassmorphism","frutiger-aero","ui","components","tailwind","typescript","nextjs"],"author":{"name":"Alexandre R. Tavares"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alexandrertav/alex-ui.git"},"bugs":{"url":"https://github.com/alexandrertav/alex-ui/issues"},"homepage":"https://github.com/alexandrertav/alex-ui#readme","scripts":{"dev":"next dev","build":"next build","start":"next start","lint":"next lint"},"peerDependencies":{"framer-motion":"^11.0.0","react":"^18.0.0","react-dom":"^18.0.0","tailwindcss":"^3.0.0"},"dependencies":{"framer-motion":"^11.0.0","lucide":"^0.577.0","lucide-react":"^0.577.0","next":"14.1.0","react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@types/node":"^20.11.0","@types/react":"^18.3.28","@types/react-dom":"^18.2.18","autoprefixer":"^10.4.17","postcss":"^8.4.33","tailwindcss":"^3.4.1","tsup":"^8.5.1","typescript":"^5.9.3"},"gitHead":"65650449850ed7a23bb570cfeb38ab7ded631232","_id":"@alexandretav/aleui@1.1.3","_nodeVersion":"22.20.0","_npmVersion":"11.7.0","dist":{"integrity":"sha512-ZoCu39Z4MEISt6+1qKrqDix0JG7wIQljWBrd6B7Gx5hUV2WFkbx4KBpR5ql0xE4fdzOpGPhRP6JCoFvoq8/nag==","shasum":"c737c32d14ef1b3074f94e3acd30941206d45d7a","tarball":"https://registry.npmjs.org/@alexandretav/aleui/-/aleui-1.1.3.tgz","fileCount":26,"unpackedSize":35380,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEAyLoTr3CxSopQbmNJvE1snM6qo1uhxWyyC+KWWWCC+AiEArP2efPvaiYyVWBQYyDs4O/lWTDS/k3cZoLUDmVtO00k="}]},"_npmUser":{"name":"alexandretav","email":"alexandrertavares@outlook.com"},"directories":{},"maintainers":[{"name":"alexandretav","email":"alexandrertavares@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/aleui_1.1.3_1773606752375_0.42111838256348033"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-14T23:20:22.087Z","modified":"2026-03-15T20:32:32.659Z","1.0.0":"2026-03-14T23:20:22.325Z","1.1.0":"2026-03-14T23:38:12.788Z","1.1.2":"2026-03-15T19:02:56.658Z","1.1.3":"2026-03-15T20:32:32.538Z"},"bugs":{"url":"https://github.com/alexandrertav/alex-ui/issues"},"author":{"name":"Alexandre R. Tavares"},"license":"MIT","homepage":"https://github.com/alexandrertav/alex-ui#readme","keywords":["react","glassmorphism","frutiger-aero","ui","components","tailwind","typescript","nextjs"],"repository":{"type":"git","url":"git+https://github.com/alexandrertav/alex-ui.git"},"description":"Glass UI components for React","maintainers":[{"name":"alexandretav","email":"alexandrertavares@outlook.com"}],"readme":"# ✨ AleUI - Glassmorphism Components\n\nBeautiful, modern React components with glassmorphism and Frutiger Aero design. Copy components directly to your project - no bloat, full control.\n\n![Version](https://img.shields.io/badge/version-1.1.0-blue)\n![License](https://img.shields.io/badge/license-MIT-green)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)\n![React](https://img.shields.io/badge/React-18-blue)\n\n## 🎨 Features\n\n- ✨ **Copy, Don't Install**: Components are copied to your project, not bundled\n- 🌊 **Glassmorphism & Frutiger Aero**: Modern glass effects + nostalgic 2000s aesthetic\n- 📘 **TypeScript**: Full type safety and IntelliSense\n- 🎨 **Tailwind CSS**: Utility-first styling\n- 🎭 **4 Variants**: Light, Medium, Dark, and Colored for each component\n- 📱 **Responsive**: Mobile-first design\n- 🔧 **Full Control**: Edit components directly in your codebase\n- ⚡ **Framer Motion**: Smooth animations\n\n## 📦 Components\n\n### Glassmorphism Components\n- **Button** - Interactive buttons with glass effects\n- **Card** - Container components with blur\n- **Input** - Form fields with labels\n- **Modal** - Dialog with backdrop blur\n- **Accordion** - Collapsible panels\n\n### Frutiger Aero Components\n- **AeroButton** - Aquatic gradient buttons\n- **AeroCard** - Cards with aero styling\n- **AeroInput** - Inputs with aero theme\n- **AeroBubble** - Decorative bubble elements\n\n## 🚀 Quick Start\n\n### 1. Setup Tailwind CSS\n\nAdd to your `tailwind.config.js`:\n\n```js\nmodule.exports = {\n  content: [\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {\n      boxShadow: {\n        'aero': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',\n        'aero-lg': '0 12px 48px 0 rgba(31, 38, 135, 0.5)',\n      },\n    },\n  },\n}\n```\n\n### 2. Add Components\n\nAdd all components (recommended):\n\n```bash\nnpx @alexandretav/aleui\n```\n\nOr add a specific component:\n\n```bash\nnpx @alexandretav/aleui add button\n```\n\nList available components:\n\n```bash\nnpx @alexandretav/aleui list\n```\n\n### 3. Use Components\n\nComponents are copied to `src/components/ui/` in your project:\n\n```tsx\nimport { Button } from '@/components/ui/button';\nimport { Card } from '@/components/ui/card';\n\nfunction App() {\n  return (\n    <Card variant=\"medium\" padding=\"lg\">\n      <h2>Hello World</h2>\n      <Button variant=\"light\" size=\"md\">\n        Click Me\n      </Button>\n    </Card>\n  );\n}\n```\n\n## 💻 Usage Examples\n\n### Button\n\n```tsx\nimport { Button } from '@/components/ui/button';\n\n<Button variant=\"light\" size=\"md\" onClick={() => alert('Clicked!')}>\n  Click Me\n</Button>\n\n<Button variant=\"colored\" size=\"lg\" fullWidth>\n  Full Width Button\n</Button>\n```\n\n### Card\n\n```tsx\nimport { Card } from '@/components/ui/card';\n\n<Card variant=\"medium\" padding=\"lg\" enableInteractions>\n  <h2>Card Title</h2>\n  <p>Card content with hover effects</p>\n</Card>\n```\n\n### Input\n\n```tsx\nimport { Input } from '@/components/ui/input';\n\n<Input\n  variant=\"light\"\n  label=\"Email\"\n  type=\"email\"\n  placeholder=\"your@email.com\"\n  fullWidth\n/>\n```\n\n### Modal\n\n```tsx\nimport { Modal } from '@/components/ui/modal';\nimport { useState } from 'react';\n\nconst [isOpen, setIsOpen] = useState(false);\n\n<Modal\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  title=\"Modal Title\"\n  variant=\"medium\"\n>\n  <p>Modal content</p>\n</Modal>\n```\n\n### Accordion\n\n```tsx\nimport { Accordion } from '@/components/ui/accordion';\n\n<Accordion\n  variant=\"light\"\n  items={[\n    {\n      id: '1',\n      title: 'Question 1',\n      content: 'Answer 1',\n    },\n    {\n      id: '2',\n      title: 'Question 2',\n      content: 'Answer 2',\n    },\n  ]}\n/>\n```\n\n## 🎨 Customization\n\nSince components are copied to your project, you have **full control** to customize them:\n\n### Edit Components Directly\n\n```tsx\n// src/components/ui/button/button.tsx\nexport const Button = ({ variant = 'light', ... }) => {\n  // Modify styles, add features, change behavior\n  return <button className={...}>...</button>\n}\n```\n\n### Theme Configuration\n\nThe theme is in `src/theme/glass.ts`:\n\n```typescript\nexport const glassVariants = {\n  light: {\n    background: 'bg-white/5',\n    backdropBlur: 'backdrop-blur-[2px]',\n    border: 'border border-white/15',\n    shadow: 'shadow-lg',\n    hover: 'hover:bg-white/10',\n    focus: 'focus:ring-2 focus:ring-white/10',\n  },\n  // ... customize as needed\n}\n```\n\n### Using Theme Utilities\n\n```tsx\nimport { getGlassClasses, getAeroClasses } from '@/theme/glass';\n\nconst MyComponent = () => {\n  const glassStyle = getGlassClasses('medium');\n  const aeroStyle = getAeroClasses('colored');\n  \n  return <div className={glassStyle}>Custom component</div>;\n};\n```\n\n## 📁 Project Structure (After Installation)\n\n```\nyour-project/\n├── src/\n│   ├── components/\n│   │   └── ui/              # Components copied here\n│   │       ├── button/\n│   │       │   ├── button.tsx\n│   │       │   └── index.ts\n│   │       ├── card/\n│   │       ├── input/\n│   │       ├── modal/\n│   │       ├── accordion/\n│   │       └── aero-bubble/\n│   └── theme/\n│       └── glass.ts         # Theme config copied here\n```\n\n## 🎯 CLI Commands\n\n```bash\n# Add all components (default)\nnpx @alexandretav/aleui\n\n# Add a specific component\nnpx @alexandretav/aleui add button\nnpx @alexandretav/aleui add card\nnpx @alexandretav/aleui add modal\n\n# List available components\nnpx @alexandretav/aleui list\n\n# Show help\nnpx @alexandretav/aleui help\n```\n\n## 🌐 Demo\n\nView live demo: [https://github.com/alexandrertav/alex-ui](https://github.com/alexandrertav/alex-ui)\n\nRun demo locally:\n\n```bash\ngit clone https://github.com/alexandrertav/alex-ui.git\ncd alex-ui\nnpm install\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000)\n\n## 🛠️ Tech Stack\n\n- **React 18** - UI library\n- **TypeScript** - Type safety\n- **Tailwind CSS** - Styling\n- **Framer Motion** - Animations\n\n## ❓ FAQ\n\n**Q: Why copy components instead of installing from npm?**  \nA: Full control. Edit, customize, and own the code. No black boxes.\n\n**Q: Do I need to install the package?**  \nA: No! Just use `npx @alexandretav/aleui add <component>` to copy components.\n\n**Q: Can I modify the components?**  \nA: Yes! They're in your codebase. Modify freely.\n\n**Q: What about updates?**  \nA: Re-run the CLI command to get the latest version of a component.\n\n**Q: Does it work with Next.js/Remix/Vite?**  \nA: Yes! Works with any React framework that supports Tailwind CSS.\n\n## 📝 License\n\nMIT License - feel free to use in personal and commercial projects.\n\n## 🤝 Contributing\n\nContributions are welcome! \n\n- Report bugs: [GitHub Issues](https://github.com/alexandrertav/alex-ui/issues)\n- Submit PRs: [GitHub Pull Requests](https://github.com/alexandrertav/alex-ui/pulls)\n\n## 🔗 Links\n\n- **NPM Package**: [@alexandretav/aleui](https://www.npmjs.com/package/@alexandretav/aleui)\n- **GitHub**: [alexandrertav/alex-ui](https://github.com/alexandrertav/alex-ui)\n- **Author**: Alexandre R. Tavares\n\n---\n\n","readmeFilename":"README.md"}