cruip-tutorials-next

Cruip Tutorials is a GitHub repository from Cruip containing the source code for every component built in their Next.js and Tailwind CSS tutorials, packaged as a ready-to-run Next.js project for you to copy from.

What is cruip-tutorials-next?

Cruip Tutorials is a collection of copy-paste-ready UI components and effects written in TypeScript on the Next.js App Router, styled with Tailwind CSS, and published alongside step-by-step articles on Cruip's blog. The repository takes each tutorial's code and organizes it into a single Next.js application bootstrapped with create-next-app, so the output is modular React components you can lift into your own projects. It is maintained by Cruip, the company behind premium Tailwind CSS templates.

Key Features

The repository currently contains 22 tutorial implementations, including:

• Modal video component — a Tailwind-styled video lightbox with play controls for Next.js pages.
• Pricing table with monthly/yearly toggle — animated price switching for SaaS-style pricing sections.
• Particle animation with HTML Canvas — a lightweight canvas-based particle effect with no external dependencies.
• Spotlight card hover effect — a mouse-tracking radial highlight for card grids.
• Testimonial slider — an auto-advancing, fancy carousel for quotes and reviews.
• Animated and accessible tabs — keyboard-navigable tabs with smooth transition states.
• Custom fonts in Next.js — a guide to adding fonts via next/font, including the Inter font used in this project.
• Feature comparison table — a responsive grid for comparing plan features side by side.
• Animated accordion — a simple accessible expand/collapse component.
• Sliding text animation — CSS/JS text effects for headings or marquees.
• Infinite horizontal scroll — a seamless looping marquee built with Tailwind utility classes.
• Sticky on scroll effect — JavaScript-driven sticky positioning with scroll detection.
• Carousel with progress indicators — a slide deck with clickable progress dots.
• Active link styling — highlighting the current navigation item based on routes.
• Documentation search modal — a keyboard-friendly, full-screen search overlay for docs sites.
• Active link animation with Framer Motion — animated underline or pill indicators for nav links.
• True masonry layout — a CSS/JS masonry grid that avoids the gaps of flexbox alternatives.
• Dropdown menus with Radix UI — four accessible dialogue patterns built with the Radix UI primitives.
• Switch toggle with Framer Motion — an animated React switch control.
• Password visibility toggle — show/hide control for password inputs.
• Password strength indicator — a real-time meter assessing password robustness.
• Composable multiselect — a flexible multi-select component built from composable parts.

The project itself is a Next.js starter with the App Router (app/page.tsx, a app/api/hello route handler) and uses next/font to load Inter, so you can run it locally to preview every component in one place.

Who is it for?

Cruip Tutorials is aimed at developers who build marketing sites, dashboards, or docs with Next.js and Tailwind CSS. A front-end developer can grab the exact source for a pricing table or carousel without reinventing the wheel. A junior developer following Cruip's tutorial articles can use this repo as the reference implementation to check their work. A designer who prototypes in code can pull the particle animation or spotlight effect to polish a landing page. Anyone maintaining a Next.js project can also treat the repository as a pattern library for accessible dropdowns, tabs, and toggles.

What can you do with it?

• Copy and paste specific components — Take the modal video, password strength meter, or multiselect source and adapt it to your own React components.
• Learn implementation patterns — Read the corresponding tutorial to understand how each effect is built, then run the demo locally to see it in action.
• Use the project as a sandbox — Run npm run dev, open localhost:3000, and edit app/page.tsx to experiment with the components before integrating them.

How does it work?

The repository is a standard Next.js project. After cloning, run npm run dev (or yarn dev / pnpm dev) and open http://localhost:3000. The main page displays the component demos; each tutorial links to its article on cruip.com, and the code lives in the corresponding file or folder in this repo. Since it uses the App Router, you edit app/page.tsx to add or modify entries.

FAQ

Is this repository free to use?

Yes. The terms of use state that you are free to use the tutorials and demos for personal, educational, or commercial purposes. You cannot redistribute them, create paid derivative works, or remove attribution.

Can I build my own projects by copying the code?

Absolutely. You can reuse the component source code directly in your own projects, including commercial ones, as long as you keep the copyright notices and do not sell the tutorial material itself.

Does the project include all the tutorials?

The repository lists 22 tutorial links as of its current state, covering modal videos, pricing tables, particle animations, carousels, dropdowns, and more. New tutorials are added over time on Cruip's blog and mirrored here.

What tech stack does it use?

It uses Next.js with the App Router, TypeScript, and Tailwind CSS. Some components also integrate Framer Motion and Radix UI, and the project loads the Inter font via next/font.

Can I deploy this to Vercel?

Yes, the README includes a one-click deploy button to the Vercel Platform, and the project is a standard Next.js app that works with Vercel's deployment pipeline.