Biolink

Open source

Link-in-bio layouts — a centered mobile-first column with avatar, bio and a stack of full-width link buttons.

1 of 3

resources/views/blocks/biolink-links.blade.php Blade

@props([
    'name' => 'Mara Ellison',
    'handle' => '@maraellison',
    // Optional footer line (for example your own credit); omitted when empty.
    'credit' => null,
    'bio' => 'Product designer & creative coder. Sharing systems, side projects, and the occasional sunset.',
    'avatar' => null,
    'verified' => true,
    'links' => null,
    'socials' => null,
])

@php
    $links ??= [
        ['label' => 'Read my latest essay', 'href' => '#', 'icon' => 'article'],
        ['label' => 'Subscribe to the newsletter', 'href' => '#', 'icon' => 'mail'],
        ['label' => 'Watch the design teardown', 'href' => '#', 'icon' => 'play'],
        ['label' => 'Book a 1:1 mentoring call', 'href' => '#', 'icon' => 'calendar'],
        ['label' => 'Shop the icon pack', 'href' => '#', 'icon' => 'store'],
    ];

    $socials ??= [
        ['label' => 'X', 'href' => '#', 'icon' => 'x'],
        ['label' => 'Instagram', 'href' => '#', 'icon' => 'instagram'],
        ['label' => 'GitHub', 'href' => '#', 'icon' => 'github'],
        ['label' => 'YouTube', 'href' => '#', 'icon' => 'youtube'],
    ];

    // Single-path glyphs (24x24, stroke=currentColor) keyed by name so the JIT
    // sees every fixed class and no colour ever leaks into markup.
    // Map the block's `socials` contract onto social-links: `platform` (or the older
    // `icon` key / a label) picks the mark; a raw `path` becomes a custom `icon`.
    $socialLinks = array_map(fn (array $s) => [
        'platform' => $s['platform'] ?? (isset($s['icon']) && ! str_contains($s['icon'], '<') ? $s['icon'] : strtolower(str_replace('.', '', $s['label'] ?? 'x'))),
        'label' => $s['label'] ?? null,
        'href' => $s['href'] ?? '#',
        'icon' => isset($s['path']) ? '<path d="'.$s['path'].'"/>' : (isset($s['icon']) && str_contains($s['icon'], '<') ? $s['icon'] : null),
    ], $socials);

    $icons = [
        'article' => 'M4 5a2 2 0 0 1 2-2h9l5 5v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Zm10-1v5h5M8 13h8M8 17h5',
        'mail' => 'M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7Zm0 .5 8 5 8-5',
        'play' => 'M5 5.5v13a1 1 0 0 0 1.52.85l10.5-6.5a1 1 0 0 0 0-1.7L6.52 4.65A1 1 0 0 0 5 5.5Z',
        'calendar' => 'M7 3v3m10-3v3M4 9h16M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z',
        'store' => 'M4 9h16l-1 11H5L4 9Zm2-4h12l1 4H5l1-4Zm3 8v3m6-3v3',
    ];

@endphp

<section
    {{ $attributes->merge(['class' => 'flex min-h-svh items-start justify-center bg-gradient-to-b from-muted via-background to-background px-4 py-12 text-foreground sm:items-center']) }}
>
    <div class="mx-auto w-full max-w-md">
        <div class="flex flex-col items-center text-center">
            <span class="rounded-full bg-gradient-to-br from-primary/40 to-primary/0 p-2">
                <x-ui.avatar
                    size="xl"
                    :src="$avatar"
                    :alt="$name"
                    fallback="ME"
                    class="size-24 text-2xl ring-4 ring-background"
                />
            </span>

            <h1 class="mt-6 flex items-center justify-center gap-2 text-xl font-semibold tracking-tight">
                {{ __($name) }}
                @if ($verified)
                    <x-ui.badge variant="default" size="sm" class="gap-2 px-2">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="m5 12 4 4L19 7" />
                        </svg>
                        <span class="sr-only">{{ __('Verified') }}</span>
                    </x-ui.badge>
                @endif
            </h1>

            <p class="mt-2 text-sm font-medium text-muted-foreground">{{ $handle }}</p>

            @if ($bio)
                <p class="mt-4 text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($bio) }}</p>
            @endif
        </div>

        <nav class="mt-8 flex flex-col gap-4" aria-label="{{ __('Links') }}">
            @foreach ($links as $link)
                <x-ui.button
                    :href="$link['href']"
                    variant="outline"
                    size="lg"
                    class="group h-14 w-full !justify-between gap-4 rounded-lg px-6 text-start text-sm font-medium shadow-sm transition-shadow hover:shadow-md"
                >
                    <span class="flex min-w-0 items-center gap-4">
                        <span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground transition-colors group-hover:bg-accent group-hover:text-accent-foreground">
                            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="{{ $icons[$link['icon']] ?? $icons['article'] }}" />
                            </svg>
                        </span>
                        <span class="truncate">{{ __($link['label']) }}</span>
                    </span>
                    <svg class="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 motion-reduce:transform-none rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m9 6 6 6-6 6" />
                    </svg>
                </x-ui.button>
            @endforeach
        </nav>

        <x-ui.social-links :links="$socialLinks" variant="outline" shape="full" class="mt-8 justify-center" />

        @if (filled($credit))
            <p class="mt-10 text-center text-sm text-muted-foreground">{{ __($credit) }}</p>
        @endif
    </div>
</section>

Installation

terminal

php artisan ui:add blocks/biolink-links

Installs these dependencies automatically:

avatar badge button social-links

Registry contract

Install confidence

php artisan ui:add blocks/biolink-links 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.2.2
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/biolink-links.blade.php

Registry dependencies

avatar badge button social-links

Package dependencies

composer: jml/brok:^0.2

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.

biolink-links.md

# Brok UI block: Biolink (`biolink-links`)

A centered mobile-first link-in-bio column on a soft gradient backdrop with a large avatar, verified display name, handle, bio, a vertical stack of full-width link buttons with leading icons and trailing arrows, and a social icon row.

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/biolink-links
```

## Render it

```blade
<x-blocks.biolink-links />
```

## Props

- `name` (string, default `Mara Ellison`)
- `handle` (string, default `@maraellison`)
- `bio` (string, default `Product designer & creative coder. Sharing systems, side projects, and the occasional sunset.`)
- `avatar` (mixed|null, default `null`)
- `verified` (bool, default `true`)
- `links` (mixed|null, default `null`)
- `socials` (mixed|null, default `null`)

## Use when

- Building a mobile-first link-in-bio page: avatar, verified name, bio, a vertical stack of full-width link buttons and social icons.
- Presenting each link with a leading icon and trailing arrow on a soft gradient backdrop.

## Avoid when

- Use biolink-card for a two-column link grid, or biolink-cover for a cover-banner layout instead of a single gradient backdrop.

## Rules

- Render the installed block with `<x-blocks.biolink-links />` 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/biolink-links
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/biolink-links.json

Ask about Biolink 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

Building a mobile-first link-in-bio page: avatar, verified name, bio, a vertical stack of full-width link buttons and social icons.
Presenting each link with a leading icon and trailing arrow on a soft gradient backdrop.

Avoid when

Use biolink-card for a two-column link grid, or biolink-cover for a cover-banner layout instead of a single gradient backdrop.

Anti-patterns

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

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.biolink-links />

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.