@youssefch2003/yc-cli
v0.1.6
Published
Drop-in React + Tailwind + shadcn/ui landing page templates.
Maintainers
Readme
@youssefch2003/yc-cli
Drop-in React + Tailwind + shadcn/ui landing page templates.
Quick Start
# install CLI (or use npx)
npm i -g @youssefch2003/yc-cliInside your React app, pick a template
For your service/company landing page — great for agencies, installers, boutiques, or any brand that needs a clean homepage with hero, features, testimonials, contact, and footer.
yc install landing-modern --to ./For your mobile app — perfect when users Google your app name and need a polished promo site with store badges, animated screenshots, FAQs, and a hero tailored for downloads.
yc install landipageforapp --to ./Requirements
- React + Vite (TypeScript)
- Tailwind + shadcn/ui initialized
Install shadcn components & deps
Common setup
pnpm dlx shadcn@latest init -yFor landing-modern
pnpm dlx shadcn@latest add button badge card accordion separator avatar sheet input textarea label checkbox form
pnpm add lucide-react sonner react-hook-form zodFor landipageforapp
pnpm dlx shadcn@latest add button badge card accordion separator avatar sheet
pnpm add lucide-react framer-motionUsage
Generated files are placed in src/pages and src/sections.
// landing-modern
import LandingModern from "@/pages/LandingModern"
export default function App() { return <LandingModern /> }
// landipageforapp
import LandingApp from "@/pages/LandingApp"
export default function App() { return <LandingApp /> }Troubleshooting
Marquee testimonials (landing-modern)
If the testimonial marquee doesn't scroll or looks clipped, add these utilities to your global CSS (e.g. src/index.css or src/app.css):
/* --- Marquee utilities --- */
.marquee {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
display: flex;
width: max-content;
animation: marquee-scroll var(--marquee-duration, 28s) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}License
MIT © youssefch2003
