Pricing — Block · Electrik Slate

Pricing

Three-tier pricing strip with badges and CTAs.

Install + use

Blocks ship as electrik/slate-blocks. Copy the sample usage below, then wire props to your routes.

composer require electrik/slate-blocks


@source '../../vendor/electrik/slate-blocks/resources/views/**/*.blade.php';

Sample usage

@php
    $plans = [
        [
            'name' => 'Hobby',
            'description' => 'For side projects and experiments.',
            'price' => '$0',
            'period' => '/mo',
            'features' => ['All open-source components', 'Community support', 'Docs and examples'],
            'ctaLabel' => 'Get started',
            'buttonVariant' => 'outline',
        ],
        [
            'name' => 'Team',
            'description' => 'For product teams standardizing UI.',
            'price' => '$29',
            'period' => '/mo',
            'features' => ['Everything in Hobby', 'Shared theme tokens', 'Priority examples'],
            'ctaLabel' => 'Start trial',
            'featured' => true,
            'badge' => 'Popular',
        ],
        [
            'name' => 'Enterprise',
            'description' => 'For orgs with custom design systems.',
            'price' => 'Custom',
            'features' => ['Design partner access', 'Private support channel', 'Onboarding workshop'],
            'ctaLabel' => 'Talk to us',
            'buttonVariant' => 'secondary',
        ],
    ];
@endphp

<x-slate-block::pricing
    badge="Pricing"
    title="Simple plans for shipping UI"
    description="Start free. Scale when your design system needs a home."
    :plans="$plans"
/>