Components – UI

UI

items-frame

Container for a group of content. Rounded border, secondary background.

Example content inside x-ui.items-frame .

item-frame

Single card/row container. Primary background.

Content in x-ui.item-frame .

panel

Box with optional title. Variants: secondary, surface, primary.

Panel title

Panel body content.

kickstart-card

Numbered step card (e.g. 01. Configure).

01. Example
Card body with x-ui.kickstart-card .

callout

Highlighted callout box. Variants: default, warning.

Callout heading

Callout body text.

code

Inline code snippet. Theme-aware background and text. Size: xs, sm (default). Use x-ui.code .

Example: run php artisan optimize:clear after config changes.

badge

Pill-style label. Variants: success, neutral, accent. Optional dot. Use x-ui.badge .

Enabled Disabled Coming Soon

divider

Horizontal or vertical divider. Optional label.

Or with label

link (ui)

Theme-styled link. Variants: primary, accent.

Example link

icon-btn

Icon button (edit, delete, qrcode, copy, etc.). Shape: square or circle.

cta-button

Pill-style CTA link. Variants: primary, secondary. Use overlay=true for light-on-dark (e.g. hero over image).

CTA button

navrow

Row of nav actions (e.g. left/right buttons).

Back
Next

sort-order-buttons

Stacked up/down reorder (URL/form).

edit-delete-buttons

Round edit + delete with optional confirmation modal.

confirmation-modal

Reusable modal; opened by buttons with data-confirmation-title. Used with dashboard modals JS.

See dashboard pages for live usage.

expand-collapse-btn

Button that toggles a target's visibility. Uses data-expand-collapse-target.

Used in nav and accordions.

full-frame, standard-space, icon, error-page-actions, alerts-row

Layout/utility UI pieces. Use by name when needed.