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 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20";

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

    $sizes = match ($size) {
        'sm' => 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
        'lg' => 'h-10 rounded-md px-6 has-[>svg]:px-4',
        'icon' => 'size-9',
        default => 'h-9 px-4 py-2 has-[>svg]:px-3',
    };

    $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