Quick Start

Add your first component with Velyx

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 init
pnpm dlx velyx init
yarn dlx velyx init
bunx --bun velyx init

If you want a non-interactive setup with defaults:

npx velyx init --defaults
pnpm dlx velyx init --defaults
yarn dlx velyx init --defaults
bunx --bun velyx init --defaults

2. Add a Component

Use the CLI to add a component:

npx velyx add button
pnpm dlx velyx add button
yarn dlx velyx add button
bunx --bun velyx 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 list
pnpm dlx velyx list
yarn dlx velyx list
bunx --bun velyx 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