{"_id":"@asrith_1198/bellaui","name":"@asrith_1198/bellaui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@asrith_1198/bellaui","private":false,"version":"1.0.0","description":"Premium WebGL and React 19 component library powered by Three.js, GSAP, and Tailwind CSS v4","type":"module","main":"./dist-lib/bella-ui.umd.cjs","module":"./dist-lib/bella-ui.js","types":"./dist-lib/types/index.d.ts","exports":{".":{"import":"./dist-lib/bella-ui.js","require":"./dist-lib/bella-ui.umd.cjs","types":"./dist-lib/types/index.d.ts"}},"scripts":{"dev":"vite","build":"tsc -b && vite build","build:lib":"vite build -c vite.config.lib.ts && tsc -p tsconfig.app.json --rootDir . --declaration --emitDeclarationOnly --declarationDir dist-lib/types --noEmit false","lint":"eslint .","preview":"vite preview"},"dependencies":{"@gsap/react":"^2.1.2","@react-three/drei":"^10.7.7","@react-three/fiber":"^9.6.1","@tailwindcss/vite":"^4.3.1","animejs":"^4.4.1","gsap":"^3.15.0","lucide-react":"^1.21.0","react":"^19.2.6","react-dom":"^19.2.6","tailwindcss":"^4.3.1","three":"^0.184.0"},"devDependencies":{"@eslint/js":"^10.0.1","@types/node":"^24.12.3","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","eslint":"^10.3.0","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.2","globals":"^17.6.0","typescript":"~6.0.2","typescript-eslint":"^8.59.2","vite":"^8.0.12"},"peerDependencies":{"react":"^19.2.6","react-dom":"^19.2.6","three":"^0.184.0","@react-three/fiber":"^9.6.1","@react-three/drei":"^10.7.7","gsap":"^3.15.0","@gsap/react":"^2.1.2"},"gitHead":"f3b23b2e50a9aef9fe17de53bee779c0a66469cc","_id":"@asrith_1198/bellaui@1.0.0","_nodeVersion":"22.19.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-gfO0LlJyW9yE9X8b/7K3DXbb3lo9T98c5s2Kjyf64iy9N2UuAdXskQOXEEpFhd23wfxUt5NDw5GxOOwE6a7IGA==","shasum":"57bd97173eb4ce98f479f0b5141492e746ed3a25","tarball":"https://registry.npmjs.org/@asrith_1198/bellaui/-/bellaui-1.0.0.tgz","fileCount":56,"unpackedSize":998908,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEe6UlaWLd2l6upXz2rQ8b0HZZzFXTKbrw0S+puAlAYSAiEA9lSPBeDnwMTOUCUOxo2EtqaHf2AB5RAiBFAIjFy9rPM="}]},"_npmUser":{"name":"asrith_1198","email":"asrithbehla2007@gmail.com"},"directories":{},"maintainers":[{"name":"asrith_1198","email":"asrithbehla2007@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bellaui_1.0.0_1784003992832_0.11728451810926899"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-14T04:39:52.564Z","1.0.0":"2026-07-14T04:39:52.979Z","modified":"2026-07-14T04:39:53.202Z"},"maintainers":[{"name":"asrith_1198","email":"asrithbehla2007@gmail.com"}],"description":"Premium WebGL and React 19 component library powered by Three.js, GSAP, and Tailwind CSS v4","readme":"# BellaUI \n\n> A premium, interactive React component library focused on WebGL, Three.js, spatial design, and kinetic typography.\n\n[![Deployment](https://img.shields.io/badge/Deployed-bellaui.sikshanext.in-00E676?style=for-the-badge)](https://bellaui.sikshanext.in/)\n[![Framework](https://img.shields.io/badge/React-19-61DAFB?style=for-the-badge&logo=react)](https://react.dev)\n[![Styling](https://img.shields.io/badge/Tailwind-v4-38B2AC?style=for-the-badge&logo=tailwindcss)](https://tailwindcss.com)\n\nBellaUI is a modern, copy-pasteable component library designed to bring high-end spatial computing and dynamic physics into web interfaces. Unlike traditional UI libraries that focus solely on forms and layout, BellaUI provides drop-in **Three.js** and **GSAP** driven experiences—from Volumetric Text to Kinetic Black Holes and Liquid Physics Buttons.\n\n## 🌟 Features\n- **Zero Config**: All components are fully self-contained. Copy the code, install dependencies, and run.\n- **Framework Agnostic Foundations**: Works seamlessly in React and Next.js (with `\"use client\"` toggles).\n- **Deep Customization**: Every component exposes specific, meaningful props (e.g., `pullStrength`, `refractionStrength`, `gooSpeed`).\n- **Performance First**: Built with `@react-three/fiber` and standard GSAP optimizations.\n\n## 🏗️ Architecture\nBellaUI's documentation and components are structured for maximum DX (Developer Experience). \n\n### 1. The Playground (`ComponentPlayground.tsx`)\nThe core of the documentation site is driven by a bespoke playground system.\n- Components are loaded dynamically from `src/components/showcase/`.\n- `componentDetails.ts` acts as the single source of truth, mapping component IDs to their metadata (props, description, dependencies).\n- Real-time source code fetching is powered by Vite's `?raw` import syntax, ensuring the code you copy is the *exact* code running in the preview.\n\n### 2. Component Design Patterns\nEvery component in `src/components/showcase/` follows a strict pattern:\n- No global side effects.\n- Three.js components wrap their scenes in `<Canvas>` internally so they can be dropped into standard DOM layouts.\n- Tailwind CSS is used exclusively for styling—no external `.css` files are required per component.\n\n## 🚀 Installation & Usage\n\nBellaUI components are designed to be copied directly into your project. \nYou do not install BellaUI as a monolithic NPM package. Instead, you add only what you need.\n\n### Method 1: Using the CLI (Recommended)\nYou can instantly scaffold a component into your project using standard package runners:\n\n```bash\n# NPX\nnpx bellaui@latest add liquid-magnetic-button\n\n# Yarn\nyarn dlx bellaui@latest add liquid-magnetic-button\n\n# PNPM\npnpm dlx bellaui@latest add liquid-magnetic-button\n\n# Bun\nbunx bellaui@latest add liquid-magnetic-button\n```\n\n### Method 2: Manual Installation\n1. Install the required peer dependencies for the component (e.g., `npm install three @react-three/fiber @react-three/drei`).\n2. Copy the source code provided on [bellaui.sikshanext.in](https://bellaui.sikshanext.in).\n3. Paste it into your `components/` directory and import it!\n\n## 📦 Tech Stack\n- **Core**: React 19, TypeScript\n- **Styling**: Tailwind CSS v4\n- **Animation**: GSAP 3\n- **3D Engine**: Three.js, `@react-three/fiber`, `@react-three/drei`\n- **Build Tool**: Vite\n\n## 📄 License\nMIT License. Created by Sikshanext.\n","readmeFilename":"README.md","_rev":"1-8ddafa6b860bb605ac05514920799b7a"}