Social Feed

Open source

Shoppable social feeds — a profile header over a grid of post tiles with shop-this overlays.

resources/views/blocks/social-feed-grid.blade.php Blade

@props([
    'handle' => '@yourbrand',
    'followers' => '128K followers',
    'avatar' => null,
    'heading' => 'Tag us #yourbrand to be featured',
    'follow' => 'Follow',
    'posts' => null,
])

@php
    $posts ??= [
        ['alt' => 'Model wearing the linen overshirt in oat', 'likes' => '4.2K', 'href' => '#'],
        ['alt' => 'Flat-lay of the everyday tote in clay', 'likes' => '2.8K', 'href' => '#'],
        ['alt' => 'Close-up of the recycled-wool beanie', 'likes' => '6.1K', 'href' => '#'],
        ['alt' => 'Studio shot of the canvas low-top sneaker', 'likes' => '3.5K', 'href' => '#'],
        ['alt' => 'Detail of the brushed-cotton scarf', 'likes' => '1.9K', 'href' => '#'],
        ['alt' => 'Outfit of the day on a city street', 'likes' => '5.7K', 'href' => '#'],
    ];
@endphp

<x-ui.section
    data-slot="social-feed-01"
    space="lg" {{ $attributes }}
>
    <x-ui.container gutter="sm">
        {{-- Header row --}}
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-center gap-4">
                <x-ui.avatar :src="$avatar" size="lg" :alt="$handle">
                    {{ mb_strtoupper(mb_substr(ltrim($handle, '@'), 0, 1)) }}
                </x-ui.avatar>

                <div class="min-w-0">
                    <p class="text-base font-semibold leading-tight tracking-tight text-foreground">
                        {{ $handle }}
                    </p>
                    <p class="text-sm text-muted-foreground">{{ __($followers) }}</p>
                </div>
            </div>

            <x-ui.button size="sm" class="w-fit">
                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M12 5v14M5 12h14" />
                </svg>
                {{ __($follow) }}
            </x-ui.button>
        </div>

        <h2 class="mt-6 text-pretty text-lg font-semibold tracking-tight text-foreground sm:text-xl">
            {{ __($heading) }}
        </h2>

        {{-- Post grid --}}
        <ul role="list" class="mt-6 grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-4 lg:grid-cols-6">
            @foreach ($posts as $post)
                <li>
                    <x-ui.dialog>
                        <x-ui.dialog.trigger
                            class="group relative block aspect-square w-full overflow-hidden rounded-lg bg-muted text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                            aria-label="{{ __('View and shop post: :alt', ['alt' => __($post['alt'])]) }}"
                        >
                            {{-- Tokened muted placeholder tile with a centered image icon --}}
                            <span class="flex size-full items-center justify-center text-muted-foreground/40" aria-hidden="true">
                                <svg class="size-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="3" width="18" height="18" rx="2" />
                                    <circle cx="9" cy="9" r="2" />
                                    <path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 20" />
                                </svg>
                            </span>

                            {{-- Hover/focus overlay (not the only affordance — see aria-label) --}}
                            <span
                                class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 bg-foreground/60 p-2 text-center opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100"
                            >
                                <span class="inline-flex items-center gap-2 text-sm font-semibold text-background">
                                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
                                        <path d="M3 6h18" />
                                        <path d="M16 10a4 4 0 0 1-8 0" />
                                    </svg>
                                    {{ $post['likes'] }}
                                </span>

                                <x-ui.badge class="pointer-events-none">
                                    {{ __('Shop this') }}
                                </x-ui.badge>
                            </span>
                        </x-ui.dialog.trigger>

                        <x-ui.dialog.content size="sm" class="overflow-hidden p-0">
                            <div class="flex aspect-square w-full items-center justify-center bg-muted text-muted-foreground/40" aria-hidden="true">
                                <svg class="size-16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <rect x="3" y="3" width="18" height="18" rx="2" />
                                    <circle cx="9" cy="9" r="2" />
                                    <path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 20" />
                                </svg>
                            </div>

                            <div class="flex items-center justify-between gap-4 p-6">
                                <x-ui.dialog.title class="text-sm font-normal text-muted-foreground">{{ $handle }}</x-ui.dialog.title>
                                <x-ui.button :href="'#'" size="sm">
                                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
                                        <path d="M3 6h18" />
                                        <path d="M16 10a4 4 0 0 1-8 0" />
                                    </svg>
                                    {{ __('Shop the post') }}
                                </x-ui.button>
                            </div>
                        </x-ui.dialog.content>
                    </x-ui.dialog>
                </li>
            @endforeach
        </ul>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/social-feed-grid

Installs these dependencies automatically:

avatar badge button container dialog section

Registry contract

Install confidence

php artisan ui:add blocks/social-feed-grid writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.1.3
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/social-feed-grid.blade.php

Registry dependencies

avatar badge button container dialog section

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

social-feed-grid.md

# Brok UI block: Social Feed (`social-feed-grid`)

A shoppable Instagram-style social feed: a header row with the brand avatar, handle, follower count, and a Follow button; a 'tag us' subheading; and a responsive 2-to-6-column grid of square post tiles. Each tile composes the dialog primitive as its trigger, opening a real focus-trapped lightbox with the larger image and a 'Shop the post' button.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/social-feed-grid
```

## Render it

```blade
<x-blocks.social-feed-grid />
```

## Props

- `handle` (string, default `@yourbrand`) — Social handle shown in the header.
- `followers` (string, default `128K followers`) — Follower count text.
- `avatar` (mixed|null, default `null`) — Brand avatar image source; null falls back to initials.
- `heading` (string, default `Tag us #yourbrand to be featured`) — Section heading.
- `follow` (string, default `Follow`) — Follow button label.
- `posts` (mixed|null, default `null`) — Post tiles with alt text, likes and href; null falls back to sample data.

## Use when

- Showcasing a shoppable, Instagram-style grid of brand photos with a follow button and a lightbox for each post.
- Wanting to surface user-generated content and social proof on a storefront.

## Avoid when

- Showing customer quotes or reviews rather than photos; use testimonials-grid instead.

## Rules

- Render the installed block with `<x-blocks.social-feed-grid />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/social-feed-grid
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/social-feed-grid.json

Ask about Social Feed in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Showcasing a shoppable, Instagram-style grid of brand photos with a follow button and a lightbox for each post.
Wanting to surface user-generated content and social proof on a storefront.

Avoid when

Showing customer quotes or reviews rather than photos; use testimonials-grid instead.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: root social-feed-01

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.social-feed-grid />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.