Brutalist Hero

A Neo-Brutalist hero section for landing pages, featuring a title, subtitle, CTA buttons, and a decorative code preview card.

Demo

Preview

新粗野主义 UI

用 BrutxUI 更快构建大胆界面

</>

terminal_shell // brutxui[ _ ] [ X ]

$ npx brutxui init

✓ Project initialized

$ npx brutxui add button

✓ Button component added

$ npx brutxui add card dialog

✓ 2 components added

█

Installation

pnpm dlx brutx-vue@latest add brutalist-hero

Usage

<script setup>
import BrutalistHero from '@/components/ui/brutalist-hero/BrutalistHero.vue'

function handlePrimary() {
    console.log('Primary CTA clicked')
}

function handleSecondary() {
    console.log('Secondary CTA clicked')
}
</script>

<template>
    <BrutalistHero
        title="Build Bold Interfaces Faster with BrutxUI"
        subtitle="A Neo-Brutalism component library for Vue 3. Bold borders, hard shadows, zero apologies."
        primary-cta-text="Get Started Now"
        secondary-cta-text="View Component Registry"
        @primary-cta="handlePrimary"
        @secondary-cta="handleSecondary"
    />
</template>

Props

BrutalistHero

Prop	Type	Default	Description
title	string	locale: brutalistHero.title	Title text
subtitle	string	—	Subtitle text
primaryCtaText	string	locale: brutalistHero.primaryCtaText	Primary CTA button text
secondaryCtaText	string	locale: brutalistHero.secondaryCtaText	Secondary CTA button text
class	string	—	Custom CSS class

Events

Event	Parameters	Description
primaryCta	—	Emitted when the primary CTA button is clicked
secondaryCta	—	Emitted when the secondary CTA button is clicked

Slots

Slot	Description
terminal	Replaces the content of the decorative code preview card. Shows the brutxui CLI install demo by default; pass custom terminal/code content when reusing in other projects

Accessibility

• Keyboard: Supports Tab to navigate between buttons, Enter to trigger actions
• ARIA: Buttons use semantic <button> tags
• Focus Management: Buttons are arranged in logical order