Guide

Getting Started

LaralCN-UI is copy-and-own: there is no runtime library. You install a small dev CLI, then pull plain Blade components into your own source tree. Here is the path from zero to your first component.

1. Install the CLI

Require the package as a dev dependency. It ships only an Artisan CLI, nothing is added to your production runtime.

composer require --dev safi/laralcn-ui

2. Initialise your app

ui:init is idempotent: it injects the theme tokens into your CSS and creates the components directory. Safe to re-run anytime.

php artisan ui:init

3. Add your first component: `button`

This copies the Blade file into your app and resolves any dependencies (here, the tailwind-merge package).

php artisan ui:add button

What you get

4. Use it in a view

The component now lives in your source tree, edit it freely.

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

button source

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

@php
    $base =
        'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';

    $variants = match ($variant) {
        'destructive'
            => 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        'outline'
            => 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        'secondary'
            => 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        'ghost' => 'hover:bg-accent hover:text-accent-foreground',
        'link' => 'text-primary underline-offset-4 hover:underline',
        default => 'bg-primary text-primary-foreground hover:bg-primary/90',
    };

    $sizes = match ($size) {
        'sm' => 'h-9 px-3',
        'lg' => 'h-11 px-8',
        'icon' => 'h-10 w-10',
        default => 'h-10 px-4 py-2',
    };

    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        $base,
        $variants,
        $sizes,
        $attributes->get('class'),
    );
@endphp

<button type="{{ $type }}"
    {{ $attributes->except('class')->merge(['class' => $classes]) }}>
    {{ $slot }}
</button>

Next steps

Browse all components Theming Plain Blade