Components

devdojo/components is a Blade UI component library that works like shadcn/ui rather than a traditional dependency: you preview every component from the package, then add the ones you want straight into resources/views/components/, where they become ordinary anonymous Blade components you own and can edit freely. There are no black boxes and no runtime lock-in — the package is a source and a set of CLI tools, and the code you ship is yours.

Everything is built with Tailwind CSS v4 and Alpine.js, works well with Livewire, and is themeable through CSS variables.

#Requirements

• PHP 8.2+ and Laravel 11, 12, or 13.
• Tailwind CSS v4 — the theme file uses v4 syntax (@theme inline, @custom-variant, @source) and won't compile on v3.
• Alpine.js — interactive components (dropdowns, modals, tabs, …) are Alpine-driven. Alpine ships with Livewire; include it manually otherwise.
• Livewire is optional — only needed for the showcase "Add" buttons and wire:* loading states.
• gehrisandro/tailwind-merge-laravel is installed automatically as a dependency for class merging.

#Overview

The "add, don't depend" model has three moving parts:

• Preview namespace — every bundled component is registered under a components namespace so you can use it instantly as <x-components.button /> before adding anything.
• The components:add command — copies a component's source into your app as resources/views/components/{name}/index.blade.php, so you use it as <x-button /> and can edit it however you like.
• A shared theme — design tokens (colors, radii) live in one CSS file, so restyling every component is a matter of changing a few variables.

<x-button>Get started</x-button>
<x-input label="Email" type="email" wire:model="email" />
<x-alert variant="success" title="Saved!" description="Your changes are live." />

#Installation

composer require devdojo/components

Run the installer to publish the theme and wire it into your CSS:

php artisan components:install

This copies resources/css/components.css (the design tokens) and inserts @import './components.css'; into your resources/css/app.css — placed right after the @import 'tailwindcss'; line when present. Then rebuild assets:

npm run build   # or: npm run dev

#Previewing and adding components

Before adding anything, every component is available under the preview namespace:

<x-components.button variant="primary">Preview me</x-components.button>

List what's available, then add components interactively or by name:

php artisan components:list             # every component, grouped by category
php artisan components:add              # interactive multi-select picker
php artisan components:add button alert # add specific components
php artisan components:add --all        # add everything
php artisan components:add button --force  # overwrite an existing copy

Each component is written to its own folder as an index component — e.g. resources/views/components/button/index.blade.php, used as <x-button>. Dependencies are resolved automatically: adding input also adds label; adding modal also adds button. The whole component directory is copied, so components with sub-views (like tiptap's toolbar) come across intact, and source references to sibling components (<x-components.button />) are rewritten to the published form (<x-button />) on the way in.

#Configuration

components:install and vendor:publish --tag=components-config expose config/components.php:

The showcase route (devdojo-components.showcase) is only registered when showcase.enabled is truthy and the app is in the local environment.

#The component catalog

The package ships 41 components. Adding one via components:add copies its Blade source into your app; the "Use it as" column is the published tag.

Components declare their props, dependencies, and examples in a {name}.json manifest alongside their Blade file (the multi-part sidebar is the one exception). For example, <x-button> supports type (button / submit / a), variant (primary, secondary, destructive, outline, ghost, link), size (xs–3xl), href, and loader / loading for Livewire loading states. Compound components ship their sub-views too — <x-tabs.list> / <x-tabs.tab> / <x-tabs.panel>, <x-table.columns> / <x-table.row> / <x-table.cell>, <x-accordion.item>, and so on.

#Asset-backed components

monaco-editor and tiptap lazy-load a compiled JavaScript bundle instead of adding to your main app bundle. After adding either, publish the bundles once:

php artisan vendor:publish --tag=devdojo-assets

This copies the editors' JS/CSS into public/devdojo/, loaded on demand the first time the component appears on a page.

#Toast usage

Drop a single <x-toast /> into your layout, then trigger notifications from anywhere:

// JavaScript / Alpine
window.toast('Saved successfully!', 'success', 'Optional description.');

// Livewire
$this->dispatch('pop-toast', message: 'Saved!', type: 'success');

// Or flash from a controller
return back()->with('toast', ['message' => 'Saved!', 'type' => 'success']);

#Theming and class merging

All colors and radii are CSS variables in resources/css/components.css (a :root + .dark pair mapped through Tailwind's @theme inline). Change a token once and every component updates in both light and dark mode:

:root {
    --primary: oklch(0.55 0.21 264); /* re-skin the brand color */
}

Components use semantic tokens (bg-card, text-foreground, border-input, rounded-medium) rather than hard-coded Tailwind colors, which is what makes retheming instant. Classes you pass are merged via tailwind-merge-laravel, so your overrides win:

<x-button class="rounded-full px-10">Pill</x-button>

#How it's wired

ComponentsServiceProvider@boot performs the setup:

• registerTailwindMergeFallbacks() — provides twMerge / twMergeFor / withoutTwMergeClasses macros on ComponentAttributeBag so published components keep working even if the merge package is removed.
• registerPreviewComponents() — registers resources/components under the components namespace via Blade::anonymousComponentPath() (skipped when components.preview is false).
• registerLivewireComponents() — registers the devdojo-components.card Livewire component, only when Livewire is installed, keeping the core package Livewire-free.
• registerShowcase() — loads the package views (devdojo-components namespace) and, in local only, registers the single showcase route (devdojo-components.showcase) behind the configured middleware.
• registerPublishing() — exposes the components-config, components-theme, and devdojo-assets publish tags.

It also registers the components:list, components:add, and components:install commands. The Components class parses each {name}.json manifest into an in-memory catalog and resolves dependency graphs (withDependencies()), and the Publisher copies a component's directory into the app while rewriting the preview namespace.

#Extension points

• Own and edit — added components are plain Blade files in your app; change markup, props, and defaults freely.
• Retheme globally — edit the tokens in components.css; every component (added or previewed) follows.
• Author your own — drop a component folder with an index.blade.php and {name}.json into your app to extend the library locally.
• Turn off previews — set components.preview to false to stop registering the bundled <x-components.*> namespace once you've added everything you need.

The database browser consumes components from this library, and it pairs naturally with blog and changelog for building content UIs.