Getting Started

Quick Start

Add your first Velyx component, understand the workflow, and move from documentation to implementation quickly in Laravel.

1. Initialize Velyx

Run the init command from your Laravel project root.

npx velyx@latest init

pnpm dlx velyx@latest init

yarn dlx velyx@latest init

bunx --bun velyx@latest init

For a non-interactive setup with defaults:

npx velyx@latest init --defaults

pnpm dlx velyx@latest init --defaults

yarn dlx velyx@latest init --defaults

bunx --bun velyx@latest init --defaults

2. Add a Component

Use the CLI to copy a component into your application.

npx velyx@latest add button

pnpm dlx velyx@latest add button

yarn dlx velyx@latest add button

bunx --bun velyx@latest add button

This command will

Copy the button component files to your project.
Prompt for required dependencies when needed.
Handle file conflicts before overwriting code.

3. List or Search Components

Explore available registry components directly from your terminal.

npx velyx@latest list

pnpm dlx velyx@latest list

yarn dlx velyx@latest list

bunx --bun velyx@latest list

4. Use the Component

The copied component is now available in your Blade templates.

<x-button>Click me</x-button>

<x-button variant="secondary">Secondary Action</x-button>

<x-button variant="outline" size="sm">Small Button</x-button>

button

Loading source...

5. Customize

Components are copied directly into your project, so you can customize markup, classes, and behavior.

<!-- resources/views/components/button.blade.php -->

@props([
    'variant' => 'default',
    'size' => 'default',
])

<button class="..." {{ $attributes }}>
    {{ $slot }}
</button>

Next steps

Explore components Learn theming Read CLI reference