Skip to content

Month: April 2026

Hello world!

By ryandev

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

Shadpine UI kit

Reference examples for Blade components under resources/views/components/. Documentation lives in docs/components/ in the repository. When you add a component to the catalog (INDEX.md), add a subsection here with a short description and one or more examples.

Accordion

Disclosure groups (single or multiple open).

Content for the first section.

Content for the second section.

Alert

Status messages with optional title, description, and action slot.

Alert dialog

Modal alert with trap, Escape to close, and action that can chain x-on:click before closeDialog().

Aspect ratio

Fixed ratio box (e.g. video 16/9, square). Images use absolute positioning and object-cover.

Sample photos are from Lorem Picsum (curated from Unsplash — free to use under the Unsplash License).

16:9

Coastal hills and water — demo stock photo.

1:1

Dog portrait — demo stock photo.

Badge

Small labels; use as link or button when needed.

Default Secondary Destructive Outline Ghost link Link

Skeleton

Loading placeholders; size and shape with Tailwind utilities on class.

Breadcrumb

Navigation trail: nav + ol + li; link, page, separator, optional ellipsis.

Basic

Custom separator + ellipsis

Button

Variants and sizes from config/components/button.php. Icons use mallardduck/blade-lucide-icons (x-lucide-*).

With Lucide icons (label + icon)

Icon-only (x-button.icon)

Anchor as button

Button group

Groups related actions (role="group"); merges borders between outline buttons. Nested groups get gap.

Outline row

Secondary + separator

Vertical icons

Label text + buttons

Page

Nested groups

Native select

Native HTML select with shadcn-style shell; forward name, id, aria-*, disabled, and invalid to the control. Option dropdowns use Canvas system colors for contrast.

Basic

Small + grouped

Invalid state

Calendar

Month grid powered by date-fns and Alpine; styling follows shadcn/ui Calendar (React DayPicker). Props: number-of-months, caption-layout (month/year dropdown for single month only; label for multi-month), time-zone (IANA today), disabled ISO list, modifiers + modifiers-class-names. Listen for calendar-select / calendar-select-range on the host.

Single (outline shell)

Selected date (live)

  • ISO
  • Full
  • Long
  • Medium
  • Short
  • Year-month-day (numeric)

Disable past

Shortcut prop disable-past merges with min using today in the app timezone (or time-zone when set).

Range (two months)

Selected range (live)

  • ISO →
  • Full
  • Slash-separated
  • Weekday span
  • Nights (inclusive)

Two months (label caption)

Label caption

Disabled + modifiers (booked)

Same dates in disabled and modifiers; line-through from modifiers-class-names.

Time zone (today highlight)

Uses Intl for “today” in the given IANA zone (here: UTC).