Quick Start

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

Quick Start

Add your first component to your Laravel project in minutes.

1. Initialize Velyx

If you haven't already, run the init command:

npx velyx@latest init
pnpm dlx velyx@latest init
yarn dlx velyx@latest init
bunx --bun velyx@latest init

If you want 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 add a component:

npx velyx@latest add button
pnpm dlx velyx@latest add button
yarn dlx velyx@latest add button
bunx --bun velyx@latest add button

This will:

  • Copy the button component files to your project
  • Ask if you want to install any dependencies
  • Handle any file conflicts

3. List or Search Components

npx velyx@latest list
pnpm dlx velyx@latest list
yarn dlx velyx@latest list
bunx --bun velyx@latest list

4. Use the Component

The component is now available in your project. Use it 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>

5. Customize

Components are copied directly into your project, so you can customize them however you want:

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

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

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

Next Steps