title: Blade Components description: All available Blade components for building your blog frontend. navigation: icon: i-lucide-component

All components are publishable. Run php artisan vendor:publish --tag=ink-views to customize.

SEO Components

Meta Tags

Renders Open Graph, Twitter Card, and article meta tags in <head>.

[@push](https://github.com/push)('head')
    <x-ink::meta-tags :post="$post" />
[@endpush](https://github.com/endpush)

Renders: og:title, og:description, og:type, og:image, article:published_time, article:author, article:section, twitter:card, twitter:title, twitter:image, canonical

Structured Data

Renders JSON-LD BlogPosting schema with publisher and breadcrumb data.

<x-ink::structured-data :post="$post" />

Renders: [@type](https://github.com/type): BlogPosting with headline, description, datePublished, dateModified, author, publisher (from config), articleSection, articleBody, and image.

Feed Link

Renders RSS <link> tag in <head>. Only renders if blog.feed route exists and feed is enabled in config.

[@push](https://github.com/push)('head')
    <x-ink::feed-link />
[@endpush](https://github.com/endpush)

Feed

Renders full RSS 2.0 XML. Use in your feed route view:

{{-- resources/views/blog/feed.blade.php --}}
<x-ink::feed :posts="$posts" />

UI Components

Post Card

Displays a post in a listing. Shows category badge, date, title, excerpt, and featured image thumbnail.

<x-ink::post-card :post="$post" />

Post Header

Renders category badge, title, author name, published date, and estimated read time.

<x-ink::post-header :post="$post" />

Post Body

Renders featured image and markdown content in a Tailwind prose container with dark mode support.

<x-ink::post-body :post="$post" />

Shows related posts section. Only renders if the collection is not empty.

<x-ink::related-posts :posts="$relatedPosts" />

Category Badge

Displays a category pill. Links to category page if blog.category route exists.

<x-ink::category-badge :category="$post->category" />
<x-ink::category-badge :category="$post->category" :linked="false" />

Preview Banner

Sticky amber banner for draft previews. Pushes noindex meta tag.

<x-ink::preview-banner :post="$post" :editUrl="$editUrl" />

Pagination

The package ships a numbered, aria-labeled pagination view used by the index/category/tag pages. To use it in your own views:

{{ $posts->links('ink::pagination.blog') }}

The view emits aria-label="Blog pagination" on the nav, aria-current="page" on the active page, and wire:navigate on every link.

Search (Livewire)

Drop <livewire:blog::search /> anywhere. It reads ?q= from the URL, debounces 400ms, and renders up to 20 matching posts. Empty queries show no results until the user types.

Ink Laravel Package