Shadcn SvelteKit Landing Page is an open-source SvelteKit boilerplate that converts the shadcn-vue landing page template into a SvelteKit application, providing a complete marketing site with 15 prebuilt sections and built-in dark mode.
What is Shadcn SvelteKit Landing Page?
This template is a project conversion from leoMirandaa's shadcn-vue-landing-page, rebuilt with SvelteKit, TypeScript, Tailwind CSS, and the shadcn-svelte component library. It produces a fully responsive, multi-section landing page that anyone can clone, install, and customize. The repository is maintained by zxce3 and a live demo is available at shadcn-sveltekit-landing-page.zxce3.net.
Key Features
- 15 prebuilt sections — The page includes Navbar, mobile Sidebar, Hero, Sponsors, Benefits, Features, Services, HowItWorks, Testimonials, Pricing, Frequently Asked Questions, Team, Community, Contact, and Footer.
- Dark mode — A dark/light theme toggle is included out of the box.
- Fully responsive design — The layout adapts to mobile, tablet, and desktop, with a mobile sidebar handling navigation on smaller screens.
- Meta tags — The template sets up meta tags for search engine and social sharing purposes.
- SvelteKit + TypeScript + Tailwind stack — Uses SvelteKit for routing and server rendering, TypeScript for type safety, Tailwind for utility-first styling, and shadcn-svelte for accessible UI components.
- Package manager flexibility — Installation and development commands are provided for npm, pnpm, and yarn.
- Production build pipeline — The standard SvelteKit
buildandpreviewcommands work, and deployment requires installing a SvelteKit adapter for the target environment.
Who is it for?
- SvelteKit developers — Those who want a starting point for a marketing site without wiring up common sections from scratch.
- Indie hackers and startup founders — Non-designers who need a professional landing page with pricing, testimonials, and contact sections quickly.
- Open-source project maintainers — Teams that want a project landing page with community and FAQ sections that matches the shadcn aesthetic.
What can you do with Shadcn SvelteKit Landing Page?
- Launch a SaaS landing page: Customize the Hero, Features, Pricing, and Testimonials sections to present your product's value proposition.
- Create a product waitlist page: Use the built-in Contact and Community sections to capture interest before launch.
- Build a portfolio or personal site: Adapt the Team and Services sections to showcase your own work or agency offerings.
How does Shadcn SvelteKit Landing Page work?
Clone the repository, install dependencies, and run the development server to see the template locally. The README walks through five steps: git clone, cd into the project, npm install (or pnpm/yarn), npm run dev, then opening http://localhost:5173. For production, run npm run build and preview the result with npm run preview.
FAQ
Is this template free to use?
The repository is publicly available on GitHub; the source does not state a specific license, so check the repository for license details before commercial use.
How do I install the template?
Clone the repo with git clone https://github.com/zxce3/shadcn-sveltekit-landing-page.git, then run npm install (or pnpm/yarn), followed by npm run dev to start the development server on http://localhost:5173.
How do I deploy my site?
First build the production bundle with npm run build, then preview with npm run preview. To deploy, install a SvelteKit adapter for your target hosting environment as described in the SvelteKit docs.
Does the template include dark mode?
Yes, dark mode is listed as a feature, and the template ships with a dark/light theme toggle included in the navigation.
Is there a live demo?
Yes, the README links to a live demo at shadcn-sveltekit-landing-page.zxce3.net so you can see the sections and dark mode in action before installing.
