Z

ComponentGallery

A filterable grid organism for displaying component cards with search functionality. Supports category and status filtering with Alpine.js-powered interactivity.

Basic Gallery

Category:
Status:

found

No components found

Try adjusting your search or filter criteria

Without Filters

found

No components found

Try adjusting your search or filter criteria

Column Layouts

2 columns:

found

No components found

Try adjusting your search or filter criteria

4 columns:

found

No components found

Try adjusting your search or filter criteria

Usage Example


<x-interface-frameworks.component-gallery
    :components="$components"
    baseRoute="building-blocks"
    :categoryFilter="true"
    :statusFilter="true"
    :searchable="true"
    :columns="3"
/>

Props

Prop Type Default Description
components array [] Array of component objects
baseRoute string 'building-blocks' Base route for component links
categoryFilter boolean true Show category filter chips
statusFilter boolean true Show status filter chips
searchable boolean true Show search input
columns number 3 Grid columns (2, 3, or 4)
emptyMessage string 'No components found' Empty state message
class string '' Additional CSS classes

Component Object Structure

[
    'name' => 'Button',           // Required: display name
    'slug' => 'button',           // Required: URL slug
    'category' => 'Core UI',      // Optional: category for filtering
    'status' => 'Stable',         // Optional: Stable, Beta, Experimental
    'description' => '...',       // Optional: brief description
    'href' => '/custom/path',     // Optional: custom link (overrides baseRoute)
]

Accessibility Features

  • Search input has associated label (sr-only)
  • Filter buttons are keyboard accessible
  • Cards use semantic article elements
  • Status badges provide text alternatives
  • Empty state provides clear feedback
  • Live region updates for filtered results