Sections
Get Started
UI
Components
- Animated Beam
- Animated List
- Animated Logo
- Animated Theme Toggler
- Avatar Circles
- Bento Grid
- Big Name Text
- Border Beam
- Dock
- Feature Card
- Filter Dropdown
- Footer Link
- Hero Badge
- Hero Buttons
- Hyper Text
- Lens
- Magic Card
- Marquee
- Meteors
- Onboarding Form
- Pricing Card
- Scroll Text
- Section Header
- Site Header
- Status Card
- Status
- Tweet Card
Features
Everything you need to succeed
Powerful features designed to help you build, scale, and grow your business with confidence.
"use client";
import { Sparkles } from "lucide-react";
import { SectionHeader } from "@/registry/sase/section-header";
export function SectionHeaderDemo() {
return (
<div className="w-full max-w-3xl">
<SectionHeader
badge={{
text: "Features",
icon: Sparkles,
variant: "violet",
}}
title="Everything you need to"
titleHighlight="succeed"
description="Powerful features designed to help you build, scale, and grow your business with confidence."
/>
</div>
);
}
Installation
pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/section-header.json
Usage
import { SectionHeader } from "@/components/ui/section-header";
import { Sparkles } from "lucide-react";<SectionHeader
badge={{
text: "Features",
icon: Sparkles,
variant: "violet",
}}
title="Everything you need to"
titleHighlight="succeed"
description="Powerful features designed to help you build, scale, and grow your business."
/>