Features

Open source

Feature sections — icon grids, bordered cards, alternating media rows, bento layouts, a services variant and an industries grid.

Add to page builder

resources/views/blocks/features-tabs.blade.php Blade

@props([
    'eyebrow' => 'Features',
    'heading' => 'One platform, every workflow',
    'subheading' => 'Switch between the capabilities your team relies on — each tab reveals what makes the work faster, clearer, and safer.',
    'tabs' => null,
])

@php
    $tabs ??= [
        [
            'value' => 'automation',
            'label' => 'Automation',
            'title' => 'Put repetitive work on autopilot',
            'description' => 'Chain triggers, conditions, and actions into reusable flows so the busywork runs itself while your team focuses on outcomes.',
            'points' => [
                'Visual flow builder with reusable steps',
                'Schedule, event, and webhook triggers',
                'Built-in retries and audit logging',
            ],
        ],
        [
            'value' => 'analytics',
            'label' => 'Analytics',
            'title' => 'Decisions backed by live data',
            'description' => 'Track the metrics that matter on dashboards that update in real time, with drill-downs from the headline number to the raw event.',
            'points' => [
                'Real-time dashboards and saved views',
                'Cohort, funnel, and retention reports',
                'Export to CSV or your warehouse',
            ],
        ],
        [
            'value' => 'collaboration',
            'label' => 'Collaboration',
            'title' => 'Keep everyone in the loop',
            'description' => 'Comment, assign, and resolve in context so feedback never gets lost in a thread and the whole team sees the same source of truth.',
            'points' => [
                'Threaded comments and @mentions',
                'Roles, permissions, and shared spaces',
                'Activity history on every record',
            ],
        ],
        [
            'value' => 'security',
            'label' => 'Security',
            'title' => 'Enterprise-grade by default',
            'description' => 'Protect every account with the controls security teams expect, from single sign-on to a complete, exportable audit trail.',
            'points' => [
                'SSO, SAML, and granular access roles',
                'Encryption in transit and at rest',
                'SOC 2 aligned audit logging',
            ],
        ],
    ];

    $defaultTab = $tabs[0]['value'] ?? null;
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <div class="mx-auto max-w-2xl text-center">
            @if ($eyebrow)
                <x-ui.badge variant="secondary" class="mb-4">{{ __($eyebrow) }}</x-ui.badge>
            @endif

            <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
                {{ __($heading) }}
            </h2>

            @if ($subheading)
                <p class="mx-auto mt-4 max-w-xl text-pretty text-sm text-muted-foreground">
                    {{ __($subheading) }}
                </p>
            @endif
        </div>

        <x-ui.tabs :default="$defaultTab" variant="pills" class="mt-12">
            <x-ui.tabs.list class="mx-auto flex-wrap justify-center">
                @foreach ($tabs as $tab)
                    <x-ui.tabs.trigger :value="$tab['value']">{{ __($tab['label']) }}</x-ui.tabs.trigger>
                @endforeach
            </x-ui.tabs.list>

            @foreach ($tabs as $tab)
                <x-ui.tabs.content :value="$tab['value']" class="mt-8">
                    <div class="grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-12">
                        <div class="text-start">
                            <h3 class="text-pretty text-2xl font-semibold tracking-tight">
                                {{ __($tab['title']) }}
                            </h3>

                            <p class="mt-4 text-pretty text-sm text-muted-foreground">
                                {{ __($tab['description']) }}
                            </p>

                            <x-ui.check-list marker="chip" class="mt-6">
                                @foreach ($tab['points'] as $point)
                                    <x-ui.check-list.item>{{ __($point) }}</x-ui.check-list.item>
                                @endforeach
                            </x-ui.check-list>
                        </div>

                        <x-ui.card class="aspect-[4/3] overflow-hidden bg-muted p-6">
                            <div class="flex h-full flex-col gap-4">
                                <div class="flex items-center gap-4">
                                    <div class="size-9 shrink-0 rounded-full bg-primary/15"></div>
                                    <div class="flex-1 space-y-2">
                                        <div class="h-3 w-1/3 rounded bg-foreground/15"></div>
                                        <div class="h-2 w-1/2 rounded bg-foreground/10"></div>
                                    </div>
                                </div>
                                <div class="h-2 w-full rounded bg-foreground/10"></div>
                                <div class="h-2 w-5/6 rounded bg-foreground/10"></div>
                                <div class="h-2 w-2/3 rounded bg-foreground/10"></div>
                                <div class="mt-auto grid grid-cols-3 gap-4">
                                    <div class="h-12 rounded-md bg-primary/10"></div>
                                    <div class="h-12 rounded-md bg-foreground/10"></div>
                                    <div class="h-12 rounded-md bg-foreground/10"></div>
                                </div>
                            </div>
                        </x-ui.card>
                    </div>
                </x-ui.tabs.content>
            @endforeach
        </x-ui.tabs>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/features-tabs

Installs these dependencies automatically:

badge card check-list container section tabs

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/features-tabs.blade.php

Registry dependencies

badge card check-list container section tabs

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.

features-tabs.md

# Brok UI block: Features Tabs (`features-tabs`)

A features section with a centered eyebrow, heading, and intro above an accessible tab bar that switches between feature panels, each a two-column copy-plus-skeleton-visual layout.

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/features-tabs
```

## Render it

```blade
<x-blocks.features-tabs />
```

## Props

- `eyebrow` (string, default `Features`)
- `heading` (string, default `One platform, every workflow`)
- `subheading` (string, default `Switch between the capabilities your team relies on — each tab reveals what makes the work faster, clearer, and safer.`)
- `tabs` (mixed|null, default `null`)

## Use when

- Switching between feature panels via an accessible tab bar, each panel a two-column copy-plus-visual layout.
- Fitting a feature set with several distinct modes or workflows worth separating into tabs.

## Avoid when

- Use features-accordion for an accordion-plus-synced-preview layout instead of a horizontal tab bar.

## Rules

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

Ask about Features Tabs 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

Switching between feature panels via an accessible tab bar, each panel a two-column copy-plus-visual layout.
Fitting a feature set with several distinct modes or workflows worth separating into tabs.

Avoid when

Use features-accordion for an accordion-plus-synced-preview layout instead of a horizontal tab bar.

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.features-tabs />

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.