{"id":13494902,"url":"https://github.com/cruip/cruip-tutorials-next","last_synced_at":"2025-09-21T22:04:50.665Z","repository":{"id":159981768,"uuid":"634940110","full_name":"cruip/cruip-tutorials-next","owner":"cruip","description":"A repository of Cruip's guides \u0026 tutorials made with Next.js and Tailwind CSS","archived":false,"fork":false,"pushed_at":"2024-11-30T10:20:29.000Z","size":4955,"stargazers_count":83,"open_issues_count":1,"forks_count":18,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-19T21:06:49.371Z","etag":null,"topics":["nextjs","react","tailwind","tailwindcss","tutorial","tutorials","typescript"],"latest_commit_sha":null,"homepage":"https://cruip-tutorials-next.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cruip.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-01T15:45:08.000Z","updated_at":"2025-04-01T19:33:35.000Z","dependencies_parsed_at":"2024-08-21T09:31:41.056Z","dependency_job_id":"544060a2-5f4c-4ed8-8730-1a66c088d28c","html_url":"https://github.com/cruip/cruip-tutorials-next","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cruip/cruip-tutorials-next","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cruip%2Fcruip-tutorials-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cruip%2Fcruip-tutorials-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cruip%2Fcruip-tutorials-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cruip%2Fcruip-tutorials-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cruip","download_url":"https://codeload.github.com/cruip/cruip-tutorials-next/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cruip%2Fcruip-tutorials-next/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261059074,"owners_count":23103948,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","react","tailwind","tailwindcss","tutorial","tutorials","typescript"],"created_at":"2024-07-31T19:01:29.265Z","updated_at":"2025-09-21T22:04:45.606Z","avatar_url":"https://github.com/cruip.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Cruip Tutorials made with Next.js and Tailwind CSS\n\nWelcome to the repository of Cruip's guides \u0026 tutorials for **Next.js**. Here you will find the code for all the components we have developed and will develop, made in **TypeScript**, and ready to be integrated into your projects.\n\nIf you're new to our articles, we recommend taking a look here: [Tailwind CSS Tutorials](https://cruip.com/tutorials/). If you're new to Cruip's ecosystem, learn more about our [Tailwind CSS templates](https://cruip.com/).\n\n## Tutorial list\n\n- [How to Build a Modal Video Component with Tailwind CSS and Next.js](https://cruip.com/how-to-build-a-modal-video-component-with-tailwind-css-and-next-js/)\n- [How to Create a Pricing Table with a Monthly/Yearly Toggle in Tailwind CSS and Next.js](https://cruip.com/how-to-create-a-pricing-table-with-a-monthly-yearly-toggle-in-tailwind-css-and-next-js/)\n- [How to Create a Beautiful Particle Animation with HTML Canvas](https://cruip.com/how-to-create-a-beautiful-particle-animation-with-html-canvas/)\n- [How to Create a Spotlight Card Hover Effect with Tailwind CSS](https://cruip.com/how-to-create-a-spotlight-card-hover-effect-with-tailwind-css/)\n- [How to Build a Fancy Testimonial Slider with Tailwind CSS and Next.js](https://cruip.com/how-to-build-a-fancy-testimonial-slider-with-tailwind-css-and-next-js/)\n- [Using Tailwind CSS and Next.js to Create Animated and Accessible Tabs](https://cruip.com/using-tailwind-css-and-next-js-to-create-animated-and-accessible-tabs/)\n- [How to Add Custom Fonts in Next.js and Tailwind CSS Templates](https://cruip.com/how-to-add-custom-fonts-in-next-js-and-tailwind-css-templates/)\n- [How to Create a Feature Comparison Table with Tailwind CSS](https://cruip.com/how-to-create-a-feature-comparison-table-with-tailwind-css/)\n- [Building a Simple Animated Accordion Component with Tailwind CSS](https://cruip.com/building-a-simple-animated-accordion-component-with-tailwind-css/)\n- [Creating a Sliding Text Animation with Tailwind CSS](https://cruip.com/creating-a-sliding-text-animation-with-tailwind-css/)\n- [Create an Infinite Horizontal Scroll Animation with Tailwind CSS](https://cruip.com/create-an-infinite-horizontal-scroll-animation-with-tailwind-css/)\n- [How to Create a Sticky On Scroll Effect with JavaScript](https://cruip.com/how-to-create-a-sticky-on-scroll-effect-with-javascript/)\n- [Create a Carousel with Progress Indicators using Tailwind and Next.js](https://cruip.com/create-a-carousel-with-progress-indicators-using-tailwind-and-nextjs/)\n- [Styling the Active Link with Next.js and Tailwind CSS ](https://cruip.com/styling-the-active-link-with-nextjs-and-tailwind-css/)\n- [Building a Documentation Search Modal with Next.js](https://cruip.com/building-a-documentation-search-modal-with-nextjs/)\n- [Active Link Animation with Tailwind CSS and Framer Motion](https://cruip.com/active-link-animation-with-tailwind-css-and-framer-motion/)\n- [How to Create a True Masonry with Next.js](https://cruip.com/how-to-create-a-true-masonry-with-nextjs/)\n- [4 Examples of Dropdown Menus with Tailwind CSS and Radix UI](https://cruip.com/4-examples-of-dropdown-menus-with-tailwind-css-and-radix-ui/)\n- [Animate a React Switch Toggle with Framer Motion](https://cruip.com/animate-a-react-switch-toggle-with-framer-motion/)\n- [Toggle Password Visibility with Tailwind CSS and Next.js](https://cruip.com/toggle-password-visibility-with-tailwind-css-and-nextjs/)\n- [Build a Password Field with Strength Indicator with Next.js](https://cruip.com/build-a-password-field-with-strength-indicator-with-nextjs/)\n- [Building a Composable Multiselect React Component](https://cruip.com/building-a-composable-multiselect-react-component/)\n\n## Getting Started\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\n[http://localhost:3000/api/hello](http://localhost:3000/api/hello) is an endpoint that uses [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers). This endpoint can be edited in `app/api/hello/route.ts`.\n\nThis project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n## Terms of use\n\nWe want you to get the most out of these resources, so here's what you need to know:\n\n1. **Usage Freedom**: You are free to use these tutorials and demos for any purpose. Whether it's for personal projects, educational endeavors, or even commercial purposes, go ahead and make the most of them!\n\n2. **Respect Our Work**: While you're free to use the tutorials and demos as-is, you are not allowed to redistribute them or create derivative works with the aim of making money. Let's keep it fair and respect each other's efforts.\n\n3. **Attribute and Share the Love**: We kindly ask that you provide attribution when you use our work. It's easy, just retain any copyright notices or credits you find in the code. It helps spread the word about our project and allows others to discover these valuable resources too.\n\n4. **Be Creative**: We love to see what you can do with our work! Feel free to create remixes or derivative works for non-commercial purposes. Play around, experiment, and have fun, as long as you stick to the same license terms.\n\nThat's it! We believe in empowering the community with knowledge and resources, and we hope these tutorials and demos help you on your journey to creating fantastic projects with Tailwind CSS.\n\nIf you have any questions or just want to say hello, don't hesitate to reach out to us at Cruip.com.\n\nHappy coding! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcruip%2Fcruip-tutorials-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcruip%2Fcruip-tutorials-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcruip%2Fcruip-tutorials-next/lists"}