leptos-shadcn-ui/docs/tutorials/video-tutorials/getting-started/01-installation.md

Tutorial 1: Installation & Setup

Video Length: ~12 minutes | Difficulty: Beginner | Series: Getting Started

Overview

This tutorial walks you through setting up a new Leptos project with shadcn-ui components from scratch. You'll learn how to install the necessary tools, initialize a project, and configure your development environment.

What You'll Learn

• Installing Rust and Trunk toolchain
• Creating a new Leptos project
• Adding shadcn-ui components to your project
• Verifying your setup with a test component
• Understanding the project structure

Prerequisites

No prior Leptos experience required. You should have:

• Basic familiarity with command line tools
• A code editor (VS Code recommended)
• Administrative access to install packages

Video Outline

[0:00] Introduction to leptos-shadcn-ui [0:45] Installing Rust and Cargo [2:30] Installing Trunk (the Leptos build tool) [4:00] Creating a new Leptos project [6:00] Adding shadcn-ui component packages [8:30] Configuring styles and themes [10:00] Running the development server [11:00] Verifying the setup

Step-by-Step Guide

Step 1: Install Rust and Cargo

First, install Rust using rustup:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

This will install:

• rustc - the Rust compiler
• cargo - the Rust package manager
• rustup - the Rust toolchain manager

Verify your installation:

rustc --version
cargo --version

Expected output: rustc 1.70.0 or higher

Step 2: Install Trunk

Trunk is the build tool for Leptos applications. Install it with:

cargo install trunk

Install additional WASM dependencies:

# Linux
sudo apt install binaryen

# macOS
brew install binaryen

# Windows (PowerShell)
winget install Binaryen

# Verify installation
wasm-opt --version

Step 3: Create a New Leptos Project

Use cargo-leptos to scaffold a new project:

cargo install cargo-leptos

# Create a new project
cargo leptos new my-shadcn-app
cd my-shadcn-app

Project structure:

my-shadcn-app/
├── Cargo.toml
├── index.html
├── src/
│   ├── app.rs
│   └── main.rs
└── style/
    └── main.css

Step 4: Add shadcn-ui Components

Add the base components to your Cargo.toml:

[dependencies]
leptos = { version = "0.6", features = ["csr"] }
leptos-shadcn-components = "0.9"

Add commonly used components:

# Add specific components you need
cargo add leptos-shadcn-button
cargo add leptos-shadcn-input
cargo add leptos-shadcn-card

Step 5: Configure Styles

Add Tailwind CSS configuration to your style/main.css:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Step 6: Create Your First Component

Update src/app.rs:

use leptos::*;
use leptos_shadcn_button::Button;

#[component]
pub fn App() -> impl IntoView {
    view! {
        <div class="container mx-auto p-8">
            <h1 class="text-3xl font-bold mb-4">"Welcome to leptos-shadcn-ui!"</h1>
            <p class="text-muted-foreground mb-6">
                "Your first component is ready!"
            </p>
            <Button variant="default">
                "Get Started"
            </Button>
        </div>
    }
}

Step 7: Run the Development Server

Start the development server:

trunk serve --open

Your application will open at http://localhost:8080

Common Issues & Solutions

Issue: trunk: command not found

Solution: Make sure Cargo bin directory is in your PATH:

export PATH="$HOME/.cargo/bin:$PATH"

Issue: WASM compilation errors

Solution: Install the wasm32 target:

rustup target add wasm32-unknown-unknown

Issue: Styles not applying

Solution: Ensure your index.html includes the CSS link:

<link rel="stylesheet" href="/style/main.css">

What's Next?

Now that you have your environment set up, continue to:

• Tutorial 2: Your First Component - Build interactive components
• Component Documentation - Explore available components
• Examples - View working examples

Exercise

1. Create a new Leptos project from scratch
2. Add at least 3 shadcn-ui components
3. Customize the color scheme in your CSS
4. Deploy your app and share the URL

Transcript

[Full video transcript will be added here with timestamps for easy navigation]

Related Resources

• Leptos Documentation
• Trunk Documentation
• Installation Guide
• Project Setup Checklist

---

Previous: Tutorials Overview | Next: Your First Component