[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73785":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":44,"readmeContent":45,"aiSummary":46,"trendingCount":16,"starSnapshotCount":16,"syncStatus":47,"lastSyncTime":48,"discoverSource":49},73785,"pattern-craft","megh-bari\u002Fpattern-craft","megh-bari","Professional-grade background patterns and gradients for your websites and apps. Easily copy and paste into your next project. Crafted with modern CSS and Tailwind for seamless integration.","https:\u002F\u002Fpatterncraft.fun",null,"TypeScript",2990,225,9,12,0,7,38,91,21,29.06,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,5,38,39,40,41,42,43],"background","background-pattern","background-snippets","backgrounds","beautiful-backgrounds","css","css-backgrounds","design-tools","dev-tools","gradients","modern-backgrounds","patterns","tailwind","tailwind-backgrounds","tailwindcss","ui-components","ui-library","2026-06-12 02:03:18","\u003C!-- # Pattern Craft -->\n\n> _**For developers, by a developer. Design that slaps⚡**_\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\".\u002Fpublic\u002Fimages\u002Freadme-banner.png\" alt=\"Pattern Craft Banner\" \u002F>\n  \u003Cbr>\u003Cbr>\n  \u003Cp align=\"left\">\n    \u003Cstrong>Effortlessly enhance your websites and apps with 100+ modern CSS background patterns and gradient snippets.\u003C\u002Fstrong>\n    Instantly copy and paste beautifully crafted, production-ready designs built with modern CSS and Tailwind CSS for seamless integration.\u003Cbr>\n    \u003C\u002Fbr>\n    \u003Cem>Ideal for developers and designers working with React, Next.js, Vue, Angular, or any modern frontend framework. Made for devs who appreciate great design.\u003C\u002Fem>\n    \u003C\u002Fbr>\n  \u003C\u002Fp>\n  \u003Cbr>\n  \u003Cp align=\"center\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fmegh-bari\u002Fpattern-craft?style=social\" alt=\"GitHub stars\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fmegh-bari\u002Fpattern-craft?style=social\" alt=\"GitHub forks\" \u002F>\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fmegh-bari\u002Fpattern-craft?style=social\" alt=\"License\" \u002F>\n\u003Ca href=\"https:\u002F\u002Fvercel.com\u002Foss\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSponsored%20by-Vercel-000000?style=social&logo=vercel&logoColor=black\" alt=\"Sponsored by Vercel\" \u002F>\n\u003C\u002Fa>\n    \n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\n---\n\n> **This project is proudly sponsored by [Vercel](https:\u002F\u002Fvercel.com\u002Foss). Thank you for supporting open source!**\n\n  \u003C!-- \u003Cp align=\"center\">\n\u003Ca href=\"https:\u002F\u002Fvercel.com\u002Foss\">\n\u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F31049\u002F1618983297-powered-by-vercel.svg\" alt=\"Powered by Vercel\" height=\"40\">\n\u003C\u002Fa>\n\u003C\u002Fp> -->\n\n\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fvercel.com\u002Foss\">\n  \u003Cimg alt=\"Vercel OSS Program\" src=\"https:\u002F\u002Fvercel.com\u002Foss\u002Fprogram-badge.svg\" \u002F>\n\u003C\u002Fa>\n\n## Visit: **[Pattern Craft](https:\u002F\u002Fpatterncraft.fun)**\n\n![UI Image](.\u002Fpublic\u002Fimages\u002Freadme-img-one.png)\n![UI Image](.\u002Fpublic\u002Fimages\u002Freadme-img-two.png)\n![UI Image](.\u002Fpublic\u002Fimages\u002Freadme-img-four.png)\n![UI Image](.\u002Fpublic\u002Fimages\u002Freadme-img-three.png)\n\n> _**Note: This project does not provide plain HTML or vanilla CSS snippets. All code is optimized for JSX (React\u002FNext.js) and Tailwind CSS.**_  \n> [Learn more in this announcement.](https:\u002F\u002Fgithub.com\u002Fmegh-bari\u002Fpattern-craft\u002Fdiscussions\u002F24)\n\n## Pattern Craft in the Wild!!!\n\n\u003Cp align=\"left\"> \nCurious where Pattern Craft is getting featured, shared, talk about or appreciated? \n\u003C\u002Fbr>\nCheck out this growing list of shoutouts, showcases, and love from the community:  \n\u003C\u002Fbr>\n\n⚡[**Where Pattern Craft is Making Noise??**](https:\u002F\u002Fpatterncraft.notion.site\u002FWhere-Pattern-Craft-is-Making-Noise-23bf940b4137803ea79bf3606acdb317?pvs=74)\n\n\u003C\u002Fp>\n\n## Features\n\n- **Ready-to-use CSS code** - Copy and paste directly into your projects\n- **Live preview** - See patterns in action before implementation\n- **Modern design** - Crafted with contemporary CSS techniques and Tailwind CSS\n- **Responsive patterns** - Optimized for all screen sizes\n- **Zero dependencies** - Pure CSS implementations\n- **Pattern categories** - Organized collection for easy browsing\n- **Return back to scroll** - Smooth navigation experience\n- **Add to favorites** - Save your preferred patterns\n- **Customizable snippets** - Easily modify patterns to fit your needs\n\n## Tech Stack\n\n- **Next.js 14** - React framework with App Router\n- **TypeScript** - Type-safe development\n- **Tailwind CSS** - Utility-first CSS framework\n- **Vercel** - Deployment and hosting\n\n## Sponsored by \u003Ca href=\"https:\u002F\u002Fvercel.com\u002Foss\">Vercel⚡\u003C\u002Fa>\n\n**This project is proudly powered by \u003Cb>Vercel\u003C\u002Fb>. The platform behind PatternCraft’s blazing-fast deployment and seamless scalability.**\u003Cbr>\n\n\u003Ci>Big thanks to Vercel for supporting open source and keeping this project running smoothly!\u003C\u002Fi>\n\u003Cbr>\u003Cbr>\n\u003Ca href=\"https:\u002F\u002Fvercel.com\u002Foss\">\n\u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F31049\u002F1618983297-powered-by-vercel.svg\" alt=\"Powered by Vercel\" height=\"40\">\n\u003C\u002Fa>\n\n\u003C\u002Fp>\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- npm, yarn, pnpm, or bun\n\n### Installation\n\n1. Clone the repository:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fmegh-bari\u002Fpattern-craft.git\ncd pattern-craft\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n# or\nyarn install\n# or\npnpm install\n```\n\n3. Run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\n4. Open [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) in your browser\n\n### Build for Production\n\n```bash\nnpm run build\nnpm start\n```\n\n## How to Use This\n\n1. Visit the live site: **[https:\u002F\u002Fpatterncraft.fun](https:\u002F\u002Fpattern-craft.vercel.app\u002F)**\n2. Browse through the collection of background patterns and gradients.\n3. Click on any pattern to open its preview modal.\n4. Copy the CSS\u002FTailwind-compatible code snippet.\n5. Paste it into your project wherever needed — it's responsive, clean, and ready to go!\n\nThese snippets work great for:\n\n- Hero sections\n- Landing pages\n- Cards and sections\n- Background art\n\n## Demo\n\n[Watch the demo video](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fd414c57b-128b-43f2-8534-352bc93eb801)\n\n## Customization\n\n### Manual Pattern Customization\n\nYou can easily customize any background pattern by modifying the pattern object structure. Each pattern follows this format:\n\n```typescript\n{\n  id: \"unique-pattern-id\",\n  name: \"Pattern Display Name\",\n  badge: \"New\",\n  style: {\n    background: \"#ffffff\",\n    backgroundImage: `\n      \u002F\u002F Your CSS background patterns here\n      linear-gradient(to right, #f0f0f0 1px, transparent 1px),\n      radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent)\n    `,\n    backgroundSize: \"96px 64px, 100% 100%\",\n  },\n  code: `\u003Cdiv className=\"min-h-screen w-full bg-white relative\">\n  {\u002F* Pattern Name Background *\u002F}\n  \u003Cdiv\n    className=\"absolute inset-0 z-0\"\n    style={{\n      backgroundImage: \\`\n        \u002F\u002F Your background image styles\n      \\`,\n      backgroundSize: \"96px 64px, 100% 100%\",\n    }}\n  \u002F>\n  {\u002F* Your Content\u002FComponents *\u002F}\n\u003C\u002Fdiv>`,\n}\n```\n\n### Customization Tips\n\n**Colors**: Change hex values in `backgroundImage` gradients\n**Sizing**: Modify `backgroundSize` values for different scales\n**Positioning**: Adjust gradient positions and directions\n**Effects**: Add multiple background layers for complex patterns\n\n### Example Customization\n\n```typescript\n\u002F\u002F Original pattern\nbackgroundImage: `linear-gradient(to right, #f0f0f0 1px, transparent 1px)`;\n\n\u002F\u002F Customized version\nbackgroundImage: `linear-gradient(to right, #3b82f6 1px, transparent 1px)`; \u002F\u002F Blue lines\nbackgroundSize: \"48px 32px\"; \u002F\u002F Smaller grid\n```\n\n## Usage\n\n1. Browse the pattern collection on the website\n2. Click on any pattern to see the live preview\n3. Use the \"Add to Favorites\" feature to save patterns you like\n4. Copy the generated CSS code\n5. Paste it into your project\n\nEach pattern includes:\n\n- Complete CSS styling\n- Tailwind-compatible code\n- Responsive implementation\n- Cross-browser compatibility\n\n## Contributing\n\n> **This project is sponsored by Vercel, which helps us maintain a stable development environment.**\n\nWe welcome contributions to expand the pattern collection. To add new patterns:\n\n### Adding New Patterns\n\n1. Fork the repository\n2. Create a feature branch:\n\n```bash\ngit checkout -b feature\u002Fnew-pattern-name\n```\n\n3. Navigate to `src\u002Fdata\u002Fpatterns.ts`\n4. Add your pattern following the established format:\n\n```typescript\n{\n  id: \"unique-pattern-id\",\n  name: \"Pattern Display Name\",\n  category: \"gradients\" | \"geometric\" | \"decorative\" | \"effects\",\n  badge: \"New\", \u002F\u002F Optional: \"New\"\n  style: {\n    background: \"#ffffff\",\n    backgroundImage: `\n      \u002F\u002F Your CSS background patterns here\n      linear-gradient(to right, #f0f0f0 1px, transparent 1px),\n      radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent)\n    `,\n    backgroundSize: \"96px 64px, 100% 100%\",\n  },\n  code: `\u003Cdiv className=\"min-h-screen w-full bg-white relative\">\n  {\u002F* Pattern Name Background *\u002F}\n  \u003Cdiv\n    className=\"absolute inset-0 z-0\"\n    style={{\n      backgroundImage: \\`\n        \u002F\u002F Your background image styles\n      \\`,\n      backgroundSize: \"96px 64px, 100% 100%\",\n    }}\n  \u002F>\n  {\u002F* Your Content\u002FComponents *\u002F}\n\u003C\u002Fdiv>`,\n}\n```\n\n### Contribution Guidelines\n\n- **Consistency**: Follow the existing pattern structure exactly\n- **Naming**: Use descriptive, kebab-case IDs and proper display names\n- **Quality**: Ensure patterns are visually appealing and professional\n- **Performance**: Optimize for rendering performance\n- **Responsiveness**: Test patterns across different screen sizes\n- **Uniqueness**: Avoid duplicating existing patterns\n\n### Pattern Categories\n\nConsider these categories when adding patterns:\n\n- **Gradient** - Color transitions and blends\n- **Geometric** - Grids, dots, lines, shapes\n- **Decorative** - Subtle background textures\n- **Effects** - Clean and simple designs\n\n### Testing Your Patterns\n\n1. Test the pattern in the development environment\n2. Verify responsive behavior\n3. Check browser compatibility (Chrome, Firefox, Safari, Edge)\n4. Ensure code validity and formatting\n\n### Pull Request Process\n\n1. Commit your changes with descriptive messages\n2. Push to your feature branch\n3. Create a pull request with:\n   - Clear description of the pattern added\n   - Screenshots or preview of the pattern\n   - Any special considerations or notes\n\n```bash\ngit add .\ngit commit -m \"feat: add new geometric grid pattern\"\ngit push origin feature\u002Fnew-pattern-name\n```\n\n## Development\n\n### Project Structure\n\n```\npattern-craft\u002F\nsrc\u002F\n├── app\u002F\n│   ├── globals.css\n│   ├── layout.tsx\n│   ├── page.tsx\n│   └── not-found.tsx\n│\n├── components\u002F\n│   ├── ui\u002F                # shadcn\u002Fui components\n│   │   ├── badge.tsx\n│   │   ├── button.tsx\n│   │   └── tabs.tsx\n│   ├── layout\u002F\n│   │   ├── navbar.tsx\n│   │   └── footer.tsx\n│   ├── patterns\u002F\n│   │   ├── pattern-showcase.tsx\n│   │   ├── pattern-card.tsx\n│   │   ├── pattern-grid.tsx\n│   │   └── pattern-empty-state.tsx\n│   ├── home\u002F\n│   │   ├── hero.tsx\n│   │   ├── support-dropdown.tsx\n│   │   └── return-to-preview.tsx\n│   └── providers\u002F\n│       └── theme-provider.tsx\n│\n├── lib\u002F\n│   ├── utils.ts\n│   └── constants.ts\n│\n├── hooks\u002F\n│   ├── useTheme.tsx\n│   └── useCopy.tsx\n│\n├── types\u002F\n│   ├── pattern.ts\n│   └── index.ts\n│\n├── context\u002F\n│   └── favourites-context.tsx\n│\n└── data\u002F\n    ├── patterns.ts        # Pattern used in UI (contribute here)\n    └── categories.ts\n```\n\n### Code Standards\n\n- Use TypeScript for type safety\n- Follow ESLint and Prettier configurations\n- Maintain consistent code formatting\n- Use semantic commit messages\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## Acknowledgments\n\n- Built with Next.js and Tailwind CSS\n- Inspired by modern web design patterns\n- Community-driven pattern collection\n\n## Support\n\nFor questions, issues, or suggestions:\n\n- Open an issue on GitHub\n- Check existing issues before creating new ones\n- Provide detailed information for bug reports\n\n## Built By\n\n- Twitter(X): [@meghtrix](https:\u002F\u002Fx.com\u002Fmeghtrix)\n- Alternate Twitter(X): [@usepatterncraft](https:\u002F\u002Fx.com\u002Fusepatterncraft)\n- GitHub: [@megh-bari](https:\u002F\u002Fgithub.com\u002Fmegh-bari)\n\nIf you like this project, consider giving it a ⭐️ on GitHub and sharing it with others!\n\n>This project is proudly supported by:\n\n\u003Ca href=\"https:\u002F\u002Fvercel.com\u002Foss\">\n  \u003Cimg alt=\"Vercel OSS Program\" src=\"https:\u002F\u002Fvercel.com\u002Foss\u002Fprogram-badge.svg\" \u002F>\n\u003C\u002Fa>\n\n## Star History\n\n\u003Ca href=\"https:\u002F\u002Fwww.star-history.com\u002F#megh-bari\u002Fpattern-craft&Date\">\n \u003Cpicture>\n   \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=megh-bari\u002Fpattern-craft&type=Date&theme=dark\" \u002F>\n   \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=megh-bari\u002Fpattern-craft&type=Date\" \u002F>\n   \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=megh-bari\u002Fpattern-craft&type=Date\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n---\n\n> _**Happy coding!**_\n","Pattern Craft 是一个为网站和应用程序提供专业级背景图案和渐变的项目。它提供了超过100种现代CSS背景图案和渐变代码片段，这些设计美观且可以直接复制粘贴到你的项目中。该项目使用现代CSS和Tailwind CSS构建，确保了无缝集成。适用于使用React、Next.js、Vue、Angular等现代前端框架的开发者和设计师，特别适合那些注重设计质量的人士。核心功能包括即用型CSS代码、实时预览、响应式设计以及零依赖等，旨在帮助用户快速提升项目的视觉效果。",2,"2026-06-11 03:47:21","high_star"]