Hero

blockhero

Hero section collection with eleven interchangeable variants: metric showcase, 3D tilt canvas, ASCII terminal stream, bento preview grid, developer terminal, interactive globe nodes, SaaS metrics dashboard, split device mockup, typing command center, video walkthrough modal, and glowing waitlist.

Installation

$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/hero.json

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/hero.json

$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/hero.json

$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/hero.json

Manifest:https://uipkge.dev/r/svelte/hero.jsonInstalls to:src/lib/components/blocks/hero/

Variants

Loading interactive previews…

npm dependencies

@lucide/svelte

Includes

avatar badge button card input

Theming

CSS custom properties referenced in this item. Override any of them in your :root or per-element to retheme.

--primary

Files installed (11)

src/lib/components/blocks/hero/Hero01.svelte3.8 kB

<script lang="ts">
  import { ArrowRight, PlayCircle } from '@lucide/svelte'
  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'
  import { Badge } from '$lib/components/ui/badge'
  import { Button } from '$lib/components/ui/button'
  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card'
</script>

<section data-slot="hero-01" class="bg-background relative overflow-hidden">
  <div class="relative mx-auto max-w-6xl px-6 py-24 lg:py-32">
    <div class="grid gap-12 lg:grid-cols-2 lg:items-center">
      <div class="space-y-6">
        <h1 class="text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
          The platform your team will actually use.
        </h1>
        <p class="text-muted-foreground max-w-xl text-lg">
          One workspace for everything your team needs. Built on shadcn-svelte primitives — fast, accessible, easy to
          customise.
        </p>
        <div class="flex flex-wrap items-center gap-3">
          <Button size="lg">
            Start free trial
            <ArrowRight class="ml-2 size-4" />
          </Button>
          <Button size="lg" variant="outline">
            <PlayCircle class="mr-2 size-4" />
            Watch demo (2 min)
          </Button>
        </div>
        <div class="text-muted-foreground flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
          <span>★★★★★ 4.9 on G2</span>
          <span>14-day free trial</span>
          <span>No credit card required</span>
        </div>
      </div>

      <div class="relative">
        <Card class="absolute -top-4 right-0 w-56 rotate-2 shadow-lg">
          <CardContent class="space-y-1 p-4">
            <p class="text-muted-foreground text-xs uppercase">Active users</p>
            <p class="text-2xl font-semibold">1,284</p>
            <p class="text-success text-xs">+8.2% MoM</p>
          </CardContent>
        </Card>
        <Card class="absolute top-32 -left-2 w-52 -rotate-3 shadow-lg">
          <CardContent class="space-y-1 p-4">
            <p class="text-muted-foreground text-xs uppercase">Uptime</p>
            <p class="text-2xl font-semibold">100%</p>
            <p class="text-muted-foreground text-xs">12 cycles, 0 misses</p>
          </CardContent>
        </Card>
        <Card class="ml-auto w-72 shadow-xl">
          <CardHeader>
            <CardTitle class="text-base">Onboarding queue</CardTitle>
            <CardDescription>3 starting Monday</CardDescription>
          </CardHeader>
          <CardContent class="space-y-3">
            <div class="flex items-center gap-3">
              <Avatar class="size-8">
                <AvatarFallback>LW</AvatarFallback>
              </Avatar>
              <div class="flex-1">
                <p class="text-sm font-medium">Lena Wei</p>
                <p class="text-muted-foreground text-xs">Engineering</p>
              </div>
              <Badge variant="secondary">Pending</Badge>
            </div>
            <div class="flex items-center gap-3">
              <Avatar class="size-8">
                <AvatarFallback>JR</AvatarFallback>
              </Avatar>
              <div class="flex-1">
                <p class="text-sm font-medium">Joaquín Reyes</p>
                <p class="text-muted-foreground text-xs">Engineering</p>
              </div>
              <Badge variant="secondary">Pending</Badge>
            </div>
            <div class="flex items-center gap-3">
              <Avatar class="size-8">
                <AvatarFallback>PS</AvatarFallback>
              </Avatar>
              <div class="flex-1">
                <p class="text-sm font-medium">Priya Shah</p>
                <p class="text-muted-foreground text-xs">Engineering</p>
              </div>
              <Badge variant="secondary">Pending</Badge>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  </div>
</section>

src/lib/components/blocks/hero/Hero3dTiltInteractiveCanvas.svelte6.7 kB

src/lib/components/blocks/hero/HeroAsciiTerminalStream.svelte6.6 kB

src/lib/components/blocks/hero/HeroBentoPreviewGrid.svelte12 kB

src/lib/components/blocks/hero/HeroDeveloperTerminal.svelte10.1 kB

src/lib/components/blocks/hero/HeroGlobeInteractiveNodes.svelte12.7 kB

src/lib/components/blocks/hero/HeroSaasMetricsDashboard.svelte9.2 kB

src/lib/components/blocks/hero/HeroSplitDeviceMockup.svelte9.3 kB

src/lib/components/blocks/hero/HeroTypingCommandCenter.svelte8.5 kB

src/lib/components/blocks/hero/HeroVideoModalWalkthrough.svelte12.6 kB

src/lib/components/blocks/hero/HeroWaitlistGlow.svelte8.8 kB

Raw manifest:https://uipkge.dev/r/svelte/hero.json

Change language