Cruip Tutorials Vue is a GitHub repository of free, copy-paste-ready UI components and tutorials built with Vue 3, TypeScript, and Tailwind CSS from the team at Cruip. This repository pairs with written step-by-step articles on Cruip's website, giving Vue developers the full source code for each component demonstrated in those tutorials.
What is Cruip Tutorials Vue?
Cruip Tutorials Vue is a collection of Vue components that ship as a starter project scaffolded with Vue 3, TypeScript, and Vite. It is not a finished application template but a library of discrete UI patterns — such as a modal video, a pricing table with monthly/yearly toggle, and a carousel with progress indicators — each ready to copy into an existing project. The code uses Vue 3 <script setup> single-file components, and the repository links each component to a full written guide on Cruip's blog. Cruip, the maker, is a design studio that sells Tailwind CSS templates and publishes free tutorials.
Key Features
- Modal video component — A reusable component that opens a video in a modal, built with Tailwind CSS and Vue.
- Pricing table with monthly/yearly toggle — A pricing table that switches billing periods, written in Vue with Tailwind styling.
- Particle animation with HTML Canvas — A standalone canvas-based particle effect that does not depend on a UI framework, useful as a background.
- Spotlight card hover effect — A card that tracks the cursor position to create a spotlight highlight, styled with Tailwind.
- Testimonial slider — A fancy slider for rotating customer quotes, built with Vue and Tailwind.
- Animated and accessible tabs — Tab components with smooth animations and focus management, using Vue and Tailwind.
- Feature comparison table — A table layout for comparing features, styled with Tailwind.
- Animated accordion — A simple accordion component with expand/collapse animation.
- Text and scroll effects — Sliding text animation, infinite horizontal scroll, and a sticky-on-scroll effect implemented with JavaScript.
- Vue 3 + TypeScript setup — The starter template includes Vue 3 with
<script setup> syntax, TypeScript support via vue-tsc, and Vite as the build tool.
- IDE recommendations — The README documents VS Code setup with Volar and the TypeScript Vue Plugin, including Take Over Mode instructions.
Who is it for?
- Vue developers who want to copy working implementations of common UI patterns into their own Vue applications.
- Tailwind CSS learners who want to see how experienced designers structure utility-first styles for interactive components.
- Front-end designers who need quick starter code for modals, sliders, tab panels, and hover effects without writing everything from scratch.
What can you do with Cruip Tutorials Vue?
- Add a modal video to a landing page: copy the modal video component and its tutorial link to embed a YouTube or self-hosted video with a custom play button.
- Build a pricing page with a billing toggle: use the pricing table component to let visitors switch between monthly and yearly prices.
- Create animated tabbed content: reuse the accessible tabs component to organize settings, product features, or documentation inside a Vue app.
- Enhance page backgrounds: drop in the particle animation canvas or the infinite horizontal scroll effect as a decorative, lightweight visual layer.
FAQ
Is Cruip Tutorials Vue free to use?
Yes. The terms of use state you are free to use the tutorials and demos for personal, educational, or commercial purposes. You may not redistribute them or create derivative works with the aim of making money.
Does it require a specific Vue version?
The starter template is built for Vue 3 and uses the <script setup> single-file component syntax. It also relies on TypeScript and the Vite build tool, as documented in the repository's setup notes.
Can I remix the components?
Yes, for non-commercial purposes. The terms allow remixes and derivative works as long as they remain under the same license, and you must retain copyright notices and give attribution to Cruip.
What styles are used?
All components are styled with Tailwind CSS. The repository is a companion to Cruip's Tailwind CSS tutorials, so the utility classes are the primary styling approach.
