Appearance

Components Overview ​

Redot Dashboard ships a library of Blade components for building admin and website screens — form inputs, layout primitives, display widgets, and third-party integrations. This page covers how to use them and the conventions every component shares; each component has its own page for the details.

Using a component ​

Components are plain Blade tags. Pass props as attributes, and prefix any value that is a PHP expression with :.

blade
<x-input name="title" :title="__('Title')" :value="$post?->title" validation="required" />
  • Plain attributes pass a literal string: type="email".
  • : attributes evaluate PHP: :value="$post->title", :title="__('Name')".
  • Any extra HTML attribute you add (id, class, placeholder, disabled, readonly, wire:model, …) is forwarded to the underlying element, so you can treat a component like the input it wraps.

Shared form-field conventions ​

Most form inputs (<x-input>, <x-select>, <x-textarea>, <x-date-picker>, and friends) accept the same core attributes, so once you learn one you know them all:

  • name — the field name submitted with the form.
  • title — label text shown above the field (a localized string).
  • value — the initial value, such as the model's current attribute.
  • hint — small helper text shown beneath the field.
  • validation — client-side validation rules (e.g. required, required|email). If the rules include required, the label shows a required marker. See RedotValidator.

After a failed validation redirect, form fields refill themselves from the submitted input, so you don't need to wrap value in old(). This works for array names too (tags[], title[en]).

To give a custom control the same label, hint, and required marker, wrap it in <x-field>.

Components that wrap a JavaScript widget (date pickers, selects, the rich editor, uploader, …) light up automatically through the asset & init system — you don't wire up any JS yourself.

Overriding a component ​

The components on this page ship inside the redot/core package, so they update with composer update. Only the branding and integration components (Logo, Favicon, Page Loader, Countries, Facebook Pixel, and Google Analytics) live in your application. You can still replace a package component in your application without renaming it:

  • Markup — add a view with the same name under resources/components, such as resources/components/toasts.blade.php. Your view is used instead of the package's.
  • Behavior — add a class with the same name under App\View\Components, such as App\View\Components\Toasts. Extend the package class (Redot\View\Components\Toasts) to change only what you need.

A markup override of a component that has a class still runs the package class, so your view receives the same props and data as the package view. To add, remove, or rename props, override the class as well.

The JavaScript and CSS these components load ship with core, along with the third-party libraries they use (jQuery, Tabler, Tom Select, HugeRTE, Coloris, …). php artisan redot:publish copies them to public/vendor/redot and runs after every composer install and composer update, so don't edit them there.

Component index ​

Form inputs ​

Layout & structure ​

Display ​

Integrations ​

Proprietary — for use within the Redot Dashboard. Product site: redot.dev

Copyright © 2026 Redot