The frosted glass effect is applied to this container
\nThe blur is clipped to the same radius
\n\n Card content with elegant frosted glass effect.\n
\n\n```\n\n### Button with liquid glass effect\n\n```jsx\n\n This is an example of a modal with glassmorphism effect\n
\n \n \nCustom liquid effect
\n\n```\n\n## Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/creativoma/liquid-glass.git\ncd liquid-glass\n\n# Install dependencies\npnpm install\n\n# Development mode\npnpm run dev\n\n# Linting and formatting\npnpm run lint\npnpm run format\n\n# Build library\npnpm run build:lib\n\n# Build demo\npnpm run build:demo\n\n# Preview\npnpm run preview\n\n# Publish (requires permissions)\nnpm publish\n```\n\n## Project Structure\n\n```\nliquid-glass/\n├── src/\n│ ├── components/\n│ │ ├── LiquidGlass.tsx\n│ │ └── types.ts\n│ ├── hooks/\n│ │ └── useBrowserDetection.ts\n│ ├── demo/ # Demo/landing application\n│ ├── main.tsx # Demo entry point\n│ ├── index.ts # Library entry point\n│ └── index.css\n├── dist/ # Compiled library\n├── dist-demo/ # Compiled demo site\n├── public/ # Demo assets\n├── README.md\n├── package.json\n├── tsconfig.json\n├── vite.config.ts # Demo build config\n├── vite.config.lib.ts # Library build config\n└── tailwind.config.js\n```\n\n## Requirements\n\n- React >= 18.0.0\n- React DOM >= 18.0.0\n- TailwindCSS (component uses Tailwind classes)\n\nCI verifies compatibility with both React 18 and React 19 on every push (see [`.github/workflows/ci.yml`](./.github/workflows/ci.yml)).\n\n## Technologies\n\n- **React** - Component library\n- **TypeScript** - Static typing\n- **Vite** - Build tool and bundler\n- **Tailwind CSS** - CSS framework for glassmorphism effect\n- **SVG Filters** - Advanced visual effects with feTurbulence and feDisplacementMap\n\n## Package Formats\n\nThis package includes multiple formats for maximum compatibility:\n\n- **ESM** (`dist/index.js`) - For modern applications\n- **CJS** (`dist/index.cjs`) - For `require()` consumers (Next.js pages router, Jest, plain Node)\n- **TypeScript** (`dist/index.d.ts` / `dist/index.d.cts`) - Type definitions for both entry points\n\nAll bundles are prefixed with the `\"use client\"` directive for React Server Components compatibility.\n\n## Contributing\n\nContributions are welcome! Please:\n\n1. Fork the project\n2. Create a branch for your feature (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nMIT © [Mariano Álvarez](https://github.com/creativoma)\n\n## Changelog\n\nSee [CHANGELOG.md](./CHANGELOG.md) for a detailed list of changes.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/creativoma/liquid-glass/issues"}}