Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/queaxtra/zvelte/llms.txt

Use this file to discover all available pages before exploring further.

This guide will walk you through creating your first SvelteKit project using Zvelte. You’ll have a fully configured, production-ready application running in minutes.

Create Your First Project

1

Run the create command

Open your terminal and run Zvelte with your desired project name:
bunx @queaxtra/zvelte create my-awesome-project --install=bun
Replace my-awesome-project with your desired project name. Use . to create the project in the current directory.
This command will:
  • Clone the SvelteKit template from sveltekit-shadcn-template
  • Remove the .git directory for a clean start
  • Update package.json with your project name
  • Optionally install dependencies with your chosen package manager
2

Choose package manager (if prompted)

If you used the --install flag without specifying a package manager, Zvelte will prompt you to choose:
? Which package manager do you want to use for installation?
❯ bun
  pnpm
  npm
  yarn
  None
Zvelte automatically detects which package managers are installed on your system and only shows available options.
Select your preferred package manager using arrow keys and press Enter.
3

Wait for setup to complete

Zvelte will now clone the template and set up your project. You’ll see output similar to:
Creating new project in /path/to/my-awesome-project...
Cloning into 'my-awesome-project'...
remote: Enumerating objects: 150, done.
remote: Counting objects: 100% (150/150), done.
remote: Compressing objects: 100% (95/95), done.
remote: Total 150 (delta 45), reused 130 (delta 35)
Receiving objects: 100% (150/150), 245.00 KiB | 2.50 MiB/s, done.
Resolving deltas: 100% (45/45), done.
Removed .git directory.
Project created successfully!
If you enabled dependency installation:
Installing dependencies with bun...
bun install v1.0.0

+ 150 packages installed [2.50s]

Dependencies installed successfully!
4

Navigate to your project

Change into your new project directory:
cd my-awesome-project
If you created the project in the current directory (using .), you’re already there!
5

Install dependencies (if not already installed)

If you skipped automatic installation, install dependencies now:
bun install
6

Start the development server

Launch the development server to see your project in action:
bun run dev
You should see output like:

  VITE v5.0.0  ready in 500 ms

  Local:   http://localhost:5173/
  Network: use --host to expose
  press h + enter to show help
7

Open in your browser

Open your browser and navigate to:
http://localhost:5173
You should see your new SvelteKit application running with Shadcn UI components and Tailwind CSS styling!

What You Get

Your new project includes:

SvelteKit Framework

Full SvelteKit setup with file-based routing, server-side rendering, and optimized builds.

Shadcn UI Components

Beautiful, accessible components built on Radix UI primitives.

Tailwind CSS

Utility-first CSS framework configured and ready to use.

Internationalization

Built-in i18n support for multi-language applications.

Project Configuration

Zvelte automatically updates your package.json with:
{
  "name": "my-awesome-project",
  "version": "0.0.1",
  "description": "",
  // ... rest of the configuration
}
  • name: Set to your project directory name
  • version: Reset to 0.0.1
  • description: Cleared to an empty string for you to customize

Common Use Cases

If you want to create a project in the current directory instead of a new folder:
bunx @queaxtra/zvelte create . --install=bun
The current directory must be empty, or files will be merged. Conflicting files will cause an error.
If you want to install dependencies later or use a different method:
bunx @queaxtra/zvelte create my-project
Then install manually when ready:
cd my-project
bun install
Specify your preferred package manager directly:
bunx @queaxtra/zvelte create my-project --install=bun

Next Steps

CLI Reference

Explore all available commands and options.

Template Documentation

Learn about the template’s features and structure.

SvelteKit Docs

Dive into SvelteKit’s official documentation.
Start building your application by editing src/routes/+page.svelte - changes will hot-reload automatically!

Build docs developers (and LLMs) love